foundation-rails 6.2.4.0 → 6.3.0.0

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

@@ -10,23 +10,27 @@ $accordionmenu-arrows: true !default;
 /// @type Color
 $accordionmenu-arrow-color: $primary-color !default;
 
+/// Sets accordion menu arrow size if arrow is used.
+/// @type Length
+$accordionmenu-arrow-size: 6px !default;
+
 @mixin foundation-accordion-menu {
   @if $accordionmenu-arrows {
     .is-accordion-submenu-parent > a {
       position: relative;
 
       &::after {
-        @include css-triangle(6px, $accordionmenu-arrow-color, down);
+        @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
         position: absolute;
         top: 50%;
-        margin-top: -4px;
-        right: 1rem;
+        margin-top: -1 * ($accordionmenu-arrow-size / 2);
+        #{$global-right}: 1rem;
       }
     }
 
     .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+      transform: rotate(180deg);
       transform-origin: 50% 50%;
-      transform: scaleY(-1);
     }
   }
 }

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

@@ -14,9 +14,13 @@ $accordion-background: $white !default;
 /// @type Boolean
 $accordion-plusminus: true !default;
 
+/// Font size of accordion titles.
+/// @type Number
+$accordion-title-font-size: rem-calc(12) !default;
+
 /// Default text color for items in a Menu.
 /// @type Color
-$accordion-item-color: foreground($accordion-background, $primary-color) !default;
+$accordion-item-color: $primary-color !default;
 
 /// Default background color on hover for items in a Menu.
 /// @type Color
@@ -36,17 +40,19 @@ $accordion-content-border: 1px solid $light-gray !default;
 
 /// Default text color of tab content.
 /// @type Color
-$accordion-content-color: foreground($accordion-content-background, $body-font-color) !default;
+$accordion-content-color: $body-font-color !default;
 
 /// Default padding for tab content.
 /// @type Number | List
 $accordion-content-padding: 1rem !default;
 
 /// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
-@mixin accordion-container {
-  list-style-type: none;
-  background: $accordion-background;
+@mixin accordion-container (
+  $background: $accordion-background
+) {
   margin-#{$global-left}: 0;
+  background: $background;
+  list-style-type: none;
 }
 
 /// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
@@ -61,33 +67,41 @@ $accordion-content-padding: 1rem !default;
 }
 
 /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
-@mixin accordion-title {
-  display: block;
-  padding: $accordion-item-padding;
-  line-height: 1;
-  font-size: rem-calc(12);
-  color: $accordion-item-color;
+@mixin accordion-title (
+  $padding: $accordion-item-padding,
+  $font-size: $accordion-title-font-size,
+  $color: $accordion-item-color,
+  $border: $accordion-content-border,
+  $background-hover: $accordion-item-background-hover
+) {
   position: relative;
-  border: $accordion-content-border;
+  display: block;
+  padding: $padding;
+
+  border: $border;
   border-bottom: 0;
 
+  font-size: $font-size;
+  line-height: 1;
+  color: $color;
+
   :last-child:not(.is-active) > & {
+    border-bottom: $border;
     border-radius: 0 0 $global-radius $global-radius;
-    border-bottom: $accordion-content-border;
   }
 
   &:hover,
   &:focus {
-    background-color: $accordion-item-background-hover;
+    background-color: $background-hover;
   }
 
   @if $accordion-plusminus {
     &::before {
-      content: '+';
       position: absolute;
-      #{$global-right}: 1rem;
       top: 50%;
+      #{$global-right}: 1rem;
       margin-top: -0.5rem;
+      content: '+';
     }
 
     .is-active > &::before {
@@ -97,16 +111,23 @@ $accordion-content-padding: 1rem !default;
 }
 
 /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
-@mixin accordion-content {
-  padding: $accordion-content-padding;
+@mixin accordion-content (
+  $padding: $accordion-content-padding,
+  $border: $accordion-content-border,
+  $background: $accordion-content-background,
+  $color: $accordion-content-color
+) {
   display: none;
-  border: $accordion-content-border;
+  padding: $padding;
+
+  border: $border;
   border-bottom: 0;
-  background-color: $accordion-content-background;
-  color: $accordion-content-color;
+  background-color: $background;
+
+  color: $color;
 
   :last-child > &:last-child {
-    border-bottom: $accordion-content-border;
+    border-bottom: $border;
   }
 }
 

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

@@ -12,7 +12,15 @@ $badge-background: $primary-color !default;
 
 /// Default text color for badges.
 /// @type Color
-$badge-color: foreground($badge-background) !default;
+$badge-color: $white !default;
+
+/// Alternate text color for badges.
+/// @type Color
+$badge-color-alt: $black !default;
+
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$badge-palette: $foundation-palette !default;
 
 /// Default padding inside badges.
 /// @type Number
@@ -29,11 +37,13 @@ $badge-font-size: 0.6rem !default;
 /// Generates the base styles for a badge.
 @mixin badge {
   display: inline-block;
-  padding: $badge-padding;
   min-width: $badge-minwidth;
+  padding: $badge-padding;
+
+  border-radius: 50%;
+
   font-size: $badge-font-size;
   text-align: center;
-  border-radius: 50%;
 }
 
 @mixin foundation-badge {
@@ -43,12 +53,10 @@ $badge-font-size: 0.6rem !default;
     background: $badge-background;
     color: $badge-color;
 
-    @each $name, $color in $foundation-palette {
-      @if $name != primary {
-        &.#{$name} {
-          background: $color;
-          color: foreground($color);
-        }
+    @each $name, $color in $badge-palette {
+      &.#{$name} {
+        background: $color;
+        color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
       }
     }
   }

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

@@ -41,14 +41,15 @@ $breadcrumbs-item-slash: true !default;
 /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
 @mixin breadcrumbs-container {
   @include clearfix;
-  list-style: none;
   margin: $breadcrumbs-margin;
+  list-style: none;
 
   // Item wrapper
   li {
     float: #{$global-left};
-    color: $breadcrumbs-item-color-current;
+
     font-size: $breadcrumbs-item-font-size;
+    color: $breadcrumbs-item-color-current;
     cursor: default;
 
     @if $breadcrumbs-item-uppercase {
@@ -60,12 +61,13 @@ $breadcrumbs-item-slash: true !default;
       $slash: if($global-text-direction == 'ltr', '/', '\\');
 
       &:not(:last-child)::after {
-        color: $medium-gray;
-        content: $slash;
-        margin: 0 $breadcrumbs-item-margin;
         position: relative;
         top: 1px;
+        margin: 0 $breadcrumbs-item-margin;
+
         opacity: 1;
+        content: $slash;
+        color: $medium-gray;
       }
     }
     @else {

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

@@ -22,6 +22,10 @@ $buttongroup-child-selector: '.button' !default;
 /// @type Number
 $buttongroup-expand-max: 6 !default;
 
+/// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.
+/// @type Boolean
+$buttongroup-radius-on-each: true !default;
+
 /// Add styles for a button group container.
 /// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
 @mixin button-group(
@@ -52,6 +56,21 @@ $buttongroup-expand-max: 6 !default;
     &:last-child {
       margin-#{$global-right}: 0;
     }
+
+    @if not $buttongroup-radius-on-each {
+      border-radius: 0;
+
+      &:first-child {
+        border-top-#{$global-left}-radius: $global-radius;
+        border-bottom-#{$global-left}-radius: $global-radius;
+      }
+
+      &:last-child {
+        border-top-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+      }
+    }
+
   }
 }
 
@@ -70,10 +89,9 @@ $buttongroup-expand-max: 6 !default;
     }
   }
 
-  // scss-lint:disable ZeroUnit
   #{$selector} {
     @if $global-flexbox {
-      flex: 1 1 0px;
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
     }
     @else {
       @for $i from 2 through $buttongroup-expand-max {
@@ -113,6 +131,23 @@ $buttongroup-expand-max: 6 !default;
     &:last-child {
       margin-bottom: 0;
     }
+
+
+    @if not $buttongroup-radius-on-each {
+      border-radius: 0;
+
+      &:first-child{
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: $global-radius;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+      }
+    }
+
   }
 }
 
@@ -121,15 +156,29 @@ $buttongroup-expand-max: 6 !default;
 @mixin button-group-unstack(
   $selector: $buttongroup-child-selector
 ) {
-  // scss-lint:disable ZeroUnit
   #{$selector} {
     @if $global-flexbox {
-      flex: 1 1 0px;
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
     }
     @else {
       width: auto;
     }
     margin-bottom: 0;
+
+    @if not $buttongroup-radius-on-each {
+      &:first-child {
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+      }
+
+      &:last-child {
+        border-top-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-left}-radius: 0;
+      }
+    }
+
   }
 }
 
@@ -180,8 +229,7 @@ $buttongroup-expand-max: 6 !default;
       }
     }
 
-    // scss-lint:disable MergeableSelector
-    &.stacked-for-small.expanded {
+    &.stacked-for-small.expanded { // sass-lint:disable-line force-element-nesting
       @include breakpoint(small only) {
         display: block;
 

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

@@ -30,7 +30,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%) !def
 /// @type List
 $button-color: $white !default;
 
-/// Font color for buttons, if the background is light.
+/// Alternative font color for buttons.
 /// @type List
 $button-color-alt: $black !default;
 
@@ -47,6 +47,10 @@ $button-sizes: (
   large: 1.25rem,
 ) !default;
 
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$button-palette: $foundation-palette !default;
+
 /// opacity for a disabled button.
 /// @type List
 $button-opacity-disabled: 0.25 !default;
@@ -64,21 +68,27 @@ $button-hollow-hover-lightness: -50% !default;
   $button-margin: 0 0 $global-margin $global-margin !default;
 }
 
+/// transitions for buttons.
+/// @type List
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
+
 // TODO: Document button-base() mixin
 @mixin button-base {
   @include disable-mouse-outline;
   display: inline-block;
-  text-align: center;
-  line-height: 1;
-  cursor: pointer;
-  -webkit-appearance: none;
-  transition: background-color 0.25s ease-out, color 0.25s ease-out;
   vertical-align: middle;
+  margin: $button-margin;
+  padding: $button-padding;
+
+  -webkit-appearance: none;
   border: 1px solid transparent;
   border-radius: $button-radius;
-  padding: $button-padding;
-  margin: $button-margin;
+  transition: $button-transition;
+
   font-size: map-get($button-sizes, default);
+  line-height: 1;
+  text-align: center;
+  cursor: pointer;
 }
 
 /// Expands a button to make it full-width.
@@ -87,8 +97,8 @@ $button-hollow-hover-lightness: -50% !default;
   @if $expand {
     display: block;
     width: 100%;
-    margin-left: 0;
     margin-right: 0;
+    margin-left: 0;
   }
   @else {
     display: inline-block;
@@ -108,7 +118,7 @@ $button-hollow-hover-lightness: -50% !default;
   $background-hover-lightness: $button-background-hover-lightness
 ) {
   @if $color == auto {
-    $color: foreground($background, $button-color-alt, $button-color);
+    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
   }
 
   @if $background-hover == auto {
@@ -171,9 +181,10 @@ $button-hollow-hover-lightness: -50% !default;
     @include css-triangle($size, $color, down);
     position: relative;
     top: 0.4em; // Aligns the arrow with the text of the button
+
+    display: inline-block;
     float: #{$global-right};
     margin-#{$global-left}: get-side($button-padding, right);
-    display: inline-block;
   }
 }
 
@@ -219,7 +230,7 @@ $button-hollow-hover-lightness: -50% !default;
     &.expanded { @include button-expand; }
 
     // Colors
-    @each $name, $color in $foundation-palette {
+    @each $name, $color in $button-palette {
       @if $button-fill != hollow {
         &.#{$name} {
           @include button-style($color, auto, auto);
@@ -242,7 +253,7 @@ $button-hollow-hover-lightness: -50% !default;
         @include button-hollow;
         @include button-hollow-style;
 
-        @each $name, $color in $foundation-palette {
+        @each $name, $color in $button-palette {
           &.#{$name} {
             @include button-hollow-style($color);
           }
@@ -255,7 +266,7 @@ $button-hollow-hover-lightness: -50% !default;
     &[disabled] {
       @include button-disabled;
 
-      @each $name, $color in $foundation-palette {
+      @each $name, $color in $button-palette {
         &.#{$name} {
           @include button-disabled($color);
         }
@@ -275,9 +286,9 @@ $button-hollow-hover-lightness: -50% !default;
 
     // Button with dropdown arrow only
     &.arrow-only::after {
-      margin-#{$global-left}: 0;
-      float: none;
       top: -0.1em;
+      float: none;
+      margin-#{$global-left}: 0;
     }
   }
 }