BookStack Code Mirror - bookstack/blob - resources/sass/_forms.scss

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