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