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