foundation-rails 6.6.1.0 → 6.9.0.0

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

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -85,8 +85,8 @@ $callout-link-tint: 30% !default;
 /// Adds styles for a callout.
 /// @param {Color} $color [$callout-background] - Color to use.
 @mixin callout($color: $callout-background) {
-  @include callout-base;
   @include callout-style($color);
+  @include callout-base;
 }
 
 @mixin foundation-callout {
@@ -94,7 +94,7 @@ $callout-link-tint: 30% !default;
     @include callout;
 
     @each $name, $color in $foundation-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         @include callout-style($color);
       }
     }

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

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////

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

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -92,12 +92,13 @@ $closebutton-color-hover: $black !default;
   $x: nth($closebutton-position, 1);
   $y: nth($closebutton-position, 2);
 
-  @include disable-mouse-outline;
   position: absolute;
   z-index: $closebutton-z-index;
   color: $closebutton-color;
   cursor: pointer;
 
+  @include disable-mouse-outline;
+
   &:hover,
   &:focus {
     color: $closebutton-color-hover;
@@ -106,6 +107,9 @@ $closebutton-color-hover: $black !default;
 
 @mixin foundation-close-button {
   .close-button {
+    // Use by default the placeholder of the default size
+    @extend %zf-close-button--#{$closebutton-default-size};
+
     @include close-button;
 
     // Generate a placeholder and a class for each size
@@ -120,8 +124,5 @@ $closebutton-color-hover: $black !default;
         @extend %zf-close-button--#{$name};
       }
     }
-
-    // Use by default the placeholder of the default size
-    @extend %zf-close-button--#{$closebutton-default-size};
   }
 }

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

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////

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

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -107,7 +107,7 @@ $dropdown-menu-item-background-active: transparent !default;
         @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
         #{$global-right}: 5px;
         #{$global-left}: auto;
-        margin-top: -1 * ($dropdownmenu-arrow-size / 2);
+        margin-top: -1 * ($dropdownmenu-arrow-size * 0.5);
       }
     }
   }

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

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////

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

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////

data/vendor/assets/scss/components/_float.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////

data/vendor/assets/scss/components/_label.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -55,7 +55,7 @@ $label-radius: $global-radius !default;
     color: $label-color;
 
     @each $name, $color in $label-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         background: $color;
         color: color-pick-contrast($color, ($label-color, $label-color-alt));
       }

data/vendor/assets/scss/components/_media-object.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////

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

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -38,12 +38,12 @@ $menu-item-background-active: get-color(primary) !default;
 /// @type Number
 $menu-icon-spacing: 0.25rem !default;
 
-/// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`. 
+/// 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`. 
+/// 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;
@@ -258,6 +258,33 @@ $menu-icons-back-compat: true !default;
   }
 }
 
+/// Align top/bottom icons within a menu.
+/// @param {Keyword} $alignment [center] - Alignment of the icon
+@mixin menu-icon-alignment($alignment: center) {
+  @if $global-flexbox {
+    &.icon-top,
+    &.icon-bottom {
+      li a {
+        img,
+        i,
+        svg {
+          @if $alignment == left {
+            text-align: left;
+          }
+
+          @else if $alignment == right {
+            text-align: right;
+          }
+
+          @else {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+
 /// Adds position classes for icons within a menu.
 @mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {
   @if $position == left {
@@ -369,11 +396,13 @@ $menu-icons-back-compat: true !default;
     // Vertical orientation modifier
     &.vertical {
       @include menu-direction(vertical);
+      @include menu-icon-alignment(left);
     }
 
     // Even-width modifier for horizontal orientation
     &.expanded {
       @include menu-expand;
+      @include menu-icon-alignment(left);
     }
 
     // Simple
@@ -420,31 +449,36 @@ $menu-icons-back-compat: true !default;
       }
     }
 
-    // Icon Left
-    &.icon-left {
-      @include menu-icon-position(left);
-    }
+    // Menu icon position
+    // Includes specificity to nested icons with a different position
+    &,
+    &.nested {
+      // Icon Left
+      &.icon-left {
+        @include menu-icon-position(left);
+      }
 
-    // Icon Right
-    &.icon-right {
-      @include menu-icon-position(right);
-    }
+      // Icon Right
+      &.icon-right {
+        @include menu-icon-position(right);
+      }
 
-    // Icon Top
-    &.icon-top {
-      @include menu-icon-position(top);
-    }
+      // Icon Top
+      &.icon-top {
+        @include menu-icon-position(top);
+      }
 
-    // Icon Bottom
-    &.icon-bottom {
-      @include menu-icon-position(bottom);
+      // Icon Bottom
+      &.icon-bottom {
+        @include menu-icon-position(bottom);
+      }
     }
 
     // Active state
     .is-active > a {
       @include menu-state-active;
     }
-    
+
     // Backward Compatibility for active state
     @if $menu-state-back-compat {
       .active > a {
@@ -460,6 +494,7 @@ $menu-icons-back-compat: true !default;
     // Align right
     &.align-#{$global-right} {
       @include menu-align(right);
+      @include menu-icon-alignment(right);
 
       .nested {
         @include menu-nested($nested-alignment: right);
@@ -482,7 +517,7 @@ $menu-icons-back-compat: true !default;
         @if $global-flexbox {
           justify-content: center;
         }
-        
+
         @include menu-align(center);
       }
     }

data/vendor/assets/scss/components/_off-canvas.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -143,7 +143,11 @@ $maincontent-class: 'off-canvas-content' !default;
   $transition: $offcanvas-transition-length $offcanvas-transition-timing,
   $fixed: true
 ) {
-  @include disable-mouse-outline;
+  // Set the off-canvas z-index.
+  z-index: $offcanvas-push-zindex;
+  transition: transform $transition;
+  backface-visibility: hidden;
+  background: $background;
 
   @if $fixed == true {
     position: fixed;
@@ -152,19 +156,13 @@ $maincontent-class: 'off-canvas-content' !default;
     position: absolute;
   }
 
-  // Set the off-canvas z-index.
-  z-index: $offcanvas-push-zindex;
+  @include disable-mouse-outline;
 
   // Increase CSS specificity
   &.is-transition-push {
     z-index: $offcanvas-push-zindex;
   }
 
-  transition: transform $transition;
-  backface-visibility: hidden;
-
-  background: $background;
-
   // Hide inactive off-canvas within the content that have the same position
   &.is-closed {
     visibility: hidden;
@@ -196,6 +194,7 @@ $maincontent-class: 'off-canvas-content' !default;
     left: 0;
     height: 100%;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     @each $name, $size in $sizes {
       @include breakpoint($name) {
@@ -233,6 +232,7 @@ $maincontent-class: 'off-canvas-content' !default;
     right: 0;
     height: 100%;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     @each $name, $size in $sizes {
       @include breakpoint($name) {
@@ -270,6 +270,7 @@ $maincontent-class: 'off-canvas-content' !default;
     left: 0;
     width: 100%;
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
 
     @each $name, $size in $sizes {
       @include breakpoint($name) {
@@ -306,6 +307,7 @@ $maincontent-class: 'off-canvas-content' !default;
     left: 0;
     width: 100%;
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
 
     @each $name, $size in $sizes {
       @include breakpoint($name) {
@@ -383,10 +385,10 @@ $maincontent-class: 'off-canvas-content' !default;
 
 /// Adds styles that reveal an off-canvas panel.
 @mixin off-canvas-reveal(
-$position: left,
-$zindex: $offcanvas-reveal-zindex,
-$content: $maincontent-class,
-$breakpoint: small
+  $position: left,
+  $zindex: $offcanvas-reveal-zindex,
+  $content: $maincontent-class,
+  $breakpoint: small
 ) {
   transform: none;
   z-index: $zindex;
@@ -453,10 +455,10 @@ $breakpoint: small
     @include off-canvas-base;
 
     // Force position absolute for nested off-canvas because fixed doesn't work for push transition within the transform scope.
-    @at-root .#{$maincontent-class} & {
-      // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
-      // position: absolute;
-    }
+    // @at-root .#{$maincontent-class} & {
+    //   // NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
+    //   position: absolute;
+    // }
   }
 
   // Off-canvas container with absolute position

data/vendor/assets/scss/components/_orbit.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -102,11 +102,11 @@ $orbit-control-zindex: 10 !default;
 
 /// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.
 @mixin orbit-control {
-  @include disable-mouse-outline;
-  @include vertical-center;
   z-index: $orbit-control-zindex;
   padding: $orbit-control-padding;
   color: $white;
+  @include vertical-center;
+  @include disable-mouse-outline;
 
   &:hover,
   &:active,
@@ -128,11 +128,11 @@ $orbit-control-zindex: 10 !default;
 
 /// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class.
 @mixin orbit-bullets {
-  @include disable-mouse-outline;
   position: relative;
   margin-top: $orbit-bullet-margin-top;
   margin-bottom: $orbit-bullet-margin-bottom;
   text-align: center;
+  @include disable-mouse-outline;
 
   button {
     width: $orbit-bullet-diameter;

data/vendor/assets/scss/components/_pagination.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -83,9 +83,9 @@ $pagination-arrow-next: '\00BB' !default;
   $padding: $pagination-item-padding,
   $background-hover: $pagination-item-background-hover
 ) {
-  @include clearfix;
   margin-#{$global-left}: 0;
   margin-bottom: $margin-bottom;
+  @include clearfix;
 
   // List item
   li {

data/vendor/assets/scss/components/_progress-bar.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 /// Adds styles for a progress bar container.
@@ -43,7 +43,7 @@
     @include progress-container;
 
     @each $name, $color in $foundation-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         .progress-meter {
           background-color: $color;
         }

data/vendor/assets/scss/components/_responsive-embed.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -46,7 +46,7 @@ $responsive-embed-ratios: (
   .flex-video {
     @include responsive-embed($ratio: default);
 
-    $ratios: map-remove($responsive-embed-ratios,default);
+    $ratios: map-remove($responsive-embed-ratios, default);
 
     @each $name, $ratio in $ratios {
       &.#{$name} {

data/vendor/assets/scss/components/_reveal.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -64,11 +64,11 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   display: none;
   background-color: $background;
   overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 /// Adds base styles for a modal.
 @mixin reveal-modal-base {
-  @include disable-mouse-outline;
   z-index: $reveal-zindex + 1;
   // Workaround android browser z-index bug
   backface-visibility: hidden;
@@ -80,6 +80,8 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   border-radius: $reveal-radius;
   background-color: $reveal-background;
 
+  @include disable-mouse-outline;
+
   @include breakpoint(medium) {
     min-height: 0;
   }
@@ -137,6 +139,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
     &.zf-has-scroll {
       overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
     }
 
     body { // sass-lint:disable-line no-qualifying-elements
@@ -151,13 +154,15 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
   // Modal container
   .reveal {
-    @include reveal-modal-base;
-    @include reveal-modal-width($reveal-width);
     position: relative;
     top: 100px;
     margin-right: auto;
     margin-left: auto;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+
+    @include reveal-modal-base;
+    @include reveal-modal-width($reveal-width);
 
     // Remove padding
     &.collapse {

data/vendor/assets/scss/components/_slider.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 // [TODO] Check how plugin confirms disabled or vertical status
@@ -50,10 +50,9 @@ $slider-transition: all 0.2s ease-in-out !default;
 
 /// Adds the general styles for the slider handles.
 @mixin slider-handle {
-  @include disable-mouse-outline;
-  @include vertical-center;
   left: 0;
   z-index: 1;
+  cursor: grab;
 
   display: inline-block;
   width: $slider-handle-width;
@@ -64,12 +63,16 @@ $slider-transition: all 0.2s ease-in-out !default;
   transition: $slider-transition;
   touch-action: manipulation;
 
+  @include vertical-center;
+  @include disable-mouse-outline;
+
   &:hover {
     background-color: scale-color($slider-handle-background, $lightness: -15%);
   }
 
   &.is-dragging {
     transition: all 0s linear;
+    cursor: grabbing;
   }
 }
 

data/vendor/assets/scss/components/_sticky.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 @mixin foundation-sticky {

data/vendor/assets/scss/components/_switch.scss

@@ -1,5 +1,5 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
+// Foundation for Sites
+// https://get.foundation
 // Licensed under MIT Open Source
 
 ////
@@ -10,10 +10,18 @@
 /// @type Color
 $switch-background: $medium-gray !default;
 
+/// Background color of a switch on focus.
+/// @type Color
+$switch-background-focus: scale-color($switch-background, $lightness: -10%) !default;
+
 /// Background active color of a switch.
 /// @type Color
 $switch-background-active: $primary-color !default;
 
+/// Background active color of a switch on focus.
+/// @type Color
+$switch-background-active-focus: scale-color($switch-background-active, $lightness: -15%) !default;
+
 /// Height of a switch, with no class applied.
 /// @type Number
 $switch-height: 2rem !default;
@@ -56,7 +64,7 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
 /// Opacity of a disabled switch.
 /// @type Number
-$switch-opacity-disabled: .5 !default;
+$switch-opacity-disabled: 0.5 !default;
 
 /// Cursor for a disabled switch.
 /// @type Cursor
@@ -140,6 +148,21 @@ $switch-cursor-disabled: not-allowed !default;
     }
   }
 
+
+  // Change the visual style when the switch is focused
+  input:focus-visible ~ & {
+    background: $switch-background-focus;
+
+    &::after {
+      background: $switch-paddle-background;
+    }
+  }
+
+  input:checked:focus-visible ~ & {
+    background: $switch-background-active-focus;
+  }
+
+
   // indicate a disabled switch
   input:disabled ~ & {
     cursor: $switch-cursor-disabled;
@@ -215,8 +238,8 @@ $switch-cursor-disabled: not-allowed !default;
 @mixin foundation-switch {
   // Container class
   .switch {
-    height: $switch-height;
     @include switch-container;
+    height: $switch-height;
   }
 
   // <input> element