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