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