foundation-rails 6.1.2.0 → 6.2.0.0

data/vendor/assets/scss/components/_slider.scss

@@ -9,43 +9,11 @@
 /// @group slider
 ////
 
-/// Default height of the slider.
+/// Default slider width of a vertical slider. (Doesn't apply to the native slider.)
 /// @type Number
-$slider-height: 0.5rem !default;
+$slider-width-vertical: 0.5rem !default;
 
-/// Default slider width of a vertical slider.
-/// @type Number
-$slider-width-vertical: $slider-height !default;
-
-/// Default background color of the slider's track.
-/// @type Color
-$slider-background: $light-gray !default;
-
-/// Default color of the active fill color of the slider.
-/// @type Color
-$slider-fill-background: $medium-gray !default;
-
-/// Default height of the handle of the slider.
-/// @type Number
-$slider-handle-height: 1.4rem !default;
-
-/// Default width of the handle of the slider.
-/// @type Number
-$slider-handle-width: 1.4rem !default;
-
-/// Default color of the handle for the slider.
-/// @type Color
-$slider-handle-background: $primary-color !default;
-
-/// Default fade amount of a disabled slider.
-/// @type Number
-$slider-opacity-disabled: 0.25 !default;
-
-/// Default radius for slider.
-/// @type Number
-$slider-radius: $global-radius !default;
-
-/// Transition properties to apply to the slider handle and fill.
+/// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)
 /// @type Transition
 $slider-transition: all 0.2s ease-in-out !default;
 

data/vendor/assets/scss/components/_table.scss

@@ -223,4 +223,12 @@ $show-header-for-stacked: false !default;
   table.hover {
     @include table-hover;
   }
+
+  .table-scroll {
+    overflow-x: auto;
+
+    table {
+      width: auto;
+    }
+  }
 }

data/vendor/assets/scss/components/_tabs.scss

@@ -18,18 +18,14 @@ $tab-background: $white !default;
 /// @type Color
 $tab-background-active: $light-gray !default;
 
-/// Default border color of tab content.
-/// @type Color
-$tab-border: $light-gray !default;
-
-/// Default text color for items in a Menu.
-/// @type Color
-$tab-item-color: foreground($tab-background, $primary-color) !default;
+/// Font size of tab items.
+/// @type Number
+$tab-item-font-size: rem-calc(12) !default;
 
 /// Default background color on hover for items in a Menu.
 $tab-item-background-hover: $white !default;
 
-/// Default padding of a a tab item.
+/// Default padding of a tab item.
 /// @type Number
 $tab-item-padding: 1.25rem 1.5rem !default;
 
@@ -79,8 +75,7 @@ $tab-content-padding: 1rem !default;
     display: block;
     padding: $tab-item-padding;
     line-height: 1;
-    font-size: 12px;
-    color: $tab-item-color;
+    font-size: $tab-item-font-size;
 
     &:hover {
       background: $tab-item-background-hover;

data/vendor/assets/scss/components/_title-bar.scss

@@ -36,24 +36,45 @@ $titlebar-icon-spacing: 0.25rem !default;
 
 @mixin foundation-title-bar {
   .title-bar {
-    @include clearfix;
     background: $titlebar-background;
     color: $titlebar-color;
     padding: $titlebar-padding;
 
+    @if $global-flexbox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    @else {
+      @include clearfix;
+    }
+
     .menu-icon {
       margin-#{$global-left}: $titlebar-icon-spacing;
       margin-#{$global-right}: $titlebar-padding;
     }
   }
 
-  .title-bar-left {
-    float: left;
+  @if $global-flexbox {
+    // scss-lint:disable ZeroUnit
+    .title-bar-left,
+    .title-bar-right {
+      flex: 1 1 0px;
+    }
+
+    .title-bar-right {
+      text-align: right;
+    }
   }
+  @else {
+    .title-bar-left {
+      float: left;
+    }
 
-  .title-bar-right {
-    float: right;
-    text-align: right;
+    .title-bar-right {
+      float: right;
+      text-align: right;
+    }
   }
 
   .title-bar-title {
@@ -62,10 +83,6 @@ $titlebar-icon-spacing: 0.25rem !default;
     display: inline-block;
   }
 
-  .menu-icon {
-    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
-  }
-
   .menu-icon.dark {
     @include hamburger;
   }

data/vendor/assets/scss/components/_tooltip.scss

@@ -38,10 +38,6 @@ $tooltip-pip-width: 0.75rem !default;
 /// @type Number
 $tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
 
-/// Default pip offset for tooltips. This controls how far the pip is indented from the left edge of the tooltip.
-/// @type Number
-$tooltip-pip-offset: 1.25rem !default;
-
 /// Default radius for tooltips.
 /// @type Number
 $tooltip-radius: $global-radius !default;

data/vendor/assets/scss/components/_top-bar.scss

@@ -14,6 +14,10 @@ $topbar-padding: 0.5rem !default;
 /// @type Color
 $topbar-background: $light-gray !default;
 
+/// Background color submenus within the top bar. Usefull if $topbar-background is transparent.
+/// @type Color
+$topbar-submenu-background: $topbar-background !default;
+
 /// Spacing for the top bar title.
 /// @type Number
 $topbar-title-spacing: 1rem !default;
@@ -22,9 +26,22 @@ $topbar-title-spacing: 1rem !default;
 /// @type Number
 $topbar-input-width: 200px !default;
 
+/// Breakpoint at which top bar switches from mobile to desktop view.
+/// @type Breakpoint
+$topbar-unstack-breakpoint: medium !default;
+
 /// Adds styles for a top bar container.
 @mixin top-bar-container {
-  @include clearfix;
+  @if $global-flexbox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+  }
+  @else {
+    @include clearfix;
+  }
+
   padding: $topbar-padding;
 
   &,
@@ -32,30 +49,68 @@ $topbar-input-width: 200px !default;
     background-color: $topbar-background;
   }
 
+  // Check if $topbar-background is differnt from $topbar-background-submenu
+  @if ($topbar-background != $topbar-submenu-background) {
+    ul ul {
+      background-color: $topbar-submenu-background;
+    }
+  }
+
+  // Restrain width of inputs by default to make them easier to arrange
   input {
     width: $topbar-input-width;
     margin-#{$global-right}: 1rem;
   }
 
+  // The above styles shouldn't apply to input group fields
+  .input-group-field {
+    width: 100%;
+    margin-#{$global-right}: 0;
+  }
+
   // scss-lint:disable QualifyingElement
   input.button {
     width: auto;
   }
 }
 
-/// makes sections stacked
+/// Makes sections of a top bar stack on top of each other.
 @mixin top-bar-stacked {
-  // Sub-sections
-  .top-bar-title {
-    width: 100%;
+  @if $global-flexbox {
+    flex-wrap: wrap;
+
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
   }
-
-  .top-bar-right {
-    width: 100%;
+  @else {
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      width: 100%;
+    }
   }
+}
 
-  .top-bar-left {
-    width: 100%;
+/// Undoes the CSS applied by the `top-bar-stacked()` mixin.
+@mixin top-bar-unstack {
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+
+    // scss-lint:disable ZeroUnit
+    .top-bar-left,
+    .top-bar-right {
+      flex: 1 1 0px;
+    }
+  }
+  @else {
+    .top-bar-left,
+    .top-bar-right {
+      width: auto;
+    }
   }
 }
 
@@ -74,21 +129,38 @@ $topbar-input-width: 200px !default;
     }
   }
 
-  // Stack on small screens as default
-  @include breakpoint(small only) {
-    @include top-bar-stacked;
+  // Stack on small screens by default
+  @include top-bar-stacked;
+
+  @include breakpoint($topbar-unstack-breakpoint) {
+    @include top-bar-unstack;
   }
 
   // Sub-sections
-  .top-bar-title {
-    float: left;
-    margin-right: $topbar-title-spacing;
-  }
-  .top-bar-left {
-    float: left;
+  @if $global-flexbox {
+    .top-bar-title {
+      flex: 0 0 auto;
+      margin-right: $topbar-title-spacing;
+    }
+
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 auto;
+    }
   }
+  @else {
+    .top-bar-title {
+      float: left;
+      margin-right: $topbar-title-spacing;
+      
+    }
+
+    .top-bar-left {
+      float: left;
+    }
 
-  .top-bar-right {
-    float: right;
+    .top-bar-right {
+      float: right;
+    }
   }
 }

data/vendor/assets/scss/components/_visibility.scss

@@ -22,7 +22,7 @@
   // more often than not this will be correct, just one time round the loop it won't so set in scope here
   $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
   // test actual lower-bound-size, if 0 set it to 0em
-  @if $lower-bound-size == 0 {
+  @if strip-unit($lower-bound-size) == 0 {
     $lower-bound: -zf-bp-to-em($lower-bound-size);
   }
 

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

@@ -25,7 +25,7 @@
 
   // Styles for inputs inside labels
   label > [type='checkbox'],
-  label > [type='label'] {
+  label > [type='radio'] {
     margin-#{$global-right}: $form-spacing * 0.5;
   }
 

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: $alert-color !default;
+$input-background-invalid: map-get($foundation-palette, alert) !default;
 
 /// Color to use for labels of invalid inputs.
 /// @type Color
-$form-label-color-invalid: $alert-color !default;
+$form-label-color-invalid: map-get($foundation-palette, alert) !default;
 
 /// Default font color for form error text.
 /// @type Color
-$input-error-color: $alert-color !default;
+$input-error-color: map-get($foundation-palette, alert) !default;
 
 /// Default font size for form error text.
 /// @type Number
@@ -37,11 +37,13 @@ $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.
 @mixin form-input-error(
-  $background: $input-background-invalid
+  $background: $input-background-invalid,
+  $background-alpha: 0.1
 ) {
   &:not(:focus) {
-    background-color: rgba($background, 0.1);
+    background-color: rgba($background, $background-alpha);
     border-color: $background;
   }
 }

data/vendor/assets/scss/forms/_forms.scss

@@ -17,6 +17,9 @@ $form-spacing: rem-calc(16) !default;
 @import 'input-group';
 @import 'fieldset';
 @import 'select';
+@import 'range';
+@import 'progress';
+@import 'meter';
 @import 'error';
 
 @mixin foundation-forms {

data/vendor/assets/scss/forms/_help-text.scss

@@ -8,7 +8,7 @@
 
 /// Default color for help text.
 /// @type Color
-$helptext-color: #333 !default;
+$helptext-color: $black !default;
 
 /// Default font size for help text.
 /// @type Number

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

@@ -24,12 +24,15 @@ $input-prefix-padding: 1rem !default;
 @mixin foundation-form-prepostfix {
   $height: ($input-font-size + $form-spacing * 1.5);
 
-
   .input-group {
-    display: table;
+    display: if($global-flexbox, flex, table);
     width: 100%;
     margin-bottom: $form-spacing;
 
+    @if $global-flexbox {
+      align-items: stretch;
+    }
+
     > :first-child {
       border-radius: $global-radius 0 0 $global-radius;
     }
@@ -42,22 +45,33 @@ $input-prefix-padding: 1rem !default;
   }
 
   %input-group-child {
-    display: table-cell;
     margin: 0;
-    vertical-align: middle;
+
+    @if not $global-flexbox {
+      display: table-cell;
+      vertical-align: middle;
+    }
   }
 
   .input-group-label {
     @extend %input-group-child;
     text-align: center;
-    width: 1%;
-    height: 100%;
     padding: 0 $input-prefix-padding;
     background: $input-prefix-background;
     color: $input-prefix-color;
     border: $input-prefix-border;
     white-space: nowrap;
 
+    @if $global-flexbox {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+    }
+    @else {
+      width: 1%;
+      height: 100%;
+    }
+
     @if has-value($input-prefix-border) {
       &:first-child {
         border-#{$global-right}: 0;
@@ -72,16 +86,31 @@ $input-prefix-padding: 1rem !default;
   .input-group-field {
     @extend %input-group-child;
     border-radius: 0;
-    height: $height;
+
+    // scss-lint:disable ZeroUnit
+    @if $global-flexbox {
+      flex: 1 1 0px;
+      width: auto;
+      height: auto;
+    }
+    @else {
+      height: $height;
+    }
   }
 
   .input-group-button {
     @extend %input-group-child;
-    height: 100%;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    width: 1%;
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      height: 100%;
+      width: 1%;
+    }
 
     a,
     input,
@@ -89,4 +118,10 @@ $input-prefix-padding: 1rem !default;
       margin: 0;
     }
   }
+
+  // Specificity bump needed to prevent override by buttons
+  // scss-lint:disable QualifyingSelector
+  .input-group .input-group-button {
+    display: table-cell;
+  }
 }