foundation-rails 6.3.1.0 → 6.4.1.0

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

@@ -18,14 +18,34 @@ $dropdownmenu-arrow-color: $anchor-color !default;
 /// @type Length
 $dropdownmenu-arrow-size: 6px !default;
 
+/// Sets dropdown menu arrow padding for aligning the arrow correctly.
+/// @type Length
+$dropdownmenu-arrow-padding: 1.5rem !default;
+
 /// Minimum width of dropdown sub-menus.
 /// @type Length
 $dropdownmenu-min-width: 200px !default;
 
-/// Background color for dropdowns.
+/// Background color for top level items.
 /// @type Color
 $dropdownmenu-background: $white !default;
 
+/// Background color for dropdowns.
+/// @type Color
+$dropdownmenu-submenu-background: $dropdownmenu-background !default;
+
+/// Padding for top level items.
+/// @type Number
+$dropdownmenu-padding: $global-menu-padding !default;
+
+/// Sets dropdown menu nested margin
+/// @type Number
+$dropdownmenu-nested-margin: 0 !default;
+
+/// Padding for sub-menu items.
+/// @type Number
+$dropdownmenu-submenu-padding: $dropdownmenu-padding !default;
+
 /// Border for dropdown sub-menus.
 /// @type List
 $dropdownmenu-border: 1px solid $medium-gray !default;
@@ -35,12 +55,22 @@ $dropdownmenu-border: 1px solid $medium-gray !default;
 // @type Length
 $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
-@mixin left-right-arrows {
+/// Text color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-color-active: get-color(primary) !default;
+
+/// Background color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-background-active: transparent !default;
+
+@mixin zf-dropdown-left-right-arrows {
   > a::after {
     #{$global-right}: 14px;
   }
 
   &.opens-left > a::after {
+    right: auto;
+    left: 5px;
     @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
   }
 
@@ -70,7 +100,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     @if $dropdownmenu-arrows {
       > li.is-dropdown-submenu-parent > a {
         position: relative;
-        padding-#{$global-right}: 1.5rem;
+        padding-#{$global-right}: $dropdownmenu-arrow-padding;
       }
 
       > li.is-dropdown-submenu-parent > a::after {
@@ -90,6 +120,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
         > .is-dropdown-submenu {
           right: 100%;
           left: auto;
+          top: 0;
         }
       }
 
@@ -101,7 +132,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       }
 
       @if $dropdownmenu-arrows {
-        @include left-right-arrows;
+        @include zf-dropdown-left-right-arrows;
       }
     }
   }
@@ -116,12 +147,23 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
     a {
       @include disable-mouse-outline;
+      padding: $dropdownmenu-padding;
+    }
+
+    // Active state
+    .is-active > a {
+      background: $dropdown-menu-item-background-active;
+      color: $dropdown-menu-item-color-active;
     }
 
     .no-js & ul {
       display: none;
     }
 
+    .nested.is-dropdown-submenu {
+      @include menu-nested($dropdownmenu-nested-margin);
+    }
+
     &.vertical {
       @include dropdown-menu-direction(vertical);
     }
@@ -199,11 +241,15 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     min-width: $dropdownmenu-min-width;
 
     border: $dropdownmenu-border;
-    background: $dropdownmenu-background;
+    background: $dropdownmenu-submenu-background;
+
+    .dropdown & a {
+      padding: $dropdownmenu-submenu-padding;
+    }
 
     .is-dropdown-submenu-parent {
       @if $dropdownmenu-arrows {
-        @include left-right-arrows;
+        @include zf-dropdown-left-right-arrows;
       }
     }
 

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

@@ -43,19 +43,26 @@ $dropdown-sizes: (
   position: absolute;
   z-index: 10;
 
-  display: block;
   width: $dropdown-width;
   padding: $dropdown-padding;
 
   visibility: hidden;
+  display: none;
   border: $dropdown-border;
   border-radius: $dropdown-radius;
   background-color: $dropdown-background;
 
   font-size: $dropdown-font-size;
 
+
+  // Allow an intermittent state to do positioning before making visible.
+  &.is-opening {
+    display: block;
+  }
+
   &.is-open {
     visibility: visible;
+    display: block;
   }
 }
 

data/vendor/assets/scss/components/_flex.scss

@@ -1,10 +1,90 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group Flexbox Utilities
+////
+//
+/// Default value for the count of source ordering`
+/// @type Number
+$flex-source-ordering-count: 6 !default;
+
+/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.
+/// @type Boolean
+$flexbox-responsive-breakpoints: true !default;
+
+@mixin flex-helpers {
+  .flex-container {
+    @include flex;
+  }
+
+  .flex-child-auto {
+    flex: 1 1 auto;
+  }
+
+  .flex-child-grow {
+    flex: 1 0 auto;
+  }
+
+  .flex-child-shrink {
+    flex: 0 1 auto;
+  }
+
+  @each $dir, $prop in $-zf-flex-direction {
+    .flex-dir-#{$dir} {
+      @include flex-direction($prop);
+    }
+  }
+
+  @if ($flexbox-responsive-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-flex-container {
+            @include flex;
+          }
+
+          .#{$size}-flex-child-auto {
+            flex: 1 1 auto;
+          }
+
+          .#{$size}-flex-child-grow {
+            flex: 1 0 auto;
+          }
+
+          .#{$size}-flex-child-shrink {
+            flex: 0 1 auto;
+          }
+
+          @each $dir, $prop in $-zf-flex-direction {
+            .#{$size}-flex-dir-#{$dir} {
+              @include flex-direction($prop);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 @mixin foundation-flex-classes {
   // Horizontal alignment using justify-content
-  @each $hdir, $prop in map-remove($-zf-flex-justify, left) {
+  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') {
     .align-#{$hdir} {
       @include flex-align($x: $hdir);
     }
   }
+  
+  // Horizontal alignment Specifically for Vertical Menu
+  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left', 'justify', 'spaced') {
+    .align-#{$hdir} {
+      &.vertical.menu > li > a { 
+        @include flex-align($x: $hdir);
+      }
+    }
+  }
 
   // Vertical alignment using align-items and align-self
   @each $vdir, $prop in $-zf-flex-align {
@@ -25,10 +105,13 @@
 
   // Source ordering
   @include -zf-each-breakpoint {
-    @for $i from 1 through 6 {
+    @for $i from 1 through $flex-source-ordering-count {
       .#{$-zf-size}-order-#{$i} {
         @include flex-order($i);
       }
     }
   }
+
+  // Vanilla Flexbox Helpers
+  @include flex-helpers;
 }

data/vendor/assets/scss/components/_menu.scss

@@ -12,11 +12,15 @@ $menu-margin: 0 !default;
 
 /// Left-hand margin of a nested menu.
 /// @type Number
-$menu-margin-nested: 1rem !default;
+$menu-nested-margin: $global-menu-nested-margin !default;
 
-/// Padding for items in a menu.
+/// Padding for items in a pill menu.
 /// @type Number
-$menu-item-padding: 0.7rem 1rem !default;
+$menu-items-padding: $global-menu-padding !default;
+
+/// margin for items in a simple menu.
+/// @type Number
+$menu-simple-margin: 1rem !default;
 
 /// Text color of an active menu item.
 /// @type Color
@@ -34,40 +38,39 @@ $menu-icon-spacing: 0.25rem !default;
 /// @type Color
 $menu-item-background-hover: $light-gray !default;
 
-/// Color for bordered menu
-/// @type Color
-$menu-border: $light-gray !default;
+/// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`. 
+/// But please note that `active` will be removed in upcoming versions.
+/// @type Boolean
+$menu-state-back-compat: true !default;
+
+/// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`. 
+/// But please note that `menu-centered` will be removed in upcoming versions.
+/// @type Boolean
+$menu-centered-back-compat: true !default;
 
 /// Creates the base styles for a Menu.
 @mixin menu-base {
-  margin: $menu-margin;
-  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  position: relative;
 
   @if $global-flexbox {
     display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    width: 100%;
+    flex-wrap: wrap;
   }
 
-  // List items are table cell to allow for vertical alignment
-  > li {
+  li {
     @include disable-mouse-outline;
-
-    @if $global-flexbox {
-      flex: 0 0 auto;
-    }
-    @else {
-      display: table-cell;
-      vertical-align: middle;
-    }
   }
 
-  // Reset line height to make the height of the overall item easier to calculate
-  > li > a {
-    display: block;
-    padding: $menu-item-padding;
+  a,
+  .button {
     line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    display: block;
+    padding: $menu-items-padding;
   }
 
   // Reset styles of inner elements
@@ -77,59 +80,116 @@ $menu-border: $light-gray !default;
   button {
     margin-bottom: 0;
   }
+
+  input {
+    display: inline-block;
+  }
 }
 
 /// Expands the items of a Menu, so each item is the same width.
 @mixin menu-expand {
   @if $global-flexbox {
-    > li {
+    li {
       flex: 1 1 0px; // sass-lint:disable-line zero-unit
     }
   }
   @else {
     display: table;
     width: 100%;
-    table-layout: fixed;
-  }
 
-  > li:first-child:last-child {
-    width: 100%;
+    > li {
+      display: table-cell;
+      vertical-align: middle;
+    }
   }
 }
 
-/// Sets the direction of a Menu.
-/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
-@mixin menu-direction($dir: horizontal) {
-  @if $dir == horizontal {
+/// Align menu items.
+@mixin menu-align($alignment) {
+  @if $alignment == left {
     @if $global-flexbox {
-      flex-wrap: nowrap;
+      justify-content: flex-start;
+    }
+    @else {
+      text-align: $global-left;
+    }
+  }
+  @else if $alignment == right {
+    @if $global-flexbox {
+      li {
+        display: flex;
+        justify-content: flex-end;
+
+        .submenu li {
+          justify-content: flex-start;
+        }
+      }
+
+      &.vertical li {
+        display: block;
+        text-align: $global-right;
 
-      > li {
-        flex: 0 0 auto;
+        .submenu li {
+          text-align: $global-right;
+        }
       }
     }
     @else {
-      > li {
-        display: table-cell;
+      text-align: $global-right;
+
+      .submenu li {
+        text-align: $global-left;
+      }
+
+      &.vertical {
+        .submenu li {
+          text-align: $global-right;
+        }
       }
     }
   }
-  @else if $dir == vertical {
+  @else if $alignment == center {
     @if $global-flexbox {
-      flex-wrap: wrap;
+      li {
+        display: flex;
+        justify-content: center;
 
-      > li {
-        flex: 0 0 100%;
-        max-width: 100%;
+        .submenu li {
+          justify-content: flex-start;
+        }
       }
+    }
+    @else {
+      text-align: center;
 
-      > li  > a {
-        justify-content: flex-start;
-        align-items: flex-start;
+      .submenu li {
+        text-align: $global-left;
       }
     }
+  }
+}
+
+/// Sets the direction of a Menu.
+/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
+@mixin menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    @if $global-flexbox {
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
     @else {
-      > li {
+      li {
+        display: inline-block;
+      }
+    }
+  }
+  @else if $dir == vertical {
+    @if $global-flexbox {
+      flex-wrap: nowrap;
+      flex-direction: column;
+    }
+    @else {
+      li {
         display: block;
       }
     }
@@ -140,68 +200,81 @@ $menu-border: $light-gray !default;
 }
 
 /// Creates a simple Menu, which has no padding or hover state.
-/// @param {Keyword} $dir [$global-left] - Direction of the menu. Set to `null` to do not generate styles for direction.
-@mixin menu-simple($dir: $global-left) {
-  li {
-    display: inline-block;
-    vertical-align: top;
-    line-height: 1;
+/// @param {Keyword} $dir [$global-left] - Direction of the menu. This effects the side of the `<li>` that receives the margin.
+/// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `<li>`.
+@mixin menu-simple($dir: $global-left, $margin: $menu-simple-margin) {
+  @if $global-flexbox {
+    align-items: center;
+  }
+
+  li + li {
+    margin-#{$dir}: $margin;
   }
 
   a {
     padding: 0;
   }
+}
 
-  @if $dir != null {
-    @include menu-simple-direction($dir);
+/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
+/// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin.
+/// @param {Keyword} $nested-alignment [left] - Alignment of the nested class
+@mixin menu-nested(
+  $margin: $menu-nested-margin,
+  $nested-alignment: left
+) {
+  @if $nested-alignment == right {
+    margin-#{$global-right}: $margin;
+    margin-#{$global-left}: 0;
+  }
+  @else {
+    margin-#{$global-right}: 0;
+    margin-#{$global-left}: $margin;
   }
-}
 
-/// Direction modifier for a simple Menu
-/// @param {Keyword} $dir [$global-left] - Direction of the menu
-@mixin menu-simple-direction($dir: $global-left) {
-  $no-margin-dir: $dir;
-  $margin-dir: direction-opposite($dir);
+}
 
-  li {
-    margin-#{$no-margin-dir}: 0;
-    margin-#{$margin-dir}: get-side($menu-item-padding, $margin-dir);
+/// Adds basic styles for icons in menus.
+@mixin menu-icons() {
+  @if $global-flexbox {
+    a {
+      display: flex;
+    }
   }
-}
+  @else {
+    img,
+    i,
+    svg {
+      vertical-align: middle;
 
-/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
-/// @param {Keyword|Number} $padding [auto] - Length of the margin.
-@mixin menu-nested($margin: $menu-margin-nested) {
-  margin-#{$global-left}: $margin;
+      + span {
+        vertical-align: middle;
+      }
+    }
+  }
 }
 
-/// Adds support for icons to Menu items.
-/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
-/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
-@mixin menu-icons($position: side, $base: true) {
-  @if $base {
-    @if $global-flexbox {
-      > li > a {
-        display: flex;
+/// Adds position classes for icons within a menu.
+@mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {
+  @if $position == left {
+    li a {
+      @if $global-flexbox {
+        flex-flow: row nowrap;
       }
-    }
-    @else {
-      > li > a {
-        img,
-        i,
-        svg {
-          vertical-align: middle;
-
-          + span {
-            vertical-align: middle;
-          }
+
+      img,
+      i,
+      svg {
+        margin-#{$global-right}: $spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
         }
       }
     }
   }
-
-  @if $position == side {
-    > li > a {
+  @else if $position == right {
+    li a {
       @if $global-flexbox {
         flex-flow: row nowrap;
       }
@@ -209,7 +282,7 @@ $menu-border: $light-gray !default;
       img,
       i,
       svg {
-        margin-#{$global-right}: $menu-icon-spacing;
+        margin-#{$global-left}: $spacing;
 
         @if not $global-flexbox {
           display: inline-block;
@@ -218,7 +291,7 @@ $menu-border: $light-gray !default;
     }
   }
   @else if $position == top {
-    > li > a {
+    li a {
       @if $global-flexbox {
         flex-flow: column nowrap;
       }
@@ -231,11 +304,35 @@ $menu-border: $light-gray !default;
       svg {
         @if not $global-flexbox {
           display: block;
-          margin: 0 auto $menu-icon-spacing;
+          margin: 0 auto $spacing;
         }
         @else {
           align-self: stretch;
-          margin-bottom: $menu-icon-spacing;
+          margin-bottom: $spacing;
+          text-align: center;
+        }
+      }
+    }
+  }
+  @else if $position == bottom {
+    li a {
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
+
+      img,
+      i,
+      svg {
+        @if not $global-flexbox {
+          display: block;
+          margin: $spacing auto 0;
+        }
+        @else {
+          align-self: stretch;
+          margin-bottom: $spacing;
           text-align: center;
         }
       }
@@ -244,127 +341,135 @@ $menu-border: $light-gray !default;
 }
 
 @mixin menu-text {
-  padding-top: 0;
-  padding-bottom: 0;
-  padding: $menu-item-padding;
+  padding: $global-menu-padding;
 
   font-weight: bold;
   line-height: 1;
   color: inherit;
 }
 
+@mixin menu-state-active {
+  background: $menu-item-background-active;
+  color: $menu-item-color-active;
+}
+
 @mixin foundation-menu {
   .menu {
     @include menu-base;
-    @include menu-icons;
 
     // Default orientation: horizontal
     &, &.horizontal {
       @include menu-direction(horizontal);
     }
 
+    // Vertical orientation modifier
+    &.vertical {
+      @include menu-direction(vertical);
+    }
+
     // Even-width modifier for horizontal orientation
     &.expanded {
       @include menu-expand;
     }
 
-    // Vertical orientation modifier
-    &.vertical {
-      @include menu-direction(vertical);
+    // Simple
+    &.simple {
+      @include menu-simple;
     }
 
+    // Breakpoint specific versions
     @include -zf-each-breakpoint($small: false) {
       &.#{$-zf-size}-horizontal {
         @include menu-direction(horizontal);
       }
 
+      &.#{$-zf-size}-vertical {
+        @include menu-direction(vertical);
+      }
+
       &.#{$-zf-size}-expanded {
         @include menu-expand;
       }
 
-      &.#{$-zf-size}-vertical {
-        @include menu-direction(vertical);
+      &.#{$-zf-size}-simple {
+        @include menu-expand;
       }
     }
 
-    // Simple
-    &.simple {
-      @include menu-simple;
+    // Nesting
+    &.nested {
+      @include menu-nested;
+    }
 
-      &.align-#{$global-right} {
-        @include menu-simple-direction($global-right);
-      }
+    // Icon Base Styles
+    &.icons {
+      @include menu-icons;
     }
 
-    // Align right
-    &.align-#{$global-right} {
-      @if $global-flexbox {
-        justify-content: flex-end;
-      }
-      @else {
-        @include clearfix;
+    // Icon Left
+    &.icon-left {
+      @include menu-icon-position(left);
+    }
 
-        > li {
-          float: $global-right;
-        }
-      }
+    // Icon Right
+    &.icon-right {
+      @include menu-icon-position(right);
     }
 
-    // Vertical icons
+    // Icon Top
     &.icon-top {
-      @include menu-icons(top, $base: false);
-      // Make vertical menu with icons on top work
-      &.vertical {
-        a > span {
-          margin: auto;
-        }
-      }
+      @include menu-icon-position(top);
     }
 
-    // Nesting
-    &.nested {
-      @include menu-nested;
+    // Icon Bottom
+    &.icon-bottom {
+      @include menu-icon-position(bottom);
     }
 
     // Active state
-    .active > a {
-      background: $menu-item-background-active;
-      color: $menu-item-color-active;
+    .is-active > a {
+      @include menu-state-active;
     }
-
-    // Menu with border
-    &.menu-bordered {
-      li {
-        border: 1px solid $menu-border;
-        &:not(:first-child) {
-          border-top: 0;
-        }
+    
+    // Backward Compatibility for active state
+    @if $menu-state-back-compat {
+      .active > a {
+        @include menu-state-active;
       }
     }
 
-    // Menu with background hover
-    &.menu-hover {
-      li:hover {
-        background-color: $menu-item-background-hover;
+    // Align left
+    &.align-#{$global-left} {
+      @include menu-align(left);
+    }
+
+    // Align right
+    &.align-#{$global-right} {
+      @include menu-align(right);
+
+      .nested {
+        @include menu-nested($nested-alignment: right);
       }
     }
-  }
 
-  .menu-text {
-    @include menu-text;
-  }
+    // Align center
+    &.align-center {
+      @include menu-align(center);
+    }
 
-  // Align center
-  .menu-centered {
-    text-align: center;
+    .menu-text {
+      @include menu-text;
+    }
+  }
 
-    > .menu {
-      @if $global-flexbox {
-        @include flex-align($x: center, $y: top);
-      }
-      @else {
-        display: inline-block;
-        vertical-align: top;
+  @if $menu-centered-back-compat {
+    .menu-centered {
+      > .menu {
+        @if $global-flexbox {
+          justify-content: center;
+        }
+        
+        @include menu-align(center);
       }
     }
   }