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

   1 @use "sass:math";
   2
   3 @use "mixins";
   4 @use "vars";
   5
   6
   7 .input-base {
   8   border-radius: 3px;
   9   border: 1px solid #D4D4D4;
  10   @include mixins.lightDark(background-color, #fff, #333);
  11   @include mixins.lightDark(border-color, #d4d4d4, #111);
  12   @include mixins.lightDark(color, #666, #AAA);
  13   display: inline-block;
  14   font-size: vars.$fs-m;
  15   padding: vars.$xs*1.8;
  16   height: 40px;
  17   width: 250px;
  18   max-width: 100%;
  19
  20   &.neg, &.invalid {
  21     border: 1px solid var(--color-negative);
  22   }
  23   &.pos, &.valid {
  24     border: 1px solid var(--color-positive);
  25   }
  26   &.disabled, &[disabled] {
  27     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
  28   }
  29   &[readonly] {
  30     background-color: #f8f8f8;
  31   }
  32   &:focus {
  33     border-color: var(--color-primary);
  34     outline: 1px solid var(--color-primary);
  35   }
  36 }
  37
  38 .input-fill-width {
  39   width: 100% !important;
  40 }
  41
  42 .fake-input {
  43   @extend .input-base;
  44   overflow: auto;
  45 }
  46
  47 #html-editor {
  48   display: none;
  49 }
  50
  51 #markdown-editor {
  52   position: relative;
  53   z-index: 5;
  54   #markdown-editor-input {
  55     font-style: normal;
  56     font-weight: 400;
  57     padding: vars.$xs vars.$m;
  58     color: #444;
  59     border-radius: 0;
  60     height: 100%;
  61     font-size: 14px;
  62     line-height: 1.2;
  63     max-height: 100%;
  64     flex: 1;
  65     border: 0;
  66     width: 100%;
  67     &:focus {
  68       outline: 0;
  69     }
  70   }
  71   &.fullscreen {
  72     position: fixed;
  73     top: 0;
  74     left: 0;
  75     height: 100%;
  76     z-index: 2;
  77   }
  78 }
  79
  80 .markdown-editor-wrap {
  81   border-top: 1px solid #DDD;
  82   border-bottom: 1px solid #DDD;
  83   @include mixins.lightDark(border-color, #ddd, #000);
  84   position: relative;
  85   flex: 1;
  86   min-width: 0;
  87 }
  88 .markdown-editor-wrap + .markdown-editor-wrap {
  89   flex-basis: 50%;
  90   flex-shrink: 0;
  91   flex-grow: 0;
  92 }
  93
  94 .markdown-editor-wrap .cm-editor {
  95   flex: 1;
  96   max-width: 100%;
  97   border: 0;
  98   margin: 0;
  99 }
 100
 101 .markdown-panel-divider {
 102   width: 2px;
 103   @include mixins.lightDark(background-color, #ddd, #000);
 104   cursor: col-resize;
 105 }
 106
 107 @include mixins.smaller-than(vars.$bp-m) {
 108   #markdown-editor {
 109     flex-direction: column;
 110   }
 111   #markdown-editor .markdown-editor-wrap {
 112     width: 100%;
 113     max-width: 100%;
 114     flex-grow: 1;
 115     flex-basis: auto !important;
 116     min-height: 0;
 117   }
 118   .editor-toolbar-label {
 119     float: none !important;
 120     @include mixins.lightDark(border-color, #DDD, #555);
 121     display: block;
 122   }
 123   .markdown-editor-wrap:not(.active) .editor-toolbar + div,
 124   .markdown-editor-wrap:not(.active) .editor-toolbar .buttons,
 125   .markdown-editor-wrap:not(.active) .markdown-display {
 126     display: none;
 127   }
 128   #markdown-editor .markdown-editor-wrap:not(.active) {
 129     flex-grow: 0;
 130     flex: none;
 131   }
 132 }
 133
 134 .markdown-editor-display {
 135   background-color: #fff;
 136   body {
 137     display: block;
 138     background-color: #fff;
 139     padding-inline-start: 12px;
 140     padding-inline-end: 12px;
 141     max-width: 864px;
 142   }
 143   [drawio-diagram]:hover {
 144     outline: 2px solid var(--color-primary);
 145   }
 146 }
 147
 148 html.markdown-editor-display.dark-mode {
 149   background-color: #222;
 150   body {
 151     background-color: #222;
 152   }
 153 }
 154
 155 .editor-toolbar {
 156   height: 32px;
 157   width: 100%;
 158   font-size: 11px;
 159   line-height: 1.6;
 160   border-bottom: 1px solid #CCC;
 161   @include mixins.lightDark(background-color, #FFF, #333);
 162   @include mixins.lightDark(border-color, #CCC, #000);
 163   flex: none;
 164   @include mixins.whenDark {
 165     button {
 166       color: #AAA;
 167     }
 168   }
 169 }
 170
 171 .editor-toolbar .buttons {
 172   font-size: vars.$fs-m;
 173   .dropdown-menu {
 174     padding: 0;
 175   }
 176   .toggle-switch {
 177     margin: vars.$s 0;
 178   }
 179 }
 180
 181 .editor-toolbar .buttons button {
 182   font-size: .9rem;
 183   width: 2rem;
 184   text-align: center;
 185   border-left: 1px solid;
 186   @include mixins.lightDark(border-color, #DDD, #555);
 187   svg {
 188     margin-inline-end: 0;
 189   }
 190   &:hover {
 191     @include mixins.lightDark(background-color, #DDD, #222);
 192   }
 193 }
 194
 195
 196 label {
 197   @include mixins.lightDark(color, #666, #ddd);
 198   display: block;
 199   line-height: 1.4em;
 200   font-size: 0.94em;
 201   font-weight: 400;
 202   padding-bottom: 2px;
 203   margin-bottom: 0.2em;
 204   &.inline {
 205     display: inline-block;
 206   }
 207 }
 208
 209 label.radio, label.checkbox {
 210   font-weight: 400;
 211   user-select: none;
 212   input[type="radio"], input[type="checkbox"] {
 213     margin-inline-end: vars.$xs;
 214   }
 215 }
 216
 217 label.inline.checkbox {
 218   margin-inline-end: vars.$m;
 219 }
 220
 221 label + p.small {
 222   margin-bottom: 0.8em;
 223 }
 224
 225 table.form-table {
 226   max-width: 100%;
 227   td {
 228     overflow: hidden;
 229     padding: math.div(vars.$xxs, 2) 0;
 230   }
 231 }
 232
 233 input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"],
 234 input[type="color"], input[type="password"], select, textarea {
 235   @extend .input-base;
 236 }
 237
 238 select {
 239   -webkit-appearance: none;
 240   -moz-appearance: none;
 241   appearance: none;
 242   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>");
 243   background-size: 10px 12px;
 244   background-position: calc(100% - 20px) 64%;
 245   background-repeat: no-repeat;
 246
 247   @include mixins.rtl {
 248     background-position: 20px 70%;
 249   }
 250 }
 251
 252 input[type=date] {
 253   width: 190px;
 254 }
 255
 256 input[type=color] {
 257   height: 60px;
 258   &.small {
 259     height: 42px;
 260     width: 60px;
 261     padding: 2px;
 262   }
 263 }
 264
 265 .toggle-switch {
 266   user-select: none;
 267   display: inline-grid;
 268   grid-template-columns: (16px + vars.$s) 1fr;
 269   align-items: center;
 270   margin: vars.$m 0;
 271   .custom-checkbox {
 272     width: 16px;
 273     height: 16px;
 274     border-radius: 2px;
 275     display: inline-block;
 276     border: 2px solid currentColor;
 277     overflow: hidden;
 278     fill: currentColor;
 279     .svg-icon {
 280       width: 100%;
 281       height: 100%;
 282       margin: 0;
 283       bottom: auto;
 284       top: -1.5px;
 285       left: 0;
 286       transition: transform ease-in-out 120ms;
 287       transform: scale(0);
 288       transform-origin: center center;
 289     }
 290   }
 291   input[type=checkbox] {
 292     display: none;
 293   }
 294   input[type=checkbox]:checked + .custom-checkbox .svg-icon {
 295     transform: scale(1);
 296   }
 297   .custom-checkbox:hover {
 298     background-color: rgba(0, 0, 0, 0.05);
 299     opacity: 0.8;
 300   }
 301   input[type=checkbox][disabled] ~ * {
 302     opacity: 0.8;
 303     cursor: not-allowed;
 304   }
 305   input[type=checkbox][disabled] ~ .custom-checkbox {
 306     border-color: #999;
 307     color: #999 !important;
 308     background: #f2f2f2;
 309   }
 310 }
 311 .toggle-switch-list {
 312   .toggle-switch {
 313     margin: vars.$xs 0;
 314   }
 315   &.compact .toggle-switch {
 316     margin: 1px 0;
 317   }
 318 }
 319
 320 .form-group {
 321   margin-bottom: vars.$s;
 322 }
 323
 324 .setting-list > div {
 325   border-bottom: 1px solid #DDD;
 326   padding: vars.$xl 0;
 327   &:last-child {
 328     border-bottom: none;
 329   }
 330 }
 331 .setting-list-label {
 332   @include mixins.lightDark(color, #222, #DDD);
 333   color: #222;
 334   font-size: 1rem;
 335 }
 336 .setting-list-label + p.small {
 337   margin-bottom: 0;
 338 }
 339 .setting-list-label + .grid {
 340   margin-top: vars.$m;
 341 }
 342
 343 .setting-list .grid, .stretch-inputs {
 344   input[type=text], input[type=email], input[type=password], select {
 345     width: 100%;
 346   }
 347 }
 348
 349 .simple-code-input {
 350   background-color: #F8F8F8;
 351   font-family: monospace;
 352   font-size: 12px;
 353   min-height: 100px;
 354   display: block;
 355   width: 100%;
 356 }
 357
 358 .form-group {
 359   div.text-pos, div.text-neg, p.text-post, p.text-neg {
 360     padding: vars.$xs 0;
 361   }
 362 }
 363
 364 .form-group.collapsible {
 365   padding: 0 vars.$m;
 366   border: 1px solid;
 367   @include mixins.lightDark(border-color, #DDD, #000);
 368   border-radius: 4px;
 369   .collapse-title {
 370     margin-inline-start: -(vars.$m);
 371     margin-inline-end: -(vars.$m);
 372     padding: vars.$s vars.$m;
 373     display: block;
 374     width: calc(100% + 32px);
 375     text-align: start;
 376   }
 377   .collapse-title, .collapse-title label {
 378     cursor: pointer;
 379   }
 380   .collapse-title label {
 381     padding-bottom: 0;
 382     margin-bottom: 0;
 383     color: inherit;
 384   }
 385   .collapse-title label:before {
 386     display: inline-block;
 387     content: '▸';
 388     margin-inline-end: vars.$m;
 389     transition: all ease-in-out 400ms;
 390     transform: rotate(0);
 391   }
 392   .collapse-content {
 393     display: none;
 394     padding-bottom: vars.$m;
 395   }
 396   &.open .collapse-title label:before {
 397     transform: rotate(90deg);
 398   }
 399 }
 400
 401 .form-group.ambrosia-container, .form-group.ambrosia-container * {
 402     position:absolute !important;
 403     height:1px !important;
 404     width:1px !important;
 405     margin:-1px !important;
 406     padding:0 !important;
 407     background:transparent !important;
 408     color:transparent !important;
 409     border:none !important;
 410     overflow: hidden !important;
 411     clip: rect(0,0,0,0) !important;
 412     white-space: nowrap !important;
 413 }
 414
 415 .title-input input[type="text"] {
 416   display: block;
 417   width: 100%;
 418   padding: vars.$s;
 419   margin-top: 0;
 420   font-size: 2em;
 421   height: auto;
 422 }
 423
 424 .description-input textarea {
 425   display: block;
 426   width: 100%;
 427   padding: vars.$s;
 428   font-size: vars.$fs-m;
 429   color: #666;
 430   height: auto;
 431 }
 432
 433 .description-input > .tox-tinymce {
 434   border: 1px solid #DDD !important;
 435   @include mixins.lightDark(border-color, #DDD !important, #000 !important);
 436   border-radius: 3px;
 437   .tox-toolbar__primary {
 438     justify-content: end;
 439   }
 440 }
 441
 442 .search-box {
 443   max-width: 100%;
 444   position: relative;
 445   button[tabindex="-1"] {
 446     background-color: transparent;
 447     border: none;
 448     @include mixins.lightDark(color, #666, #AAA);
 449     padding: 0;
 450     cursor: pointer;
 451     position: absolute;
 452     inset-inline-start: 8px;
 453     top: 10px;
 454   }
 455   input {
 456     display: block;
 457     padding: vars.$xs * 1.5;
 458     padding-inline-start: vars.$l + 4px;
 459     width: 300px;
 460     max-width: 100%;
 461     height: auto;
 462   }
 463   &.flexible input {
 464     width: 100%;
 465   }
 466   button.search-box-cancel {
 467     left: auto;
 468     right: 0;
 469   }
 470 }
 471
 472 .contained-search-box {
 473   display: flex;
 474   height: 38px;
 475   z-index: -1;
 476   &.floating {
 477     box-shadow: vars.$bs-med;
 478     border-radius: 4px;
 479     overflow: hidden;
 480     @include mixins.whenDark {
 481       border: 1px solid #000;
 482     }
 483   }
 484   input, button {
 485     height: 100%;
 486     border-radius: 0;
 487     border: 1px solid #ddd;
 488     @include mixins.lightDark(border-color, #ddd, #000);
 489     margin-inline-start: -1px;
 490     &:last-child {
 491       border-inline-end: 0;
 492     }
 493   }
 494   input {
 495     border: 0;
 496     flex: 5;
 497     padding: vars.$xs vars.$s;
 498     &:focus, &:active {
 499       outline: 1px dotted var(--color-primary);
 500       outline-offset: -2px;
 501       border: 0;
 502     }
 503   }
 504   button {
 505     border: 0;
 506     width: 48px;
 507     border-inline-start: 1px solid #DDD;
 508     background-color: #FFF;
 509     @include mixins.lightDark(background-color, #FFF, #333);
 510     @include mixins.lightDark(color, #444, #AAA);
 511   }
 512   button:focus {
 513     outline: 1px dotted var(--color-primary);
 514     outline-offset: -2px;
 515   }
 516   svg {
 517     margin: 0;
 518   }
 519   @include mixins.smaller-than(vars.$bp-s) {
 520     width: 180px;
 521   }
 522 }
 523
 524 .outline > input {
 525   border: 0;
 526   border-bottom: 2px solid #DDD;
 527   border-radius: 0;
 528   &:focus, &:active {
 529     border: 0;
 530     border-bottom: 2px solid #AAA;
 531     outline: 0;
 532   }
 533 }
 534
 535
 536 .image-picker img {
 537   background-color: #BBB;
 538   max-width: 100%;
 539 }
 540
 541 .custom-file-input {
 542   overflow: hidden;
 543   padding: 0;
 544   position: absolute;
 545   white-space: nowrap;
 546   width: 1px;
 547   height: 1px;
 548   border: 0;
 549   clip: rect(0, 0, 0, 0);
 550 }
 551 .custom-file-input:focus + label {
 552   border-color: var(--color-primary);
 553   outline: 1px solid var(--color-primary);
 554 }
 555
 556 .custom-simple-file-input {
 557   max-width: 100%;
 558   border: 1px solid;
 559   @include mixins.lightDark(border-color, #DDD, #666);
 560   border-radius: 4px;
 561   padding: vars.$s vars.$m;
 562 }
 563 .custom-simple-file-input::file-selector-button {
 564   background-color: transparent;
 565   text-decoration: none;
 566   font-size: 0.8rem;
 567   line-height: 1.4em;
 568   padding: vars.$xs vars.$s;
 569   border: 1px solid;
 570   font-weight: 400;
 571   outline: 0;
 572   border-radius: 4px;
 573   cursor: pointer;
 574   margin-right: vars.$m;
 575   @include mixins.lightDark(color, #666, #AAA);
 576   @include mixins.lightDark(border-color, #CCC, #666);
 577   &:hover, &:focus, &:active {
 578     @include mixins.lightDark(color, #444, #BBB);
 579     border: 1px solid #CCC;
 580     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
 581     background-color: #F2F2F2;
 582     @include mixins.lightDark(background-color, #f8f8f8, #444);
 583     filter: none;
 584   }
 585   &:active {
 586     border-color: #BBB;
 587     background-color: #DDD;
 588     color: #666;
 589     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
 590   }
 591 }
 592
 593 input.shortcut-input {
 594   width: auto;
 595   max-width: 120px;
 596   height: auto;
 597 }