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 label {
  26   display: block;
  27   line-height: 1.4em;
  28   font-size: 0.94em;
  29   font-weight: 500;
  30   color: #666;
  31   padding-bottom: 2px;
  32   margin-bottom: 0.2em;
  33   &.inline {
  34     display: inline-block;
  35   }
  36 }
  37
  38 label.radio, label.checkbox {
  39   font-weight: 400;
  40   input[type="radio"], input[type="checkbox"] {
  41     margin-right: $-xs;
  42   }
  43 }
  44
  45 label + p.small {
  46   margin-bottom: 0.8em;
  47 }
  48
  49 input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], select, textarea {
  50   @extend .input-base;
  51 }
  52
  53 .toggle-switch {
  54   display: inline-block;
  55   background-color: #BBB;
  56   width: 36px;
  57   height: 14px;
  58   border-radius: 7px;
  59   position: relative;
  60   transition: all ease-in-out 120ms;
  61   cursor: pointer;
  62   user-select: none;
  63   &:after {
  64     content: '';
  65     display: block;
  66     position: relative;
  67     left: 0;
  68     margin-top: -3px;
  69     width: 20px;
  70     height: 20px;
  71     border-radius: 50%;
  72     background-color: #fafafa;
  73     border: 1px solid #CCC;
  74     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);
  75     transition: all ease-in-out 120ms;
  76   }
  77   &.active {
  78     background-color: rgba($positive, 0.4);
  79     &:after {
  80       left: 16px;
  81       background-color: $positive;
  82       border: darken($positive, 20%);
  83     }
  84   }
  85 }
  86 .toggle-switch-checkbox {
  87   display: none;
  88 }
  89 input:checked + .toggle-switch {
  90   background-color: rgba($positive, 0.4);
  91   &:after {
  92     left: 16px;
  93     background-color: $positive;
  94     border: darken($positive, 20%);
  95   }
  96 }
  97
  98 .form-group {
  99   margin-bottom: $-s;
 100 }
 101
 102 .form-group {
 103   .text-pos, .text-neg {
 104     padding: $-xs 0;
 105   }
 106 }
 107
 108 .inline-input-style {
 109   border: 2px dotted #BBB;
 110   display: block;
 111   width: 100%;
 112   padding: $-xs $-s;
 113 }
 114
 115 .title-input .input {
 116   width: 100%;
 117 }
 118
 119 .title-input label, .description-input label{
 120   margin-top: $-m;
 121   color: #666;
 122 }
 123
 124 .title-input input[type="text"] {
 125   @extend h1;
 126   @extend .inline-input-style;
 127   margin-top: 0;
 128   padding-right: 0;
 129   width: 100%;
 130   color: #444;
 131 }
 132
 133 .title-input.page-title {
 134   font-size: 0.8em;
 135   .input {
 136     border: 0;
 137     margin-bottom: -1px;
 138   }
 139   input[type="text"] {
 140     max-width: 840px;
 141     margin: 0 auto;
 142     border: none;
 143   }
 144 }
 145
 146 .page-title input {
 147   display: block;
 148   width: 100%;
 149   font-size: 1.4em;
 150 }
 151
 152 .description-input textarea {
 153   @extend .inline-input-style;
 154   font-size: $fs-m;
 155   color: #666;
 156   width: 100%;
 157 }
 158
 159 .search-box {
 160   max-width: 100%;
 161   position: relative;
 162   button {
 163     background-color: transparent;
 164     border: none;
 165     color: $primary;
 166     padding: 0;
 167     margin: 0;
 168     cursor: pointer;
 169     margin-left: $-s;
 170   }
 171   button[type="submit"] {
 172     margin-left: -$-l;
 173   }
 174   input {
 175     padding-right: $-l;
 176     width: 300px;
 177     max-width: 100%;
 178   }
 179 }
 180
 181 #login-form label[for="remember"] {
 182   margin: 0;
 183 }
 184 #login-form label.toggle-switch {
 185   margin-left: $-xl;
 186 }