foundation-rails 6.1.2.0 → 6.2.0.0

data/vendor/assets/scss/_global.scss

@@ -20,25 +20,15 @@ $global-width: rem-calc(1200) !default;
 /// @type Number
 $global-lineheight: 1.5 !default;
 
-/// Primary color for interactive components like links and buttons.
-/// @type Color
-$primary-color: #2199e8 !default;
-
-/// Secondary color, used with components that support the `.secondary` class.
-/// @type Color
-$secondary-color: #777 !default;
-
-/// Color to indicate a positive status or action, used with the `.success` class.
-/// @type Color
-$success-color: #3adb76 !default;
-
-/// Color to indicate a caution status or action, used with the `.warning` class.
-/// @type Color
-$warning-color: #ffae00 !default;
-
-/// Color to indicate a negative status or action, used with the `.alert` class.
-/// @type Color
-$alert-color: #ec5840 !default;
+/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
+/// @type Map
+$foundation-palette: (
+  primary: #2199e8,
+  secondary: #777,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #ec5840,
+) !default;
 
 /// Color used for light gray UI items.
 /// @type Color
@@ -97,20 +87,31 @@ $global-weight-bold: bold !default;
 $global-radius: 0 !default;
 
 /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
+/// @type Keyword
 $global-text-direction: ltr !default;
 
+/// Enables flexbox for components that support it.
+/// @type Boolean
+$global-flexbox: false !default;
+
+@if not map-has-key($foundation-palette, primary) {
+  @error 'In $foundation-palette, you must have a color named "primary".';
+}
+
 // Internal variables used for text direction
 $global-left: if($global-text-direction == rtl, right, left);
 $global-right: if($global-text-direction == rtl, left, right);
 
-// Internal map used to iterate through colors, to generate CSS classes with less code
-$foundation-colors: (
-  primary: $primary-color,
-  secondary: $secondary-color,
-  success: $success-color,
-  alert: $alert-color,
-  warning: $warning-color,
-) !default;
+// Internal variables used for colors
+$primary-color: map-get($foundation-palette, primary);
+$secondary-color: map-get($foundation-palette, secondary);
+$success-color: map-get($foundation-palette, success);
+$warning-color: map-get($foundation-palette, warning);
+$alert-color: map-get($foundation-palette, alert);
+
+// Remove this in 6.3
+$-zf-menu-icon-imported: false;
+$-zf-flex-classes-imported: false;
 
 @mixin foundation-global-styles {
   @include -zf-normalize;

data/vendor/assets/scss/components/_badge.scss

@@ -43,7 +43,7 @@ $badge-font-size: 0.6rem !default;
     background: $badge-background;
     color: $badge-color;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $name != primary {
         &.#{$name} {
           background: $color;

data/vendor/assets/scss/components/_button-group.scss

@@ -29,15 +29,32 @@ $buttongroup-expand-max: 6 !default;
 ) {
   @include clearfix;
   margin-bottom: $buttongroup-margin;
-  font-size: map-get($button-sizes, default);
+  font-size: 0;
+
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
 
   #{$child-selector} {
-    float: #{$global-left};
     margin: 0;
-    font-size: inherit;
+    font-size: map-get($button-sizes, default);
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
+    @else {
+      float: #{$global-left};
+    }
 
     &:not(:last-child) {
-      border-#{$global-right}: $buttongroup-spacing solid $body-background;
+      @if $global-flexbox {
+        margin-right: $buttongroup-spacing;
+      }
+      @else {
+        border-#{$global-right}: $buttongroup-spacing solid $body-background;
+      }
     }
   }
 }
@@ -48,22 +65,31 @@ $buttongroup-expand-max: 6 !default;
   $selector: $buttongroup-child-selector,
   $count: null
 ) {
-  @if $count != null {
-    @warn 'button-group-expand(): the $count property is no longer needed. This parameter will be removed in Foundation 6.2.';
-  }
+  @if not $global-flexbox {
+    margin-right: -$buttongroup-spacing;
 
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-
-  &::before,
-  &::after {
-    display: none;
+    &::before,
+    &::after {
+      display: none;
+    }
   }
 
+  // scss-lint:disable ZeroUnit
   #{$selector} {
-    display: table-cell;
-    float: none;
+    @if $global-flexbox {
+      flex: 1 1 0px;
+    }
+    @else {
+      @for $i from 2 through $buttongroup-expand-max {
+        &:first-child:nth-last-child(#{$i}) {
+          &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
+            display: inline-block;
+            width: calc(#{percentage(1/$i)} - #{$buttongroup-spacing});
+            margin-right: $buttongroup-spacing;
+          }
+        }
+      }
+    }
   }
 }
 
@@ -72,11 +98,20 @@ $buttongroup-expand-max: 6 !default;
 @mixin button-group-stack(
   $selector: $buttongroup-child-selector
 ) {
+  @if $global-flexbox {
+    flex-wrap: wrap;
+  }
+
   #{$selector} {
-    width: 100%;
+    @if $global-flexbox {
+      flex: 0 0 100%;
+    }
+    @else {
+      width: 100%;
+    }
 
     &:not(:last-child) {
-      border-#{$global-right}: $buttongroup-spacing solid;
+      margin-#{$global-right}: 0;
     }
   }
 }
@@ -86,11 +121,17 @@ $buttongroup-expand-max: 6 !default;
 @mixin button-group-unstack(
   $selector: $buttongroup-child-selector
 ) {
+  // scss-lint:disable ZeroUnit
   #{$selector} {
-    width: auto;
+    @if $global-flexbox {
+      flex: 1 1 0px;
+    }
+    @else {
+      width: auto;
+    }
 
     &:not(:last-child) {
-      border-#{$global-right}: $buttongroup-spacing solid $body-background;
+      margin-#{$global-right}: $buttongroup-spacing;
     }
   }
 }
@@ -100,13 +141,15 @@ $buttongroup-expand-max: 6 !default;
     @include button-group;
 
     // Sizes
-    &.tiny     { font-size: map-get($button-sizes, tiny); }
-    &.small    { font-size: map-get($button-sizes, small); }
-    &.large    { font-size: map-get($button-sizes, large); }
+    @each $size, $value in map-remove($button-sizes, default) {
+      &.#{$size} #{$buttongroup-child-selector} { font-size: $value; }
+    }
+
+    // Even-width Group
     &.expanded { @include button-group-expand; }
 
     // Colors
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $button-fill != hollow {
         &.#{$name} #{$buttongroup-child-selector} {
           @include button-style($color, auto, auto);
@@ -121,7 +164,8 @@ $buttongroup-expand-max: 6 !default;
     }
 
     &.stacked,
-    &.stacked-for-small {
+    &.stacked-for-small,
+    &.stacked-for-medium {
       @include button-group-stack;
     }
 
@@ -131,13 +175,20 @@ $buttongroup-expand-max: 6 !default;
       }
     }
 
+    &.stacked-for-medium {
+      @include breakpoint(large) {
+        @include button-group-unstack;
+      }
+    }
+
+    // scss-lint:disable MergeableSelector
     &.stacked-for-small.expanded {
       @include breakpoint(small only) {
         display: block;
 
         #{$buttongroup-child-selector} {
           display: block;
-          border-right: 0;
+          margin-right: 0;
         }
       }
     }

data/vendor/assets/scss/components/_button.scss

@@ -28,11 +28,11 @@ $button-background-hover: scale-color($button-background, $lightness: -15%) !def
 
 /// Font color for buttons.
 /// @type List
-$button-color: #fff !default;
+$button-color: $white !default;
 
 /// Font color for buttons, if the background is light.
 /// @type List
-$button-color-alt: #000 !default;
+$button-color-alt: $black !default;
 
 /// Border radius for buttons, defaulted to global-radius.
 /// @type Number
@@ -194,13 +194,13 @@ $button-opacity-disabled: 0.25 !default;
     @include button;
 
     // Sizes
-    &.tiny     { font-size: map-get($button-sizes, tiny); }
-    &.small    { font-size: map-get($button-sizes, small); }
-    &.large    { font-size: map-get($button-sizes, large); }
+    @each $size, $value in map-remove($button-sizes, default) {
+      &.#{$size} { font-size: $value; }
+    }
     &.expanded { @include button-expand; }
 
     // Colors
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       @if $button-fill != hollow {
         &.#{$name} {
           @include button-style($color, auto);
@@ -223,7 +223,7 @@ $button-opacity-disabled: 0.25 !default;
         @include button-hollow;
         @include button-hollow-style;
 
-        @each $name, $color in $foundation-colors {
+        @each $name, $color in $foundation-palette {
           &.#{$name} {
             @include button-hollow-style($color);
           }
@@ -252,7 +252,7 @@ $button-opacity-disabled: 0.25 !default;
     &.arrow-only::after {
       margin-#{$global-left}: 0;
       float: none;
-      top: 0.2em;
+      top: -0.1em;
     }
   }
 }

data/vendor/assets/scss/components/_callout.scss

@@ -14,7 +14,7 @@ $callout-background: $white !default;
 /// @type Number
 $callout-background-fade: 85% !default;
 
-/// Defualt border style for callouts.
+/// Default border style for callouts.
 /// @type List
 $callout-border: 1px solid rgba($black, 0.25) !default;
 
@@ -88,7 +88,7 @@ $callout-link-tint: 30% !default;
   .callout {
     @include callout;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       &.#{$name} {
         @include callout-style($color);
       }

data/vendor/assets/scss/components/_drilldown.scss

@@ -27,6 +27,10 @@ $drilldown-background: $white !default;
   .is-drilldown {
     position: relative;
     overflow: hidden;
+
+    li {
+      display: block !important;
+    }
   }
 
   // Applied to nested <ul>s

data/vendor/assets/scss/components/_dropdown-menu.scss

@@ -31,24 +31,108 @@ $dropdownmenu-border: 1px solid $medium-gray !default;
 // @type Length
 $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
+@mixin left-right-arrows {
+  > a::after {
+    #{$global-right}: 14px;
+    margin-top: -3px;
+  }
+
+  &.opens-left > a::after {
+    @include css-triangle(5px, $dropdownmenu-arrow-color, left);
+  }
+
+  &.opens-right > a::after {
+    @include css-triangle(5px, $dropdownmenu-arrow-color, right);
+  }
+}
+
+@mixin dropdown-menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    > li.opens-left {
+      > .is-dropdown-submenu {
+        left: auto;
+        right: 0;
+        top: 100%;
+      }
+    }
+
+    > li.opens-right {
+      > .is-dropdown-submenu {
+        right: auto;
+        left: 0;
+        top: 100%;
+      }
+    }
+
+    @if $dropdownmenu-arrows {
+      > li.is-dropdown-submenu-parent > a {
+        padding-#{$global-right}: 1.5rem;
+        position: relative;
+      }
+
+      > li.is-dropdown-submenu-parent > a::after {
+        @include css-triangle(5px, $dropdownmenu-arrow-color, down);
+        #{$global-right}: 5px;
+        margin-top: -2px;
+      }
+    }
+  }
+  @else if $dir == vertical {
+    > li {
+      .is-dropdown-submenu {
+        top: 0;
+      }
+
+      &.opens-left {
+        .is-dropdown-submenu {
+          left: auto;
+          right: 100%;
+        }
+      }
+
+      &.opens-right {
+        .is-dropdown-submenu {
+          right: auto;
+          left: 100%;
+        }
+      }
+
+      @if $dropdownmenu-arrows {
+        @include left-right-arrows;
+      }
+    }
+  }
+  @else {
+    @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
+  }
+}
+
 @mixin foundation-dropdown-menu {
   .dropdown.menu {
+    @include dropdown-menu-direction(horizontal);
+
     a {
       @include disable-mouse-outline;
     }
-    &:not(.vertical) {
 
-    }
     .no-js & ul {
       display: none;
     }
 
-    &:not(.vertical) {
-      .is-dropdown-submenu {
-        &.first-sub {
-          top: 100%;
-          #{$global-left}: 0;
-          #{$global-right}: auto;
+    &.vertical {
+      @include dropdown-menu-direction(vertical);
+    }
+
+    @each $size in $breakpoint-classes {
+      @if $size != small {
+        @include breakpoint($size) {
+          &.#{$size}-horizontal {
+            @include dropdown-menu-direction(horizontal);
+          }
+
+          &.#{$size}-vertical {
+            @include dropdown-menu-direction(vertical);
+          }
         }
       }
     }
@@ -68,55 +152,16 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     &.align-right {
       float: right;
     }
-
-    > li .is-dropdown-submenu {
-      top: 0;
-      left: 100%;
-    }
   }
 
   .is-dropdown-submenu-parent {
     position: relative;
 
     a::after {
-      float: $global-right;
-      margin-top: 3px;
-      margin-#{$global-left}: 10px;
-    }
-
-    @if $dropdownmenu-arrows {
-      &.is-down-arrow a {
-        padding-#{$global-right}: 1.5rem;
-        position: relative;
-      }
-
-      &.is-down-arrow > a::after {
-        @include css-triangle(5px, $dropdownmenu-arrow-color, down);
-        position: absolute;
-        top: rem-calc(2px) + rem-calc(get-side($menu-item-padding, top));
-        #{$global-right}: 5px;
-      }
-
-      &.is-left-arrow > a::after {
-        @include css-triangle(5px, $dropdownmenu-arrow-color, left);
-        float: left;
-        margin-left: 0;
-        margin-right: 10px;
-      }
-
-      &.is-right-arrow > a::after {
-        @include css-triangle(5px, $dropdownmenu-arrow-color, right);
-      }
-    }
-
-    &.is-left-arrow.opens-inner .is-dropdown-submenu {
-      right: 0;
-      left: auto;
-    }
-
-    &.is-right-arrow.opens-inner .is-dropdown-submenu {
-      left: 0;
-      right: auto;
+      position: absolute;
+      top: 50%;
+      #{$global-right}: 5px;
+      margin-top: -2px;
     }
 
     &.opens-inner .is-dropdown-submenu {
@@ -125,11 +170,11 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
     &.opens-left .is-dropdown-submenu {
       left: auto;
-      right: 100%;
+      right: 0;
+      top: 100%;
     }
   }
 
-
   .is-dropdown-submenu {
     display: none;
     position: absolute;
@@ -140,6 +185,12 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     background: $dropdownmenu-background;
     border: $dropdownmenu-border;
 
+    .is-dropdown-submenu-parent {
+      @if $dropdownmenu-arrows {
+        @include left-right-arrows;
+      }
+    }
+
     @if (type-of($dropdownmenu-border-width) == 'number') {
       .is-dropdown-submenu {
         margin-top: (-$dropdownmenu-border-width);
@@ -150,7 +201,6 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       width: 100%;
     }
 
-
     // [TODO] Cut back specificity
     // scss-lint:disable SelectorDepth
     &:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &,