foundation-rails 6.3.1.0 → 6.4.1.0

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

@@ -2,6 +2,18 @@
 /// @group accordion-menu
 ////
 
+/// Sets accordion menu padding.
+/// @type Number
+$accordionmenu-padding: $global-menu-padding !default;
+
+/// Sets accordion menu nested margin
+/// @type Number
+$accordionmenu-nested-margin: $global-menu-nested-margin !default;
+
+/// Sets accordion menu submenu padding.
+/// @type Number
+$accordionmenu-submenu-padding: $accordionmenu-padding !default;
+
 /// Sets if accordion menus have the default arrow styles.
 /// @type Boolean
 $accordionmenu-arrows: true !default;
@@ -10,27 +22,150 @@ $accordionmenu-arrows: true !default;
 /// @type Color
 $accordionmenu-arrow-color: $primary-color !default;
 
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-item-background: null !default;
+
+/// Sets accordion menu item border.
+/// @type Color
+$accordionmenu-border: null !default;
+
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-submenu-toggle-background: null !default;
+
+/// Sets accordion menu item padding.
+/// @type List
+$accordion-submenu-toggle-border: $accordionmenu-border !default;
+
+/// Sets accordion menu submenu toggle background width.
+/// @type Number
+$accordionmenu-submenu-toggle-width: 40px !default;
+
+/// Sets accordion menu submenu toggle background height.
+/// @type Number
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default;
+
 /// Sets accordion menu arrow size if arrow is used.
 /// @type Length
 $accordionmenu-arrow-size: 6px !default;
 
+@mixin zf-accordion-menu-left-right-arrows {
+  .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
+    position: relative;
+
+    &::after {
+      @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
+      position: absolute;
+      top: 50%;
+      margin-top: -1 * ($accordionmenu-arrow-size / 2);
+      #{$global-right}: 1rem;
+    }
+  }
+  &.align-left .is-accordion-submenu-parent > a::after {
+    left: auto;
+    right: 1rem;
+  }
+  &.align-right .is-accordion-submenu-parent > a::after {
+    right: auto;
+    left: 1rem;
+  }
+}
 @mixin foundation-accordion-menu {
-  @if $accordionmenu-arrows {
-    .is-accordion-submenu-parent > a {
-      position: relative;
-
-      &::after {
-        @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
-        position: absolute;
-        top: 50%;
-        margin-top: -1 * ($accordionmenu-arrow-size / 2);
-        #{$global-right}: 1rem;
+
+  .accordion-menu {
+    @if $accordionmenu-border {
+      border-bottom: $accordionmenu-border;
+    }
+
+    li {
+      @if $accordionmenu-border {
+        border-top: $accordionmenu-border;
+        border-right: $accordionmenu-border;
+        border-left: $accordionmenu-border;
+      }
+      width: 100%;
+    }
+
+    a {
+      @if $accordionmenu-item-background {
+        background: $accordionmenu-item-background;
+      }
+      padding: $accordionmenu-padding;
+    }
+    
+    .is-accordion-submenu a {
+      padding: $accordionmenu-submenu-padding;
+    }
+
+    .nested.is-accordion-submenu {
+      @include menu-nested($accordionmenu-nested-margin);
+    }
+
+    &.align-#{$global-right} {
+      .nested.is-accordion-submenu {
+        @include menu-nested($accordionmenu-nested-margin, right);
       }
     }
 
-    .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
-      transform: rotate(180deg);
-      transform-origin: 50% 50%;
+    @if $accordionmenu-arrows {
+      @include zf-accordion-menu-left-right-arrows;
+
+      .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+        transform: rotate(180deg);
+        transform-origin: 50% 50%;
+      }
+    }
+  }
+
+  .is-accordion-submenu li {
+    @if $accordionmenu-border {
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+
+  .is-accordion-submenu-parent {
+    position: relative;
+  }
+
+  .has-submenu-toggle > a {
+    margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
+  }
+
+  // Submenu toggle
+  .submenu-toggle {
+    position: absolute;
+    top: 0;
+    #{$global-right}: 0;
+    cursor: pointer;
+
+    width: $accordionmenu-submenu-toggle-width;
+    height: $accordionmenu-submenu-toggle-height;
+
+    border-#{$global-left}: $accordion-submenu-toggle-border;
+
+    @if $accordionmenu-submenu-toggle-background {
+      background: $accordionmenu-submenu-toggle-background;
+    }
+
+    // Add the arrow to the toggle
+    &::after {
+      @include css-triangle(6px, $accordionmenu-arrow-color, down);
+
+      top: 0;
+      bottom: 0;
+      margin: auto;
     }
   }
+
+  // Rotate the arrow when menu is open
+  .submenu-toggle[aria-expanded='true']::after {
+    transform: scaleY(-1);
+    transform-origin: 50% 50%;
+  }
+
+  .submenu-toggle-text {
+    @include element-invisible;
+  }
 }

data/vendor/assets/scss/components/_accordion.scss

@@ -53,6 +53,11 @@ $accordion-content-padding: 1rem !default;
   margin-#{$global-left}: 0;
   background: $background;
   list-style-type: none;
+  &[disabled] {
+    .accordion-title {
+      cursor: not-allowed;
+    }
+  }
 }
 
 /// Adds styles for the accordion item. Apply this to the list item within an accordion ul.

data/vendor/assets/scss/components/_breadcrumbs.scss

@@ -34,13 +34,31 @@ $breadcrumbs-item-margin: 0.75rem !default;
 /// @type Boolean
 $breadcrumbs-item-uppercase: true !default;
 
-/// If `true`, adds a slash between breadcrumb links.
+/// If `true`, adds a seperator between breadcrumb links.
 /// @type Boolean
-$breadcrumbs-item-slash: true !default;
+$breadcrumbs-item-separator: true !default;
 
-/// Color of breadcrumb slash.
+// If it exists $breadcrumbs-item-slash is used to build $breadcrumbs-item-separator. See the documentation.
+@if variable-exists(breadcrumbs-item-slash) {
+  $breadcrumbs-item-separator: $breadcrumbs-item-slash;
+}
+
+/// Used character for the breadcrumb separator.
+/// @type Content
+$breadcrumbs-item-separator-item: '/' !default;
+
+/// Used character for the breadcrumb separator in rtl mode.
+/// @type Content
+$breadcrumbs-item-separator-item-rtl: '\\' !default;
+
+/// Color of breadcrumb item.
 /// @type Color
-$breadcrumbs-item-slash-color: $medium-gray !default;
+$breadcrumbs-item-separator-color: $medium-gray !default;
+
+// If it exists $breadcrumbs-item-slash-color is used to build $breadcrumbs-item-separator-color. See the documentation.
+@if variable-exists(breadcrumbs-item-slash-color) {
+  $breadcrumbs-item-separator-color: $breadcrumbs-item-slash-color;
+}
 
 /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
 @mixin breadcrumbs-container {
@@ -60,17 +78,16 @@ $breadcrumbs-item-slash-color: $medium-gray !default;
       text-transform: uppercase;
     }
 
-    @if $breadcrumbs-item-slash {
+    @if $breadcrumbs-item-separator {
       // Need to escape the backslash
-      $slash: if($global-text-direction == 'ltr', '/', '\\');
+      $separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);
 
       &:not(:last-child)::after {
         position: relative;
-        top: 1px;
         margin: 0 $breadcrumbs-item-margin;
         opacity: 1;
-        content: $slash;
-        color: $breadcrumbs-item-slash-color;
+        content: $separator;
+        color: $breadcrumbs-item-separator-color;
       }
     }
     @else {

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

@@ -63,13 +63,13 @@ $buttongroup-radius-on-each: true !default;
       border-radius: 0;
 
       &:first-child {
-        border-top-#{$global-left}-radius: $global-radius;
-        border-bottom-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-left}-radius: $button-radius;
+        border-bottom-#{$global-left}-radius: $button-radius;
       }
 
       &:last-child {
-        border-top-#{$global-right}-radius: $global-radius;
-        border-bottom-#{$global-right}-radius: $global-radius;
+        border-top-#{$global-right}-radius: $button-radius;
+        border-bottom-#{$global-right}-radius: $button-radius;
       }
     }
 

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

@@ -6,6 +6,10 @@
 /// @group button
 ////
 
+/// Font family for button elements.
+/// @type Font
+$button-font-family: inherit !default;
+
 /// Padding inside buttons.
 /// @type List
 $button-padding: 0.85em 1em !default;
@@ -82,6 +86,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   display: inline-block;
   vertical-align: middle;
   margin: $button-margin;
+  font-family: $button-font-family;
 
   @if (type-of($button-padding) == 'map') {
     @each $size, $padding in $button-padding {
@@ -154,11 +159,19 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   &:hover, &:focus {
     background-color: transparent;
   }
+
+  &.disabled,
+  &[disabled] {
+    &,
+    &:hover, &:focus {
+      background-color: transparent;
+    }
+  }
 }
 
 @mixin button-hollow-style(
-  $color: $primary-color,
-  $hover-lightness: $button-hollow-hover-lightness, 
+  $color: $button-background,
+  $hover-lightness: $button-hollow-hover-lightness,
   $border-width: $button-hollow-border-width
 ) {
   $color-hover: scale-color($color, $lightness: $hover-lightness);
@@ -169,14 +182,19 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   &:hover, &:focus {
     border-color: $color-hover;
     color: $color-hover;
+    &.disabled,
+    &[disabled] {
+      border: $border-width solid $color;
+      color: $color;
+    }
   }
 }
 
 /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
-/// @param [Color] $background [$primary-color] - Background color of the disabled button.
+/// @param [Color] $background [$button-background] - Background color of the disabled button.
 /// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
 @mixin button-disabled(
-  $background: $primary-color,
+  $background: $button-background,
   $color: $button-color
 ) {
   @if $color == auto {
@@ -208,7 +226,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 
     display: inline-block;
     float: #{$global-right};
-    margin-#{$global-left}: get-side($button-padding, right);
+    margin-#{$global-left}: $offset;
   }
 }
 
@@ -271,6 +289,18 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
       }
     }
 
+    // Disabled style
+    &.disabled,
+    &[disabled] {
+      @include button-disabled;
+
+      @each $name, $color in $button-palette {
+        &.#{$name} {
+          @include button-disabled($color, auto);
+        }
+      }
+    }
+
     // Hollow style
     @if $button-fill != hollow {
       &.hollow {
@@ -285,14 +315,31 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
       }
     }
 
-    // Disabled style
-    &.disabled,
-    &[disabled] {
-      @include button-disabled;
+    // Clear style
+    @if $button-fill != clear {
+      &.clear {
+        @include button-hollow;
+        @include button-hollow-style;
 
-      @each $name, $color in $button-palette {
-        &.#{$name} {
-          @include button-disabled($color, auto);
+        &, &:hover, &:focus {
+          &, &.disabled, &[disabled] {
+            border-color: transparent;
+          }
+        }
+
+        @each $name, $color in $button-palette {
+          &.#{$name} {
+            @include button-hollow-style($color);
+
+            &, &:hover,
+            &:focus {
+              &,
+              &.disabled,
+              &[disabled] {
+                border-color: transparent;
+              }
+            }
+          }
         }
       }
     }

data/vendor/assets/scss/components/_card.scss

@@ -36,7 +36,7 @@ $card-padding: $global-padding !default;
 
 /// Default bottom margin.
 /// @type number
-$card-margin: $global-margin !default;
+$card-margin-bottom: $global-margin !default;
 
 /// Adds styles for a card container.
 /// @param {Color} $background - Background color of the card.
@@ -48,7 +48,7 @@ $card-margin: $global-margin !default;
 @mixin card-container(
   $background: $card-background,
   $color: $card-font-color,
-  $margin: $card-margin,
+  $margin: $card-margin-bottom,
   $border: $card-border,
   $radius: $card-border-radius,
   $shadow: $card-shadow
@@ -56,6 +56,7 @@ $card-margin: $global-margin !default;
   @if $global-flexbox {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
   }
 
   margin-bottom: $margin;
@@ -81,6 +82,7 @@ $card-margin: $global-margin !default;
 ) {
   @if $global-flexbox {
     flex: 0 1 auto;
+    display: flex;
   }
 
   padding: $padding;
@@ -118,4 +120,10 @@ $card-margin: $global-margin !default;
   .card-section {
     @include card-section;
   }
+
+  // For IE 11 - Flexbug
+  // https://github.com/philipwalton/flexbugs/issues/75
+  .card-image {
+    min-height: 1px;
+  }
 }

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

@@ -14,6 +14,26 @@ $drilldown-transition: transform 0.15s linear !default;
 /// @type Boolean
 $drilldown-arrows: true !default;
 
+/// Sets drilldown menu item padding.
+/// @type Number
+$drilldown-padding: $global-menu-padding !default;
+
+/// Sets drilldown menu nested margin
+/// @type Number
+$drilldown-nested-margin: 0 !default;
+
+/// Background color for drilldown top level items.
+/// @type Color
+$drilldown-background: $white !default;
+
+/// Sets drilldown menu item padding in the submenu.
+/// @type Number
+$drilldown-submenu-padding: $drilldown-padding !default;
+
+/// Background color for drilldown submenus.
+/// @type Color
+$drilldown-submenu-background: $white !default;
+
 /// Sets drilldown arrow color if arrow is used.
 /// @type Color
 $drilldown-arrow-color: $primary-color !default;
@@ -22,9 +42,31 @@ $drilldown-arrow-color: $primary-color !default;
 /// @type Length
 $drilldown-arrow-size: 6px !default;
 
-/// Background color for drilldown submenus.
-/// @type Color
-$drilldown-background: $white !default;
+@mixin zf-drilldown-left-right-arrows {
+  .is-drilldown-submenu-parent > a {
+    position: relative;
+    &::after {
+      position: absolute;
+      top: 50%;
+      margin-top: -1 * $drilldown-arrow-size;
+      #{$global-right}: 1rem;
+      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
+    }
+  }
+
+  &.align-left .is-drilldown-submenu-parent > a::after {
+    left: auto;
+    right: 1rem;
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+  }
+
+  &.align-right .is-drilldown-submenu-parent > a::after {
+    right: auto;
+    left: 1rem;
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
+  }
+
+}
 
 @mixin foundation-drilldown-menu {
   // Applied to the Menu container
@@ -41,53 +83,60 @@ $drilldown-background: $white !default;
     }
   }
 
-  // Applied to nested <ul>s
-  .is-drilldown-submenu {
-    position: absolute;
-    top: 0;
-    #{$global-left}: 100%;
-    z-index: -1;
+  // The top level <ul>
+  .drilldown {
+    a {
+      padding: $drilldown-padding;
+      background: $drilldown-background;
+    }
 
-    width: 100%;
-    background: $drilldown-background;
-    transition: $drilldown-transition;
+    // Applied to submenu <ul>s
+    .is-drilldown-submenu {
+      position: absolute;
+      top: 0;
+      #{$global-left}: 100%;
+      z-index: -1;
+
+      width: 100%;
+      background: $drilldown-submenu-background;
+      transition: $drilldown-transition;
+
+      &.is-active {
+        z-index: 1;
+        display: block;
+        transform: translateX(if($global-text-direction == ltr, -100%, 100%));
+      }
 
-    &.is-active {
-      z-index: 1;
-      display: block;
-      transform: translateX(if($global-text-direction == ltr, -100%, 100%));
-    }
+      &.is-closing {
+        transform: translateX(if($global-text-direction == ltr, 100%, -100%));
+      }
 
-    &.is-closing {
-      transform: translateX(if($global-text-direction == ltr, 100%, -100%));
+      // Submenu item padding
+      a {
+        padding: $drilldown-submenu-padding;
+      }
     }
-  }
-
-  .drilldown-submenu-cover-previous {
-    min-height: 100%;
-  }
 
-  @if $drilldown-arrows {
-    .is-drilldown-submenu-parent > a {
-      position: relative;
+    .nested.is-drilldown-submenu {
+      @include menu-nested($drilldown-nested-margin);
+    }
 
-      &::after {
-        @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
-        position: absolute;
-        top: 50%;
-        margin-top: -1 * $drilldown-arrow-size;
-        #{$global-right}: 1rem;
-      }
+    .drilldown-submenu-cover-previous {
+      min-height: 100%;
     }
 
-    .js-drilldown-back > a::before {
-      @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
-      border-#{$global-left}-width: 0;
-      display: inline-block;
-      vertical-align: middle;
-      margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
+    @if $drilldown-arrows {
+      @include zf-drilldown-left-right-arrows;
 
-      border-#{$global-left}-width: 0;
+      .js-drilldown-back > a::before {
+        @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
+        border-#{$global-left}-width: 0;
+        display: inline-block;
+        vertical-align: middle;
+        margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
+
+        border-#{$global-left}-width: 0;
+      }
     }
   }
 }