afb-client/bower_components/foundation-apps/scss/components/_forms.scss

   1 /*
   2   FORMS
   3   -----
   4
   5   Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components.
   6
   7   Includes:
   8    - Text fields
   9    - Text areas
  10    - Select menus
  11    - Checkboxes and radio buttons
  12    - Range slider
  13    - Progress bars and meters
  14 */
  15
  16 /// @Foundation.settings
  17 // Forms
  18 // Basic form variables
  19 $form-fontsize: 1rem !default;
  20 $form-padding: 0.5rem !default;
  21
  22 // Text fields
  23 $input-color: #000 !default;
  24 $input-color-hover: $input-color !default;
  25 $input-color-focus: $input-color !default;
  26 $input-background: #fff !default;
  27 $input-background-hover: $input-background !default;
  28 $input-background-focus: $input-background !default;
  29 $input-background-disabled: smartscale($input-background) !default;
  30 $input-border: 1px solid #ccc !default;
  31 $input-border-hover: 1px solid #bbb !default;
  32 $input-border-focus: 1px solid #999 !default;
  33 $input-cursor-disabled: not-allowed !default;
  34
  35 // Select menus
  36 $select-color: #000 !default;
  37 $select-background: #fafafa !default;
  38 $select-background-hover: smartscale($select-background, 4%) !default;
  39 $select-arrow: true !default;
  40 $select-arrow-color: $select-color !default;
  41
  42 // Labels
  43 $form-label-fontsize: 0.9rem !default;
  44 $form-label-margin: 0.5rem !default;
  45 $form-label-color: #333 !default;
  46
  47 // Inline labels
  48 $inlinelabel-color: #333 !default;
  49 $inlinelabel-background: #eee !default;
  50 $inlinelabel-border: $input-border !default;
  51
  52 // Range slider
  53 $slider-background: #ddd !default;
  54 $slider-height: 1rem !default;
  55 $slider-radius: 0px !default;
  56 $slider-thumb-height: 1.5rem !default;
  57 $slider-thumb-color: $primary-color !default;
  58 $slider-thumb-radius: 0px !default;
  59
  60 // Progress and meter
  61 $meter-height: 1.5rem !default;
  62 $meter-background: #ccc !default;
  63 $meter-fill: $primary-color !default;
  64 $meter-fill-high: $success-color !default;
  65 $meter-fill-medium: #e7cf00 !default;
  66 $meter-fill-low: $alert-color !default;
  67 $meter-radius: 0 !default;
  68 ///
  69
  70 // Disable OS-level styles
  71 @mixin no-appearance {
  72   -webkit-appearance: none;
  73      -moz-appearance: none;
  74 }
  75
  76 // Text fields
  77 // - - - - - - - - - - - - - - - - - - - - - - - - -
  78 #{$text-input-selectors} {
  79   $top-padding: get-side($form-padding, top);
  80   $bottom-padding: get-side($form-padding, bottom);
  81   $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;
  82
  83   @include no-appearance;
  84   display: block;
  85   width: 100%;
  86   height: $height;
  87   padding: $form-padding;
  88   margin: 0 0 $global-padding 0;
  89   border: $input-border;
  90   border-radius: 0;
  91   background: $input-background;
  92   color: $input-color;
  93   font-size: $form-fontsize;
  94   -webkit-font-smoothing: antialiased;
  95   vertical-align: middle;
  96
  97   &:hover {
  98     border: $input-border-hover;
  99     background: $input-background-hover;
 100     color: $input-color-hover;
 101   }
 102   &:focus {
 103     outline: 0;
 104     border: $input-border-focus;
 105     background: $input-background-focus;
 106     color: $input-color-focus;
 107   }
 108
 109   label > & {
 110     margin-top: $form-label-margin;
 111   }
 112 }
 113
 114 // Override the content-box declaration set by Normalize
 115 input[type="search"] {
 116   box-sizing: border-box;
 117 }
 118
 119 // Disabled state
 120 input {
 121   &.disabled,
 122   &[disabled],
 123   &[readonly],
 124   fieldset[disabled] & {
 125     cursor: $input-cursor-disabled;
 126
 127     &, &:hover {
 128       background-color: $input-background-disabled;
 129     }
 130   }
 131 }
 132
 133 // Labels
 134 // - - - - - - - - - - - - - - - - - - - - - - - - -
 135 label {
 136   display: block;
 137   font-size: $form-label-fontsize;
 138   margin-bottom: $form-label-margin;
 139   color: $form-label-color;
 140
 141   > input, > textarea {
 142     margin-top: $form-label-margin;
 143   }
 144 }
 145
 146 // Checkbox/radio buttons
 147 // - - - - - - - - - - - - - - - - - - - - - - - - -
 148 input[type="checkbox"], input[type="radio"] {
 149   width: 1rem;
 150   height: 1rem;
 151
 152   // Input inside of a label
 153   label > & {
 154     margin-right: $form-padding * 0.5;
 155   }
 156
 157   // Input next to a label
 158   & + label {
 159     display: inline-block;
 160     margin-left: $form-padding;
 161     margin-right: $form-padding * 2;
 162     margin-bottom: 0;
 163     vertical-align: baseline;
 164   }
 165 }
 166
 167 // Inline labels
 168 // Inline labels allow you to prefix or postfix special labels to inputs
 169 // - - - - - - - - - - - - - - - - - - - - - - - - -
 170 .inline-label {
 171   display: flex;
 172   flex-flow: row nowrap;
 173   align-items: stretch;
 174   margin-bottom: $global-padding;
 175
 176   // Imitates the top margin on normal inputs
 177   label > & {
 178     margin-top: $form-label-margin;
 179   }
 180
 181   // Inputs stretch all the way out
 182   > input, > select {
 183     flex: 1;
 184     margin: 0;
 185   }
 186
 187   // Inline labels and buttons shrink
 188   > .form-label {
 189     flex: 0 0 auto;
 190     background: $inlinelabel-background;
 191     color: $inlinelabel-color;
 192     border: $inlinelabel-border;
 193     padding: 0 $form-padding;
 194     display: flex;
 195     align-items: center;
 196
 197     &:first-child { border-right: 0; }
 198     &:last-child  { border-left: 0; }
 199   }
 200   // Buttons also shrink
 201   > a,
 202   > button,
 203   > input[type="button"],
 204   > input[type="submit"] {
 205     flex: 0 0 auto;
 206     display: flex;
 207     align-items: center;
 208     padding-top: 0;
 209     padding-bottom: 0;
 210     margin: 0;
 211     border-radius: 0;
 212   }
 213 }
 214
 215 // Text areas
 216 // - - - - - - - - - - - - - - - - - - - - - - - - -
 217 textarea {
 218   height: auto;
 219   width: 100%;
 220   min-height: 50px;
 221 }
 222
 223 // Select menus
 224 // - - - - - - - - - - - - - - - - - - - - - - - - -
 225 select {
 226   $top-padding: get-side($form-padding, top);
 227   $bottom-padding: get-side($form-padding, bottom);
 228   $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;
 229   $color: isitlight($select-background);
 230
 231   @include no-appearance;
 232   display: block;
 233   width: 100%;
 234   height: $height;
 235   padding: $form-padding;
 236   margin: 0 0 $global-padding 0;
 237   font-size: $form-fontsize;
 238   color: $select-color;
 239   border-radius: 0;
 240   border: $input-border;
 241
 242   @if $select-arrow {
 243     background: $select-background url(image-triangle($select-arrow-color)) right 10px center no-repeat;
 244     background-size: 8px 8px;
 245     padding-right: rem-calc(18px) + $form-padding;
 246   }
 247   @else {
 248     background-color: $select-background
 249   }
 250
 251   &:hover {
 252     background-color: $select-background-hover;
 253   }
 254
 255   &:focus {
 256     outline: 0;
 257   }
 258
 259   // Remove the dropdown arrow added in IE10/11
 260   &::-ms-expand {
 261     display: none;
 262   }
 263 }
 264
 265 // Range slider
 266 // - - - - - - - - - - - - - - - - - - - - - - - - -
 267 input[type="range"] {
 268   $margin: ($slider-thumb-height - $slider-height) / 2;
 269
 270   @include no-appearance;
 271   display: block;
 272   width: 100%;
 273   height: auto;
 274   cursor: pointer;
 275   margin-top: $margin;
 276   margin-bottom: $margin;
 277   border: 0;
 278   line-height: 1;
 279
 280   @if hasvalue($slider-radius) {
 281     border-radius: $slider-radius;
 282   }
 283
 284   &:focus {
 285     outline: 0;
 286   }
 287
 288   // Chrome/Safari
 289   &::-webkit-slider-runnable-track {
 290     height: $slider-height;
 291     background: $slider-background;
 292   }
 293   &::-webkit-slider-thumb {
 294     -webkit-appearance: none;
 295     background: $slider-thumb-color;
 296     width: $slider-thumb-height;
 297     height: $slider-thumb-height;
 298     margin-top: -$margin;
 299     @if hasvalue($slider-thumb-radius) {
 300       border-radius: $slider-thumb-radius;
 301     }
 302   }
 303   // Firefox
 304   &::-moz-range-track {
 305     -moz-appearance: none;
 306     height: $slider-height;
 307     background: #ccc;
 308   }
 309   &::-moz-range-thumb {
 310     -moz-appearance: none;
 311     background: $slider-thumb-color;
 312     width: $slider-thumb-height;
 313     height: $slider-thumb-height;
 314     margin-top: -$margin;
 315     @if hasvalue($slider-thumb-radius) {
 316       border-radius: $slider-thumb-radius;
 317     }
 318   }
 319   // Internet Explorer
 320   &::-ms-track {
 321     height: $slider-height;
 322     background: $slider-background;
 323     color: transparent;
 324     border: 0;
 325     overflow: visible;
 326     border-top: $margin solid $body-background;
 327     border-bottom: $margin solid $body-background;
 328   }
 329   &::-ms-thumb {
 330     background: $slider-thumb-color;
 331     width: $slider-thumb-height;
 332     height: $slider-thumb-height;
 333     border: 0;
 334     @if hasvalue($slider-thumb-radius) {
 335       border-radius: $slider-thumb-radius;
 336     }
 337   }
 338   &::-ms-fill-lower, &::-ms-fill-upper {
 339     background: $slider-background;
 340   }
 341 }
 342 output {
 343   line-height: $slider-thumb-height;
 344   vertical-align: middle;
 345   margin-left: 0.5em;
 346 }
 347
 348 // Number inputs
 349 // - - - - - - - - - - - - - - - - - - - - - - - - -
 350 input[type="number"] {
 351   &::-webkit-inner-spin-button {
 352
 353   }
 354   &::-webkit-outer-spin-button {
 355     -webkit-appearance: none;
 356     background: $primary-color;
 357   }
 358 }
 359
 360 // Progress and meter
 361 // - - - - - - - - - - - - - - - - - - - - - - - - -
 362 progress, meter {
 363   @include no-appearance;
 364   display: block;
 365   width: 100%;
 366   height: $meter-height;
 367   margin-bottom: 1rem;
 368
 369   @if hasvalue($meter-radius) {
 370     border-radius: $meter-radius;
 371   }
 372
 373   // For Firefox
 374   background: $meter-background;
 375   border: 0;
 376 }
 377
 378 progress {
 379   &::-webkit-progress-bar {
 380     background: $meter-background;
 381     @if hasvalue($meter-radius) {
 382       border-radius: $meter-radius;
 383     }
 384   }
 385   &::-webkit-progress-value {
 386     background: $meter-fill;
 387     @if hasvalue($meter-radius) {
 388       border-radius: $meter-radius;
 389     }
 390   }
 391   &::-moz-progress-bar {
 392     background: $meter-fill;
 393     @if hasvalue($meter-radius) {
 394       border-radius: $meter-radius;
 395     }
 396   }
 397
 398   @each $name, $color in (high: $meter-fill-high, medium: $meter-fill-medium, low: $meter-fill-low) {
 399     &.#{$name} {
 400       &::-webkit-progress-value {
 401         background: $color;
 402       }
 403       &::-moz-progress-bar {
 404         background: $color;
 405       }
 406     }
 407   }
 408 }
 409 meter {
 410   // Chrome/Safari
 411   &::-webkit-meter-bar {
 412     background: $meter-background;
 413     @if hasvalue($meter-radius) {
 414       border-radius: $meter-radius;
 415     }
 416   }
 417   &::-webkit-meter-inner-element {
 418     @if hasvalue($meter-radius) {
 419       border-radius: $meter-radius;
 420     }
 421   }
 422   &::-webkit-meter-optimum-value {
 423     background: $meter-fill-high;
 424     @if hasvalue($meter-radius) {
 425       border-radius: $meter-radius;
 426     }
 427   }
 428   &::-webkit-meter-suboptimum-value {
 429     background: $meter-fill-medium;
 430     @if hasvalue($meter-radius) {
 431       border-radius: $meter-radius;
 432     }
 433   }
 434   &::-webkit-meter-even-less-good-value {
 435     background: $meter-fill-low;
 436     @if hasvalue($meter-radius) {
 437       border-radius: $meter-radius;
 438     }
 439   }
 440
 441   // Firefox
 442   background: $meter-background;
 443   &::-moz-meter-bar {
 444     background: $primary-color;
 445     @if hasvalue($meter-radius) {
 446       border-radius: $meter-radius;
 447     }
 448   }
 449   &:-moz-meter-optimum::-moz-meter-bar {
 450     background: $meter-fill-high;
 451   }
 452   &:-moz-meter-sub-optimum::-moz-meter-bar {
 453     background: $meter-fill-medium;
 454   }
 455   &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
 456     background: $meter-fill-low;
 457   }
 458 }