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