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