foundation-rails 6.2.4.0 → 6.3.0.0

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

@@ -44,12 +44,12 @@ $callout-link-tint: 30% !default;
 
 /// Adds basic styles for a callout, including padding and margin.
 @mixin callout-base() {
+  position: relative;
   margin: $callout-margin;
   padding: $callout-padding;
+
   border: $callout-border;
   border-radius: $callout-radius;
-  position: relative;
-  color: $callout-font-color;
 
   // Respect the padding, fool.
   > :first-child {
@@ -67,6 +67,7 @@ $callout-link-tint: 30% !default;
   $background: scale-color($color, $lightness: $callout-background-fade);
 
   background-color: $background;
+  color: color-pick-contrast($background, ($callout-font-color, $callout-font-color-alt));
 }
 
 @mixin callout-size($padding) {

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

@@ -0,0 +1,121 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group card
+////
+
+/// Defualt background color.
+/// @type Color
+$card-background: $white !default;
+
+/// Default font color for cards.
+/// @type Color
+$card-font-color: $body-font-color !default;
+
+/// Default background.
+/// @type Color
+$card-divider-background: $light-gray !default;
+
+/// Default border style.
+/// @type List
+$card-border: 1px solid $light-gray !default;
+
+/// Default card shadow.
+/// @type List
+$card-shadow: none !default;
+
+/// Default border radius.
+/// @type List
+$card-border-radius: $global-radius !default;
+
+/// Default padding.
+/// @type Number
+$card-padding: $global-padding !default;
+
+/// Default bottom margin.
+/// @type number
+$card-margin: $global-margin !default;
+
+/// Adds styles for a card container.
+/// @param {Color} $background - Background color of the card.
+/// @param {Color} $color - font color of the card.
+/// @param {Number} $margin - Bottom margin of the card.
+/// @param {List} $border - Border around the card.
+/// @param {List} $radius - border radius of the card.
+/// @param {List} $shadow - box shadow of the card.
+@mixin card-container(
+  $background: $card-background,
+  $color: $card-font-color,
+  $margin: $card-margin,
+  $border: $card-border,
+  $radius: $card-border-radius,
+  $shadow: $card-shadow
+) {
+  @if $global-flexbox {
+    display: flex;
+    flex-direction: column;
+  }
+
+  margin-bottom: $margin;
+
+  border: $border;
+  border-radius: $radius;
+
+  background: $background;
+  box-shadow: $shadow;
+
+  overflow: hidden;
+  color: $card-font-color;
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Adds styles for a card divider.
+@mixin card-divider(
+  $background: $card-divider-background,
+  $padding: $card-padding
+) {
+  @if $global-flexbox {
+    flex: 0 1 auto;
+  }
+
+  padding: $padding;
+  background: $background;
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Adds styles for a card section.
+@mixin card-section(
+  $padding: $card-padding
+) {
+  @if $global-flexbox {
+    flex: 1 0 auto;
+  }
+
+  padding: $padding;
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin foundation-card {
+  .card {
+    @include card-container;
+  }
+
+  .card-divider {
+    @include card-divider;
+  }
+
+  .card-section {
+    @include card-section;
+  }
+}

data/vendor/assets/scss/components/_close-button.scss

@@ -10,17 +10,26 @@
 /// @type List
 $closebutton-position: right top !default;
 
-/// Right (or left) offset for a close button.
-/// @type Number
-$closebutton-offset-horizontal: 1rem !default;
+/// Right (or left) offset(s) for a close button.
+/// @type Number|Map
+$closebutton-offset-horizontal: (
+  small: 0.66rem,
+  medium: 1rem,
+) !default;
 
-/// Top (or bottom) offset for a close button.
-/// @type Number
-$closebutton-offset-vertical: 0.5rem !default;
+/// Top (or bottom) offset(s) for a close button.
+/// @type Number|Map
+$closebutton-offset-vertical: (
+  small: 0.33em,
+  medium: 0.5rem,
+) !default;
 
-/// Default font size of the close button.
-/// @type Number
-$closebutton-size: 2em !default;
+/// Default font size(s) of the close button.
+/// @type Number|Map
+$closebutton-size: (
+  small: 1.5em,
+  medium: 2em,
+) !default;
 
 /// The line-height of the close button. It affects the spacing of the element.
 /// @type Number
@@ -34,6 +43,39 @@ $closebutton-color: $dark-gray !default;
 /// @type Color
 $closebutton-color-hover: $black !default;
 
+
+/// Get the size and position for a close button. If the input value is a number, the number is returned. If the input value is a config map and the map has the key `$size`, the value is returned.
+///
+/// @param {Number|Map} $value - A number or map that represents the size or position value(s) of the close button.
+/// @param {Keyword} $size - The size of the close button to use.
+///
+/// @return {Number} The given number or the value found in the map.
+@function -zf-get-size-val($value, $size) {
+  // Check if the value is a number
+  @if type-of($value) == 'number' {
+    // If it is, just return the number
+    @return $value;
+  }
+
+  // Check if the size name exists in the value map
+  @else if map-has-key($value, $size) {
+    // If it does, return the value
+    @return map-get($value, $size);
+  }
+}
+
+/// Sets the size and position of a close button.
+/// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.
+@mixin close-button-size($size) {
+  $x: nth($closebutton-position, 1);
+  $y: nth($closebutton-position, 2);
+
+  #{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size);
+  #{$y}: -zf-get-size-val($closebutton-offset-vertical, $size);
+  font-size: -zf-get-size-val($closebutton-size, $size);
+  line-height: -zf-get-size-val($closebutton-lineheight, $size);
+}
+
 /// Adds styles for a close button, using the styles in the settings variables.
 @mixin close-button {
   $x: nth($closebutton-position, 1);
@@ -42,10 +84,6 @@ $closebutton-color-hover: $black !default;
   @include disable-mouse-outline;
   position: absolute;
   color: $closebutton-color;
-  #{$x}: $closebutton-offset-horizontal;
-  #{$y}: $closebutton-offset-vertical;
-  font-size: $closebutton-size;
-  line-height: $closebutton-lineheight;
   cursor: pointer;
 
   &:hover,
@@ -57,5 +95,8 @@ $closebutton-color-hover: $black !default;
 @mixin foundation-close-button {
   .close-button {
     @include close-button;
+
+    &.small { @include close-button-size(small) }
+    &, &.medium { @include close-button-size(medium) }
   }
 }

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

@@ -18,6 +18,10 @@ $drilldown-arrows: true !default;
 /// @type Color
 $drilldown-arrow-color: $primary-color !default;
 
+/// Sets drilldown arrow size if arrow is used.
+/// @type Length
+$drilldown-arrow-size: 6px !default;
+
 /// Background color for drilldown submenus.
 /// @type Color
 $drilldown-background: $white !default;
@@ -29,7 +33,11 @@ $drilldown-background: $white !default;
     overflow: hidden;
 
     li {
-      display: block !important;
+      display: block;
+    }
+
+    &.animate-height {
+      transition: height 0.5s;
     }
   }
 
@@ -39,7 +47,7 @@ $drilldown-background: $white !default;
     top: 0;
     #{$global-left}: 100%;
     z-index: -1;
-    // height: 100%;
+
     width: 100%;
     background: $drilldown-background;
     transition: $drilldown-transition;
@@ -55,25 +63,31 @@ $drilldown-background: $white !default;
     }
   }
 
+  .drilldown-submenu-cover-previous {
+    min-height: 100%;
+  }
+
   @if $drilldown-arrows {
     .is-drilldown-submenu-parent > a {
       position: relative;
 
       &::after {
-        @include css-triangle(6px, $drilldown-arrow-color, $global-right);
+        @include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
         position: absolute;
         top: 50%;
-        margin-top: -6px;
+        margin-top: -1 * $drilldown-arrow-size;
         #{$global-right}: 1rem;
       }
     }
 
     .js-drilldown-back > a::before {
-      @include css-triangle(6px, $drilldown-arrow-color, $global-left);
+      @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;
     }
   }
 }

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

@@ -14,6 +14,10 @@ $dropdownmenu-arrows: true !default;
 /// @type Color
 $dropdownmenu-arrow-color: $anchor-color !default;
 
+/// Sets dropdown menu arrow size if arrow is used.
+/// @type Length
+$dropdownmenu-arrow-size: 6px !default;
+
 /// Minimum width of dropdown sub-menus.
 /// @type Length
 $dropdownmenu-min-width: 200px !default;
@@ -34,15 +38,14 @@ $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);
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
   }
 
   &.opens-right > a::after {
-    @include css-triangle(5px, $dropdownmenu-arrow-color, right);
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
   }
 }
 
@@ -50,30 +53,30 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
   @if $dir == horizontal {
     > li.opens-left {
       > .is-dropdown-submenu {
-        left: auto;
-        right: 0;
         top: 100%;
+        right: 0;
+        left: auto;
       }
     }
 
     > li.opens-right {
       > .is-dropdown-submenu {
+        top: 100%;
         right: auto;
         left: 0;
-        top: 100%;
       }
     }
 
     @if $dropdownmenu-arrows {
       > li.is-dropdown-submenu-parent > a {
-        padding-#{$global-right}: 1.5rem;
         position: relative;
+        padding-#{$global-right}: 1.5rem;
       }
 
       > li.is-dropdown-submenu-parent > a::after {
-        @include css-triangle(5px, $dropdownmenu-arrow-color, down);
+        @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
         #{$global-right}: 5px;
-        margin-top: -2px;
+        margin-top: -1 * ($dropdownmenu-arrow-size / 2);
       }
     }
   }
@@ -85,8 +88,8 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
       &.opens-left {
         > .is-dropdown-submenu {
-          left: auto;
           right: 100%;
+          left: auto;
         }
       }
 
@@ -140,8 +143,8 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     &.align-right {
       .is-dropdown-submenu.first-sub {
         top: 100%;
-        left: auto;
         right: 0;
+        left: auto;
       }
     }
   }
@@ -161,7 +164,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       position: absolute;
       top: 50%;
       #{$global-right}: 5px;
-      margin-top: -2px;
+      margin-top: -1 * $dropdownmenu-arrow-size;
     }
 
     &.opens-inner > .is-dropdown-submenu {
@@ -169,14 +172,15 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
       top: 100%;
       @if $global-text-direction == 'rtl' {
         right: auto;
-      } @else {
+      }
+      @else {
         left: auto;
       }
     }
 
     &.opens-left > .is-dropdown-submenu {
-      left: auto;
       right: 100%;
+      left: auto;
     }
 
     &.opens-right > .is-dropdown-submenu {
@@ -186,14 +190,16 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
   }
 
   .is-dropdown-submenu {
-    display: none;
     position: absolute;
     top: 0;
     #{$global-left}: 100%;
-    min-width: $dropdownmenu-min-width;
     z-index: 1;
-    background: $dropdownmenu-background;
+
+    display: none;
+    min-width: $dropdownmenu-min-width;
+
     border: $dropdownmenu-border;
+    background: $dropdownmenu-background;
 
     .is-dropdown-submenu-parent {
       @if $dropdownmenu-arrows {
@@ -212,7 +218,6 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     }
 
     // [TODO] Cut back specificity
-    // scss-lint:disable SelectorDepth
     //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
     &.js-dropdown-active {
       display: block;

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

@@ -10,6 +10,10 @@
 /// @type List
 $dropdown-padding: 1rem !default;
 
+/// Background for dropdown panes.
+/// @type Color
+$dropdown-background: $body-background !default;
+
 /// Border for dropdown panes.
 /// @type List
 $dropdown-border: 1px solid $medium-gray !default;
@@ -36,16 +40,19 @@ $dropdown-sizes: (
 
 /// Applies styles for a basic dropdown.
 @mixin dropdown-container {
-  background-color: $body-background;
-  border: $dropdown-border;
-  border-radius: $dropdown-radius;
+  position: absolute;
+  z-index: 10;
+
   display: block;
-  font-size: $dropdown-font-size;
+  width: $dropdown-width;
   padding: $dropdown-padding;
-  position: absolute;
+
   visibility: hidden;
-  width: $dropdown-width;
-  z-index: 10;
+  border: $dropdown-border;
+  border-radius: $dropdown-radius;
+  background-color: $dropdown-background;
+
+  font-size: $dropdown-font-size;
 
   &.is-open {
     visibility: visible;