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