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

   1
   2 .input-base {
   3   background-color: #FFF;
   4   border-radius: 3px;
   5   border: 1px solid #CCC;
   6   display: inline-block;
   7   font-size: $fs-s;
   8   font-family: $text;
   9   padding: $-xs;
  10   color: #222;
  11   width: 250px;
  12   max-width: 100%;
  13   //-webkit-appearance:none;
  14   &.neg, &.invalid {
  15     border: 1px solid $negative;
  16   }
  17   &.pos, &.valid {
  18     border: 1px solid $positive;
  19   }
  20   &.disabled, &[disabled] {
  21     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
  22   }
  23   &:focus {
  24     outline: 0;
  25   }
  26 }
  27
  28 #html-editor {
  29   display: none;
  30 }
  31
  32 #markdown-editor {
  33   position: relative;
  34   z-index: 5;
  35   #markdown-editor-input {
  36     font-family: 'Roboto Mono', monospace;
  37     font-style: normal;
  38     font-weight: 400;
  39     padding: $-xs $-m;
  40     color: #444;
  41     border-radius: 0;
  42     max-height: 100%;
  43     flex: 1;
  44     border: 0;
  45     width: 100%;
  46     &:focus {
  47       outline: 0;
  48     }
  49   }
  50   .markdown-display, .markdown-editor-wrap {
  51     flex: 1;
  52     position: relative;
  53   }
  54   .markdown-editor-wrap {
  55     display: flex;
  56     flex-direction: column;
  57     border: 1px solid #DDD;
  58     width: 50%;
  59   }
  60   .markdown-display {
  61     padding: 0 $-m 0;
  62     margin-left: -1px;
  63     overflow-y: scroll;
  64     .page-content {
  65       margin: 0 auto;
  66     }
  67   }
  68 }
  69 .editor-toolbar {
  70   width: 100%;
  71   padding: $-xs $-m;
  72   font-family: 'Roboto Mono', monospace;
  73   font-size: 11px;
  74   line-height: 1.6;
  75   border-bottom: 1px solid #DDD;
  76   background-color: #EEE;
  77   flex: none;
  78   &:after {
  79     content: '';
  80     display: block;
  81     clear: both;
  82   }
  83 }
  84
  85
  86 label {
  87   display: block;
  88   line-height: 1.4em;
  89   font-size: 0.94em;
  90   font-weight: 500;
  91   color: #666;
  92   padding-bottom: 2px;
  93   margin-bottom: 0.2em;
  94   &.inline {
  95     display: inline-block;
  96   }
  97 }
  98
  99 label.radio, label.checkbox {
 100   font-weight: 400;
 101   user-select: none;
 102   input[type="radio"], input[type="checkbox"] {
 103     margin-right: $-xs;
 104   }
 105 }
 106
 107 label.inline.checkbox {
 108   margin-right: $-m;
 109 }
 110
 111 label + p.small {
 112   margin-bottom: 0.8em;
 113 }
 114
 115 table.form-table {
 116   max-width: 100%;
 117   td {
 118     overflow: hidden;
 119     padding: $-xxs/2 0;
 120   }
 121 }
 122
 123 input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="search"], input[type="url"], input[type="password"], select, textarea {
 124   @extend .input-base;
 125 }
 126
 127 input[type=date] {
 128   width: 190px;
 129 }
 130
 131 .toggle-switch {
 132   display: inline-block;
 133   background-color: #BBB;
 134   width: 36px;
 135   height: 14px;
 136   border-radius: 7px;
 137   position: relative;
 138   transition: all ease-in-out 120ms;
 139   cursor: pointer;
 140   user-select: none;
 141   &:after {
 142     content: '';
 143     display: block;
 144     position: relative;
 145     left: 0;
 146     margin-top: -3px;
 147     width: 20px;
 148     height: 20px;
 149     border-radius: 50%;
 150     background-color: #fafafa;
 151     border: 1px solid #CCC;
 152     box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
 153     transition: all ease-in-out 120ms;
 154   }
 155   &.active {
 156     background-color: rgba($positive, 0.4);
 157     &:after {
 158       left: 16px;
 159       background-color: $positive;
 160       border: darken($positive, 20%);
 161     }
 162   }
 163 }
 164 .toggle-switch-checkbox {
 165   display: none;
 166 }
 167 input:checked + .toggle-switch {
 168   background-color: rgba($positive, 0.4);
 169   &:after {
 170     left: 16px;
 171     background-color: $positive;
 172     border: darken($positive, 20%);
 173   }
 174 }
 175
 176 .form-group {
 177   margin-bottom: $-s;
 178   textarea {
 179     display: block;
 180     width: 100%;
 181     min-height: 64px;
 182   }
 183 }
 184
 185 .form-group {
 186   .text-pos, .text-neg {
 187     padding: $-xs 0;
 188   }
 189 }
 190
 191 .inline-input-style {
 192   border: 2px dotted #BBB;
 193   display: block;
 194   width: 100%;
 195   padding: $-xs $-s;
 196 }
 197
 198 .title-input .input {
 199   width: 100%;
 200 }
 201
 202 .title-input label, .description-input label{
 203   margin-top: $-m;
 204   color: #666;
 205 }
 206
 207 .title-input input[type="text"] {
 208   @extend h1;
 209   @extend .inline-input-style;
 210   margin-top: 0;
 211   padding-right: 0;
 212   width: 100%;
 213   color: #444;
 214 }
 215
 216 .title-input.page-title {
 217   font-size: 0.8em;
 218   .input {
 219     border: 0;
 220     margin-bottom: -1px;
 221   }
 222   input[type="text"] {
 223     max-width: 840px;
 224     margin: 0 auto;
 225     border: none;
 226   }
 227 }
 228
 229 .page-title input {
 230   display: block;
 231   width: 100%;
 232   font-size: 1.4em;
 233 }
 234
 235 .description-input textarea {
 236   @extend .inline-input-style;
 237   font-size: $fs-m;
 238   color: #666;
 239   width: 100%;
 240 }
 241
 242 div[editor-type="markdown"] .title-input.page-title input[type="text"] {
 243   max-width: 100%;
 244 }
 245
 246 .search-box {
 247   max-width: 100%;
 248   position: relative;
 249   button {
 250     background-color: transparent;
 251     border: none;
 252     color: $primary;
 253     padding: 0;
 254     margin: 0;
 255     cursor: pointer;
 256     margin-left: $-s;
 257   }
 258   button[type="submit"] {
 259     margin-left: -$-l;
 260   }
 261   input {
 262     padding-right: $-l;
 263     width: 300px;
 264     max-width: 100%;
 265   }
 266 }
 267
 268 .outline > input {
 269   border: 0;
 270   border-bottom: 2px solid #DDD;
 271   border-radius: 0;
 272   &:focus, &:active {
 273     border: 0;
 274     border-bottom: 2px solid #AAA;
 275     outline: 0;
 276   }
 277 }
 278
 279 #login-form label[for="remember"] {
 280   margin: 0;
 281 }
 282 #login-form label.toggle-switch {
 283   margin-left: $-xl;
 284 }
 285
 286 .image-picker img {
 287   background-color: #BBB;
 288 }