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   min-width: 0;
  79 }
  80 .markdown-editor-wrap + .markdown-editor-wrap {
  81   flex-basis: 50%;
  82   flex-shrink: 0;
  83   flex-grow: 0;
  84 }
  85
  86 .markdown-editor-wrap .cm-editor {
  87   flex: 1;
  88   max-width: 100%;
  89 }
  90
  91 .markdown-panel-divider {
  92   width: 2px;
  93   @include lightDark(background-color, #ddd, #000);
  94   cursor: col-resize;
  95 }
  96
  97 @include smaller-than($m) {
  98   #markdown-editor {
  99     flex-direction: column;
 100   }
 101   #markdown-editor .markdown-editor-wrap {
 102     width: 100%;
 103     max-width: 100%;
 104     flex-grow: 1;
 105     flex-basis: auto !important;
 106   }
 107   .editor-toolbar-label {
 108     float: none !important;
 109     @include lightDark(border-color, #DDD, #555);
 110     display: block;
 111   }
 112   .markdown-editor-wrap:not(.active) .editor-toolbar + div,
 113   .markdown-editor-wrap:not(.active) .editor-toolbar .buttons,
 114   .markdown-editor-wrap:not(.active) .markdown-display {
 115     display: none;
 116   }
 117   #markdown-editor .markdown-editor-wrap:not(.active) {
 118     flex-grow: 0;
 119     flex: none;
 120     min-height: 0;
 121   }
 122 }
 123
 124 .markdown-editor-display {
 125   background-color: #fff;
 126   body {
 127     display: block;
 128     background-color: #fff;
 129     padding-inline-start: 16px;
 130     padding-inline-end: 16px;
 131   }
 132   [drawio-diagram]:hover {
 133     outline: 2px solid var(--color-primary);
 134   }
 135 }
 136
 137 html.markdown-editor-display.dark-mode {
 138   background-color: #222;
 139   body {
 140     background-color: #222;
 141   }
 142 }
 143
 144 .editor-toolbar {
 145   height: 32px;
 146   width: 100%;
 147   font-size: 11px;
 148   line-height: 1.6;
 149   border-bottom: 1px solid #DDD;
 150   background-color: #EEE;
 151   @include lightDark(background-color, #eee, #111);
 152   @include lightDark(border-color, #ddd, #000);
 153   flex: none;
 154   @include whenDark {
 155     button {
 156       color: #AAA;
 157     }
 158   }
 159 }
 160
 161 .editor-toolbar .buttons {
 162   font-size: $fs-m;
 163   .dropdown-menu {
 164     padding: 0;
 165   }
 166   .toggle-switch {
 167     margin: $-s 0;
 168   }
 169 }
 170
 171 .editor-toolbar .buttons button {
 172   font-size: .9rem;
 173   width: 2rem;
 174   text-align: center;
 175   border-left: 1px solid;
 176   @include lightDark(border-color, #DDD, #555);
 177   svg {
 178     margin-inline-end: 0;
 179   }
 180   &:hover {
 181     @include lightDark(background-color, #DDD, #222);
 182   }
 183 }
 184
 185
 186 label {
 187   @include lightDark(color, #666, #ddd);
 188   display: block;
 189   line-height: 1.4em;
 190   font-size: 0.94em;
 191   font-weight: 400;
 192   padding-bottom: 2px;
 193   margin-bottom: 0.2em;
 194   &.inline {
 195     display: inline-block;
 196   }
 197 }
 198
 199 label.radio, label.checkbox {
 200   font-weight: 400;
 201   user-select: none;
 202   input[type="radio"], input[type="checkbox"] {
 203     margin-inline-end: $-xs;
 204   }
 205 }
 206
 207 label.inline.checkbox {
 208   margin-inline-end: $-m;
 209 }
 210
 211 label + p.small {
 212   margin-bottom: 0.8em;
 213 }
 214
 215 table.form-table {
 216   max-width: 100%;
 217   td {
 218     overflow: hidden;
 219     padding: math.div($-xxs, 2) 0;
 220   }
 221 }
 222
 223 input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"],
 224 input[type="color"], input[type="password"], select, textarea {
 225   @extend .input-base;
 226 }
 227
 228 select {
 229   -webkit-appearance: none;
 230   -moz-appearance: none;
 231   appearance: none;
 232   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>");
 233   background-size: 10px 12px;
 234   background-position: calc(100% - 20px) 64%;
 235   background-repeat: no-repeat;
 236
 237   @include rtl {
 238     background-position: 20px 70%;
 239   }
 240 }
 241
 242 input[type=date] {
 243   width: 190px;
 244 }
 245
 246 input[type=color] {
 247   height: 60px;
 248   &.small {
 249     height: 42px;
 250     width: 60px;
 251     padding: 2px;
 252   }
 253 }
 254
 255 .toggle-switch {
 256   user-select: none;
 257   display: inline-grid;
 258   grid-template-columns: (16px + $-s) 1fr;
 259   align-items: center;
 260   margin: $-m 0;
 261   .custom-checkbox {
 262     width: 16px;
 263     height: 16px;
 264     border-radius: 2px;
 265     display: inline-block;
 266     border: 2px solid currentColor;
 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 }