path: root/afm-client/bower_components/foundation-apps/scss/components/_forms.scss

/*
  FORMS
  -----

  Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components.

  Includes:
   - Text fields
   - Text areas
   - Select menus
   - Checkboxes and radio buttons
   - Range slider
   - Progress bars and meters
*/

/// @Foundation.settings
// Forms
// Basic form variables
$form-fontsize: 1rem !default;
$form-padding: 0.5rem !default;

// Text fields
$input-color: #000 !default;
$input-color-hover: $input-color !default;
$input-color-focus: $input-color !default;
$input-background: #fff !default;
$input-background-hover: $input-background !default;
$input-background-focus: $input-background !default;
$input-background-disabled: smartscale($input-background) !default;
$input-border: 1px solid #ccc !default;
$input-border-hover: 1px solid #bbb !default;
$input-border-focus: 1px solid #999 !default;
$input-cursor-disabled: not-allowed !default;

// Select menus
$select-color: #000 !default;
$select-background: #fafafa !default;
$select-background-hover: smartscale($select-background, 4%) !default;
$select-arrow: true !default;
$select-arrow-color: $select-color !default;

// Labels
$form-label-fontsize: 0.9rem !default;
$form-label-margin: 0.5rem !default;
$form-label-color: #333 !default;

// Inline labels
$inlinelabel-color: #333 !default;
$inlinelabel-background: #eee !default;
$inlinelabel-border: $input-border !default;

// Range slider
$slider-background: #ddd !default;
$slider-height: 1rem !default;
$slider-radius: 0px !default;
$slider-thumb-height: 1.5rem !default;
$slider-thumb-color: $primary-color !default;
$slider-thumb-radius: 0px !default;

// Progress and meter
$meter-height: 1.5rem !default;
$meter-background: #ccc !default;
$meter-fill: $primary-color !default;
$meter-fill-high: $success-color !default;
$meter-fill-medium: #e7cf00 !default;
$meter-fill-low: $alert-color !default;
$meter-radius: 0 !default;
///

// Disable OS-level styles
@mixin no-appearance {
  -webkit-appearance: none;
     -moz-appearance: none;
}

// Text fields
// - - - - - - - - - - - - - - - - - - - - - - - - -
#{$text-input-selectors} {
  $top-padding: get-side($form-padding, top);
  $bottom-padding: get-side($form-padding, bottom);
  $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;

  @include no-appearance;
  display: block;
  width: 100%;
  height: $height;
  padding: $form-padding;
  margin: 0 0 $global-padding 0;
  border: $input-border;
  border-radius: 0;
  background: $input-background;
  color: $input-color;
  font-size: $form-fontsize;
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;

  &:hover {
    border: $input-border-hover;
    background: $input-background-hover;
    color: $input-color-hover;
  }
  &:focus {
    outline: 0;
    border: $input-border-focus;
    background: $input-background-focus;
    color: $input-color-focus;
  }

  label > & {
    margin-top: $form-label-margin;
  }
}

// Override the content-box declaration set by Normalize
input[type="search"] {
  box-sizing: border-box;
}

// Disabled state
input {
  &.disabled,
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    cursor: $input-cursor-disabled;

    &, &:hover {
      background-color: $input-background-disabled;
    }
  }
}

// Labels
// - - - - - - - - - - - - - - - - - - - - - - - - -
label {
  display: block;
  font-size: $form-label-fontsize;
  margin-bottom: $form-label-margin;
  color: $form-label-color;

  > input, > textarea {
    margin-top: $form-label-margin;
  }
}

// Checkbox/radio buttons
// - - - - - - - - - - - - - - - - - - - - - - - - -
input[type="checkbox"], input[type="radio"] {
  width: 1rem;
  height: 1rem;

  // Input inside of a label
  label > & {
    margin-right: $form-padding * 0.5;
  }

  // Input next to a label
  & + label {
    display: inline-block;
    margin-left: $form-padding;
    margin-right: $form-padding * 2;
    margin-bottom: 0;
    vertical-align: baseline;
  }
}

// Inline labels
// Inline labels allow you to prefix or postfix special labels to inputs
// - - - - - - - - - - - - - - - - - - - - - - - - -
.inline-label {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  margin-bottom: $global-padding;

  // Imitates the top margin on normal inputs
  label > & {
    margin-top: $form-label-margin;
  }

  // Inputs stretch all the way out
  > input, > select {
    flex: 1;
    margin: 0;
  }

  // Inline labels and buttons shrink
  > .form-label {
    flex: 0 0 auto;
    background: $inlinelabel-background;
    color: $inlinelabel-color;
    border: $inlinelabel-border;
    padding: 0 $form-padding;
    display: flex;
    align-items: center;

    &:first-child { border-right: 0; }
    &:last-child  { border-left: 0; }
  }
  // Buttons also shrink
  > a,
  > button,
  > input[type="button"],
  > input[type="submit"] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    border-radius: 0;
  }
}

// Text areas
// - - - - - - - - - - - - - - - - - - - - - - - - -
textarea {
  height: auto;
  width: 100%;
  min-height: 50px;
}

// Select menus
// - - - - - - - - - - - - - - - - - - - - - - - - -
select {
  $top-padding: get-side($form-padding, top);
  $bottom-padding: get-side($form-padding, bottom);
  $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;
  $color: isitlight($select-background);

  @include no-appearance;
  display: block;
  width: 100%;
  height: $height;
  padding: $form-padding;
  margin: 0 0 $global-padding 0;
  font-size: $form-fontsize;
  color: $select-color;
  border-radius: 0;
  border: $input-border;

  @if $select-arrow {
    background: $select-background url(image-triangle($select-arrow-color)) right 10px center no-repeat;
    background-size: 8px 8px;
    padding-right: rem-calc(18px) + $form-padding;
  }
  @else {
    background-color: $select-background
  }

  &:hover {
    background-color: $select-background-hover;
  }

  &:focus {
    outline: 0;
  }

  // Remove the dropdown arrow added in IE10/11
  &::-ms-expand {
    display: none;
  }
}

// Range slider
// - - - - - - - - - - - - - - - - - - - - - - - - -
input[type="range"] {
  $margin: ($slider-thumb-height - $slider-height) / 2;

  @include no-appearance;
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  margin-top: $margin;
  margin-bottom: $margin;
  border: 0;
  line-height: 1;

  @if hasvalue($slider-radius) {
    border-radius: $slider-radius;
  }

  &:focus {
    outline: 0;
  }

  // Chrome/Safari
  &::-webkit-slider-runnable-track {
    height: $slider-height;
    background: $slider-background;
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: $slider-thumb-color;
    width: $slider-thumb-height;
    height: $slider-thumb-height;
    margin-top: -$margin;
    @if hasvalue($slider-thumb-radius) {
      border-radius: $slider-thumb-radius;
    }
  }
  // Firefox
  &::-moz-range-track {
    -moz-appearance: none;
    height: $slider-height;
    background: #ccc;
  }
  &::-moz-range-thumb {
    -moz-appearance: none;
    background: $slider-thumb-color;
    width: $slider-thumb-height;
    height: $slider-thumb-height;
    margin-top: -$margin;
    @if hasvalue($slider-thumb-radius) {
      border-radius: $slider-thumb-radius;
    }
  }
  // Internet Explorer
  &::-ms-track {
    height: $slider-height;
    background: $slider-background;
    color: transparent;
    border: 0;
    overflow: visible;
    border-top: $margin solid $body-background;
    border-bottom: $margin solid $body-background;
  }
  &::-ms-thumb {
    background: $slider-thumb-color;
    width: $slider-thumb-height;
    height: $slider-thumb-height;
    border: 0;
    @if hasvalue($slider-thumb-radius) {
      border-radius: $slider-thumb-radius;
    }
  }
  &::-ms-fill-lower, &::-ms-fill-upper {
    background: $slider-background;
  }
}
output {
  line-height: $slider-thumb-height;
  vertical-align: middle;
  margin-left: 0.5em;
}

// Number inputs
// - - - - - - - - - - - - - - - - - - - - - - - - -
input[type="number"] {
  &::-webkit-inner-spin-button {

  }
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    background: $primary-color;
  }
}

// Progress and meter
// - - - - - - - - - - - - - - - - - - - - - - - - -
progress, meter {
  @include no-appearance;
  display: block;
  width: 100%;
  height: $meter-height;
  margin-bottom: 1rem;

  @if hasvalue($meter-radius) {
    border-radius: $meter-radius;
  }

  // For Firefox
  background: $meter-background;
  border: 0;
}

progress {
  &::-webkit-progress-bar {
    background: $meter-background;
    @if hasvalue($meter-radius) {
      border-radius: $meter-radius;
    }
  }
  &::-webkit-progress-value {
    background: $meter-fill;
    @if hasvalue($meter-radius) {
      border-radius: $meter-radius;
    }
  }
  &::-moz-progress-bar {
    background: $meter-fill;
    @if hasvalue($meter-radius) {
      border-radius: $meter-radius;
    }
  }

  @each $name, $color in (high: $meter-fill-high, medium: $meter-fill-medium, low: $meter-fill-low) {
    &.#{$name} {
      &::-webkit-progress-value {
        background: $color;
      }
      &::-moz-progress-bar {
        background: $color;
      }
    }
  }
}
meter {
  // Chrome/Safari
  &::-webkit-meter-bar {
    background: $meter-background;
    @if hasvalue($meter-radius) {
      border-radius: $meter-radius;
    }
  }
  &::-webkit-meter-inner-element {
    @if hasvalue($meter-radius) {
      border-radius: $meter-radius;
    }
  }
  &::-webkit-meter-optimum-value {
    background: $meter-fill-high;
    @if hasvalue($meter-radius) {
      border-radius: $meter-radius;
    }
  }
  &::-webkit-meter-suboptimum-value {
    background: $meter-fill-medium;
    @if hasvalue($meter-radius) {
      border-radius: $meter-radius;
    }
  }
  &::-webkit-meter-even-less-good-value {
    background: $meter-fill-low;
    @if hasvalue($meter-radius) {
      border-radius: $meter-radius;
    }
  }

  // Firefox
  background: $meter-background;
  &::-moz-meter-bar {
    background: $primary-color;
    @if hasvalue($meter-radius) {
      border-radius: $meter-radius;
    }
  }
  &:-moz-meter-optimum::-moz-meter-bar {
    background: $meter-fill-high;
  }
  &:-moz-meter-sub-optimum::-moz-meter-bar {
    background: $meter-fill-medium;
  }
  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: $meter-fill-low;
  }
}