foundation-rails 6.2.4.0 → 6.3.0.0

data/vendor/assets/scss/forms/_checkbox.scss

@@ -17,10 +17,11 @@
   [type='checkbox'] + label,
   [type='radio'] + label {
     display: inline-block;
+    vertical-align: baseline;
+
     margin-#{$global-left}: $form-spacing * 0.5;
     margin-#{$global-right}: $form-spacing;
     margin-bottom: 0;
-    vertical-align: baseline;
 
     &[for] {
       cursor: pointer;

data/vendor/assets/scss/forms/_error.scss

@@ -16,15 +16,15 @@ $abide-labels: true !default;
 
 /// Background color to use for invalid text inputs.
 /// @type Color
-$input-background-invalid: map-get($foundation-palette, alert) !default;
+$input-background-invalid: get-color(alert) !default;
 
 /// Color to use for labels of invalid inputs.
 /// @type Color
-$form-label-color-invalid: map-get($foundation-palette, alert) !default;
+$form-label-color-invalid: get-color(alert) !default;
 
 /// Default font color for form error text.
 /// @type Color
-$input-error-color: map-get($foundation-palette, alert) !default;
+$input-error-color: get-color(alert) !default;
 
 /// Default font size for form error text.
 /// @type Number
@@ -37,14 +37,17 @@ $input-error-font-weight: $global-weight-bold !default;
 /// Styles the background and border of an input field to have an error state.
 ///
 /// @param {Color} $background [$alert-color] - Color to use for the background and border.
-/// @param {Number} $background-alpha [0.1] - Transparency level of the background color.
+/// @param {Number} $background-lighten [10%] - Lightness level of the background color.
 @mixin form-input-error(
   $background: $input-background-invalid,
-  $background-alpha: 0.1
+  $background-lighten: 10%
 ) {
   &:not(:focus) {
-    background-color: rgba($background, $background-alpha);
     border-color: $background;
+    background-color: mix($background, $white, $background-lighten);
+    &::placeholder {
+      color: $background;
+    }
   }
 }
 
@@ -53,6 +56,7 @@ $input-error-font-weight: $global-weight-bold !default;
   display: none;
   margin-top: $form-spacing * -0.5;
   margin-bottom: $form-spacing;
+
   font-size: $input-error-font-size;
   font-weight: $input-error-font-weight;
   color: $input-error-color;

data/vendor/assets/scss/forms/_fieldset.scss

@@ -23,29 +23,29 @@ $fieldset-margin: rem-calc(18 0) !default;
 $legend-padding: rem-calc(0 3) !default;
 
 @mixin fieldset {
-  border: $fieldset-border;
-  padding: $fieldset-padding;
   margin: $fieldset-margin;
+  padding: $fieldset-padding;
+  border: $fieldset-border;
 
   legend {
     // Covers up the fieldset's border to create artificial padding
-    background: $body-background;
-    padding: $legend-padding;
     margin: 0;
     margin-#{$global-left}: rem-calc(-3);
+    padding: $legend-padding;
+    background: $body-background;
   }
 }
 
 @mixin foundation-form-fieldset {
   fieldset {
-    border: 0;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    border: 0;
   }
 
   legend {
-    margin-bottom: $form-spacing * 0.5;
     max-width: 100%;
+    margin-bottom: $form-spacing * 0.5;
   }
 
   .fieldset {

data/vendor/assets/scss/forms/_input-group.scss

@@ -34,12 +34,12 @@ $input-prefix-padding: 1rem !default;
     }
 
     > :first-child {
-      border-radius: if($global-text-direction == rtl, 0 $global-radius $global-radius 0, $global-radius 0 0 $global-radius);
+      border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
     }
 
     > :last-child {
       > * {
-        border-radius: if($global-text-direction == rtl, $global-radius 0 0 $global-radius, 0 $global-radius $global-radius 0);
+        border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);
       }
     }
   }
@@ -56,16 +56,17 @@ $input-prefix-padding: 1rem !default;
 
   .input-group-label {
     @extend %input-group-child;
-    text-align: center;
     padding: 0 $input-prefix-padding;
+    border: $input-prefix-border;
     background: $input-prefix-background;
+
     color: $input-prefix-color;
-    border: $input-prefix-border;
+    text-align: center;
     white-space: nowrap;
 
     @if $global-flexbox {
-      flex: 0 0 auto;
       display: flex;
+      flex: 0 0 auto;
       align-items: center;
     }
     @else {
@@ -88,10 +89,10 @@ $input-prefix-padding: 1rem !default;
     @extend %input-group-child;
     border-radius: 0;
 
-    // scss-lint:disable ZeroUnit
     @if $global-flexbox {
-      flex: 1 1 0px;
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
       height: auto;
+      min-width: 0;
     }
     @else {
       height: $height;
@@ -108,19 +109,24 @@ $input-prefix-padding: 1rem !default;
       flex: 0 0 auto;
     }
     @else {
-      height: 100%;
       width: 1%;
+      height: 100%;
     }
 
     a,
     input,
-    button {
-      margin: 0;
+    button,
+    label {
+      @extend %input-group-child;
+      height: $height;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      font-size: $input-font-size;
     }
   }
 
   // Specificity bump needed to prevent override by buttons
-  // scss-lint:disable QualifyingSelector
   @if not $global-flexbox {
       .input-group .input-group-button {
           display: table-cell;

data/vendor/assets/scss/forms/_label.scss

@@ -25,6 +25,7 @@ $form-label-line-height: 1.8 !default;
 @mixin form-label {
   display: block;
   margin: 0;
+
   font-size: $form-label-font-size;
   font-weight: $form-label-font-weight;
   line-height: $form-label-line-height;
@@ -33,6 +34,7 @@ $form-label-line-height: 1.8 !default;
 
 @mixin form-label-middle {
   $input-border-width: get-border-value($input-border, width);
+
   margin: 0 0 $form-spacing;
   padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
 }

data/vendor/assets/scss/forms/_meter.scss

@@ -32,30 +32,29 @@ $meter-fill-bad: $alert-color !default;
 
 @mixin foundation-meter-element {
   meter {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     display: block;
     width: 100%;
     height: $meter-height;
     margin-bottom: 1rem;
 
+    appearance: none;
+
     @if has-value($meter-radius) {
       border-radius: $meter-radius;
     }
 
     // For Firefox
-    background: $meter-background;
     border: 0;
+    background: $meter-background;
 
     // Chrome/Safari/Edge
     &::-webkit-meter-bar {
-      background: $meter-background;
-
+      border: 0;
       @if has-value($meter-radius) {
         border-radius: $meter-radius;
       }
-      
-      border: 0;
+
+      background: $meter-background;
     }
 
     &::-webkit-meter-inner-element {
@@ -96,15 +95,15 @@ $meter-fill-bad: $alert-color !default;
       }
     }
 
-    &:-moz-meter-optimum::-moz-meter-bar {
+    &:-moz-meter-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
       background: $meter-fill-good;
     }
 
-    &:-moz-meter-sub-optimum::-moz-meter-bar {
+    &:-moz-meter-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
       background: $meter-fill-medium;
     }
 
-    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    &:-moz-meter-sub-sub-optimum::-moz-meter-bar { // sass-lint:disable-line force-pseudo-nesting
       background: $meter-fill-bad;
     }
   }

data/vendor/assets/scss/forms/_progress.scss

@@ -28,20 +28,20 @@ $progress-radius: $global-radius !default;
 
 @mixin foundation-progress-element {
   progress {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     display: block;
     width: 100%;
     height: $progress-height;
     margin-bottom: $progress-margin-bottom;
 
+    appearance: none;
+
     @if hasvalue($progress-radius) {
       border-radius: $progress-radius;
     }
 
     // For Firefox
-    background: $progress-background;
     border: 0;
+    background: $progress-background;
 
     &::-webkit-progress-bar {
       background: $progress-background;
@@ -81,14 +81,14 @@ $progress-radius: $global-radius !default;
         }
       }
     }
-    
-    // For IE and Edge  
-    &::-ms-fill{
+
+    // For IE and Edge
+    &::-ms-fill {
       @if hasvalue($progress-radius) {
-        border-radius: $progress-radius;  
+        border-radius: $progress-radius;
       }
 
-      border: 0;     
-    } 
+      border: 0;
+    }
   }
 }

data/vendor/assets/scss/forms/_range.scss

@@ -39,20 +39,19 @@ $slider-opacity-disabled: 0.25 !default;
 $slider-radius: $global-radius !default;
 
 @mixin foundation-range-input {
-  // scss-lint:disable QualifyingElement
-  input[type="range"] {
+  input[type="range"] {  // sass-lint:disable-line no-qualifying-elements
     $margin: ($slider-handle-height - $slider-height) / 2;
 
-    -webkit-appearance: none;
-    -moz-appearance: none;
     display: block;
     width: 100%;
     height: auto;
-    cursor: pointer;
     margin-top: $margin;
     margin-bottom: $margin;
+
+    appearance: none;
     border: 0;
     line-height: 1;
+    cursor: pointer;
 
     @if has-value($slider-radius) {
       border-radius: $slider-radius;
@@ -66,6 +65,8 @@ $slider-radius: $global-radius !default;
       opacity: $slider-opacity-disabled;
     }
 
+    // sass-lint:disable no-vendor-prefix
+
     // Chrome/Safari
     &::-webkit-slider-runnable-track {
       height: $slider-height;
@@ -73,12 +74,13 @@ $slider-radius: $global-radius !default;
     }
 
     &::-webkit-slider-handle {
-      -webkit-appearance: none;
-      background: $slider-handle-background;
       width: $slider-handle-width;
       height: $slider-handle-height;
       margin-top: -$margin;
 
+      -webkit-appearance: none;
+      background: $slider-handle-background;
+
       @if has-value($slider-radius) {
         border-radius: $slider-radius;
       }
@@ -86,18 +88,19 @@ $slider-radius: $global-radius !default;
 
     // Firefox
     &::-moz-range-track {
-      -moz-appearance: none;
       height: $slider-height;
+      -moz-appearance: none;
       background: $slider-background;
     }
 
     &::-moz-range-thumb {
-      -moz-appearance: none;
-      background: $slider-handle-background;
       width: $slider-handle-width;
       height: $slider-handle-height;
       margin-top: -$margin;
 
+      -moz-appearance: none;
+      background: $slider-handle-background;
+
       @if has-value($slider-radius) {
         border-radius: $slider-radius;
       }
@@ -106,19 +109,21 @@ $slider-radius: $global-radius !default;
     // 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;
+      background: $slider-background;
+
+      overflow: visible;
+      color: transparent;
     }
 
     &::-ms-thumb {
-      background: $slider-handle-background;
       width: $slider-handle-width;
       height: $slider-handle-height;
       border: 0;
+      background: $slider-handle-background;
 
       @if has-value($slider-radius) {
         border-radius: $slider-radius;
@@ -135,9 +140,9 @@ $slider-radius: $global-radius !default;
 
     @at-root {
       output {
-        line-height: $slider-handle-height;
         vertical-align: middle;
         margin-left: 0.5em;
+        line-height: $slider-handle-height;
       }
     }
   }

data/vendor/assets/scss/forms/_select.scss

@@ -22,27 +22,45 @@ $select-radius: $global-radius !default;
   $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
 
   height: $height;
+  margin: 0 0 $form-spacing;
   padding: ($form-spacing / 2);
+
+  appearance: none;
   border: $input-border;
-  margin: 0 0 $form-spacing;
-  font-size: $input-font-size;
+  border-radius: $select-radius;
+  background-color: $select-background;
+
   font-family: $input-font-family;
+  font-size: $input-font-size;
   line-height: normal;
   color: $input-color;
-  background-color: $select-background;
-  border-radius: $select-radius;
-  -webkit-appearance: none;
-  -moz-appearance: none;
 
   @if $select-triangle-color != transparent {
     @include background-triangle($select-triangle-color);
-    background-size: 9px 6px;
-    background-position: $global-right (-$form-spacing) center;
     background-origin: content-box;
+    background-position: $global-right (-$form-spacing) center;
     background-repeat: no-repeat;
+    background-size: 9px 6px;
+
     padding-#{$global-right}: ($form-spacing * 1.5);
   }
 
+  @if has-value($input-transition) {
+    transition: $input-transition;
+  }
+
+  // Focus state
+  &:focus {
+    outline: none;
+    border: $input-border-focus;
+    background-color: $input-background-focus;
+    box-shadow: $input-shadow-focus;
+
+    @if has-value($input-transition) {
+      transition: $input-transition;
+    }
+  }
+
   // Disabled state
   &:disabled {
     background-color: $input-background-disabled;