express_admin 1.7.5 → 1.7.7

data/vendor/gems/foundation_apps_styles/vendor/assets/stylesheets/components/_forms.scss

@@ -1,460 +0,0 @@
-/*
-  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;
-}
-
-@include exports(forms) {
-  // 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, textarea {
-    &.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;
-    }
-  }
-}