BookStack Code Mirror - bookstack/blob - resources/sass/_forms.scss

   1
   2 .input-base {
   3   border-radius: 3px;
   4   border: 1px solid #D4D4D4;
   5   @include lightDark(background-color, #fff, #333);
   6   @include lightDark(border-color, #d4d4d4, #111);
   7   @include lightDark(color, #666, #AAA);
   8   display: inline-block;
   9   font-size: $fs-m;
  10   padding: $-xs*1.5;
  11   width: 250px;
  12   max-width: 100%;
  13
  14   &.neg, &.invalid {
  15     border: 1px solid $negative;
  16   }
  17   &.pos, &.valid {
  18     border: 1px solid $positive;
  19   }
  20   &.disabled, &[disabled] {
  21     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
  22   }
  23   &[readonly] {
  24     background-color: #f8f8f8;
  25   }
  26   &:focus {
  27     border-color: var(--color-primary);
  28     outline: 1px solid var(--color-primary);
  29   }
  30 }
  31
  32 .input-fill-width {
  33   width: 100% !important;
  34 }
  35
  36 .fake-input {
  37   @extend .input-base;
  38   overflow: auto;
  39 }
  40
  41 #html-editor {
  42   display: none;
  43 }
  44
  45 #markdown-editor {
  46   position: relative;
  47   z-index: 5;
  48   #markdown-editor-input {
  49     font-style: normal;
  50     font-weight: 400;
  51     padding: $-xs $-m;
  52     color: #444;
  53     border-radius: 0;
  54     max-height: 100%;
  55     flex: 1;
  56     border: 0;
  57     width: 100%;
  58     &:focus {
  59       outline: 0;
  60     }
  61   }
  62   .markdown-display, .markdown-editor-wrap {
  63     flex: 1;
  64     position: relative;
  65   }
  66   .markdown-editor-wrap {
  67     display: flex;
  68     flex-direction: column;
  69     border: 1px solid #DDD;
  70     @include lightDark(border-color, #ddd, #000);
  71     width: 50%;
  72     max-width: 50%;
  73   }
  74   &.fullscreen {
  75     position: fixed;
  76     top: 0;
  77     left: 0;
  78     height: 100%;
  79     z-index: 2;
  80   }
  81 }
  82
  83 @include smaller-than($m) {
  84   #markdown-editor {
  85     flex-direction: column;
  86   }
  87   #markdown-editor .markdown-editor-wrap {
  88     width: 100%;
  89     max-width: 100%;
  90     flex-grow: 1;
  91   }
  92   #markdown-editor .editor-toolbar {
  93     padding: 0;
  94   }
  95   #markdown-editor .editor-toolbar > * {
  96     padding: $-xs $-s;
  97   }
  98   .editor-toolbar-label {
  99     float: none !important;
 100     border-bottom: 1px solid #DDD;
 101     display: block;
 102   }
 103   .markdown-editor-wrap:not(.active) .editor-toolbar + div,
 104   .markdown-editor-wrap:not(.active) .editor-toolbar .buttons,
 105   .markdown-editor-wrap:not(.active) .markdown-display {
 106     display: none;
 107   }
 108   #markdown-editor .markdown-editor-wrap:not(.active) {
 109     flex-grow: 0;
 110     flex: none;
 111     min-height: 0;
 112   }
 113 }
 114
 115 .markdown-display {
 116   margin-inline-start: -1px;
 117 }
 118
 119 .markdown-editor-display {
 120   background-color: #fff;
 121   body {
 122     background-color: #fff;
 123     padding-inline-start: 16px;
 124     padding-inline-end: 16px;
 125   }
 126   [drawio-diagram]:hover {
 127     outline: 2px solid var(--color-primary);
 128   }
 129 }
 130
 131 html.markdown-editor-display.dark-mode {
 132   background-color: #222;
 133   body {
 134     background-color: #222;
 135   }
 136 }
 137
 138 .editor-toolbar {
 139   width: 100%;
 140   padding: $-xs $-m;
 141   font-size: 11px;
 142   line-height: 1.6;
 143   border-bottom: 1px solid #DDD;
 144   background-color: #EEE;
 145   @include lightDark(background-color, #eee, #111);
 146   @include lightDark(border-color, #ddd, #000);
 147   flex: none;
 148   &:after {
 149     content: '';
 150     display: block;
 151     clear: both;
 152   }
 153   @include whenDark {
 154     button {
 155       color: #AAA;
 156     }
 157   }
 158 }
 159
 160
 161 label {
 162   @include lightDark(color, #666, #ddd);
 163   display: block;
 164   line-height: 1.4em;
 165   font-size: 0.94em;
 166   font-weight: 400;
 167   padding-bottom: 2px;
 168   margin-bottom: 0.2em;
 169   &.inline {
 170     display: inline-block;
 171   }
 172 }
 173
 174 label.radio, label.checkbox {
 175   font-weight: 400;
 176   user-select: none;
 177   input[type="radio"], input[type="checkbox"] {
 178     margin-inline-end: $-xs;
 179   }
 180 }
 181
 182 label.inline.checkbox {
 183   margin-inline-end: $-m;
 184 }
 185
 186 label + p.small {
 187   margin-bottom: 0.8em;
 188 }
 189
 190 table.form-table {
 191   max-width: 100%;
 192   td {
 193     overflow: hidden;
 194     padding: math.div($-xxs, 2) 0;
 195   }
 196 }
 197
 198 input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"],
 199 input[type="color"], input[type="password"], select, textarea {
 200   @extend .input-base;
 201 }
 202
 203 select {
 204   -webkit-appearance: none;
 205   -moz-appearance: none;
 206   appearance: none;
 207   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23666666'><polygon points='0,0 100,0 50,50'/></svg>");
 208   background-size: 12px;
 209   background-position: calc(100% - 20px) 70%;
 210   background-repeat: no-repeat;
 211 }
 212
 213 input[type=date] {
 214   width: 190px;
 215 }
 216
 217 input[type=color] {
 218   height: 60px;
 219   &.small {
 220     height: 42px;
 221     width: 60px;
 222     padding: 2px;
 223   }
 224 }
 225
 226 .toggle-switch {
 227   user-select: none;
 228   display: inline-grid;
 229   grid-template-columns: (16px + $-s) 1fr;
 230   align-items: center;
 231   margin: $-m 0;
 232   .custom-checkbox {
 233     width: 16px;
 234     height: 16px;
 235     border-radius: 2px;
 236     display: inline-block;
 237     border: 2px solid currentColor;
 238     opacity: 0.6;
 239     overflow: hidden;
 240     fill: currentColor;
 241     .svg-icon {
 242       width: 100%;
 243       height: 100%;
 244       margin: 0;
 245       bottom: auto;
 246       top: -1.5px;
 247       left: 0;
 248       transition: transform ease-in-out 120ms;
 249       transform: scale(0);
 250       transform-origin: center center;
 251     }
 252   }
 253   input[type=checkbox] {
 254     display: none;
 255   }
 256   input[type=checkbox]:checked + .custom-checkbox .svg-icon {
 257     transform: scale(1);
 258   }
 259   .custom-checkbox:hover {
 260     background-color: rgba(0, 0, 0, 0.05);
 261     opacity: 0.8;
 262   }
 263 }
 264 .toggle-switch-list {
 265   .toggle-switch {
 266     margin: $-xs 0;
 267   }
 268   &.compact .toggle-switch {
 269     margin: 1px 0;
 270   }
 271 }
 272
 273 .form-group {
 274   margin-bottom: $-s;
 275 }
 276
 277 .setting-list > div {
 278   border-bottom: 1px solid #DDD;
 279   padding: $-xl 0;
 280   &:last-child {
 281     border-bottom: none;
 282   }
 283 }
 284 .setting-list-label {
 285   color: #222;
 286   font-size: 1rem;
 287 }
 288 .setting-list-label + p.small {
 289   margin-bottom: 0;
 290 }
 291 .setting-list-label + .grid {
 292   margin-top: $-m;
 293 }
 294
 295 .setting-list .grid, .stretch-inputs {
 296   input[type=text], input[type=email], input[type=password], select {
 297     width: 100%;
 298   }
 299 }
 300
 301 .simple-code-input {
 302   background-color: #F8F8F8;
 303   font-family: monospace;
 304   font-size: 12px;
 305   min-height: 100px;
 306   display: block;
 307   width: 100%;
 308 }
 309
 310 .form-group {
 311   div.text-pos, div.text-neg, p.text-post, p.text-neg {
 312     padding: $-xs 0;
 313   }
 314 }
 315
 316 .form-group[collapsible] {
 317   padding: 0 $-m;
 318   border: 1px solid #DDD;
 319   border-radius: 4px;
 320   .collapse-title {
 321     margin-inline-start: -$-m;
 322     margin-inline-end: -$-m;
 323     padding: $-s $-m;
 324     display: block;
 325     width: calc(100% + 32px);
 326     text-align: start;
 327   }
 328   .collapse-title, .collapse-title label {
 329     cursor: pointer;
 330   }
 331   .collapse-title label {
 332     padding-bottom: 0;
 333     margin-bottom: 0;
 334     color: inherit;
 335   }
 336   .collapse-title label:before {
 337     display: inline-block;
 338     content: '▸';
 339     margin-inline-end: $-m;
 340     transition: all ease-in-out 400ms;
 341     transform: rotate(0);
 342   }
 343   .collapse-content {
 344     display: none;
 345     padding-bottom: $-m;
 346   }
 347   &.open .collapse-title label:before {
 348     transform: rotate(90deg);
 349   }
 350 }
 351
 352 .inline-input-style {
 353   display: block;
 354   width: 100%;
 355   padding: $-s;
 356 }
 357
 358 .title-input input[type="text"] {
 359   @extend .inline-input-style;
 360   margin-top: 0;
 361   font-size: 2em;
 362 }
 363
 364 .title-input.page-title {
 365   font-size: 0.8em;
 366   @include lightDark(background-color, #fff, #333);
 367   .input {
 368     border: 0;
 369     margin-bottom: -1px;
 370   }
 371   input[type="text"] {
 372     max-width: 840px;
 373     margin: 0 auto;
 374     border: none;
 375   }
 376 }
 377
 378 .page-title input {
 379   display: block;
 380   width: 100%;
 381   font-size: 1.4em;
 382 }
 383
 384 .description-input textarea {
 385   @extend .inline-input-style;
 386   font-size: $fs-m;
 387   color: #666;
 388   width: 100%;
 389 }
 390
 391 div[editor-type="markdown"] .title-input.page-title input[type="text"] {
 392   max-width: 100%;
 393   border-radius: 0;
 394 }
 395
 396 .search-box {
 397   max-width: 100%;
 398   position: relative;
 399   button {
 400     background-color: transparent;
 401     border: none;
 402     @include lightDark(color, #666, #AAA);
 403     padding: 0;
 404     cursor: pointer;
 405     position: absolute;
 406     left: 8px;
 407     top: 9px;
 408     @include rtl {
 409       right: 8px;
 410       left: auto;
 411     }
 412   }
 413   input {
 414     display: block;
 415     padding-inline-start: $-l + 4px;
 416     width: 300px;
 417     max-width: 100%;
 418   }
 419   &.flexible input {
 420     width: 100%;
 421   }
 422   .search-box-cancel {
 423     left: auto;
 424     right: 0;
 425   }
 426 }
 427
 428 .outline > input {
 429   border: 0;
 430   border-bottom: 2px solid #DDD;
 431   border-radius: 0;
 432   &:focus, &:active {
 433     border: 0;
 434     border-bottom: 2px solid #AAA;
 435     outline: 0;
 436   }
 437 }
 438
 439
 440 .image-picker img {
 441   background-color: #BBB;
 442   max-width: 100%;
 443 }
 444
 445 .custom-file-input {
 446   overflow: hidden;
 447   padding: 0;
 448   position: absolute;
 449   white-space: nowrap;
 450   width: 1px;
 451   height: 1px;
 452   border: 0;
 453   clip: rect(0, 0, 0, 0);
 454 }
 455 .custom-file-input:focus + label {
 456   border-color: var(--color-primary);
 457   outline: 1px solid var(--color-primary);
 458 }