foundation-rails 6.6.2.0 → 6.9.0.0

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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/_switch.scss

@@ -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

data/vendor/assets/scss/components/_table.scss

@@ -8,6 +8,8 @@
 /// @group table
 ////
 
+@use "sass:color";
+
 /// Default color for table background.
 /// @type Color
 $table-background: $white  !default;
@@ -30,11 +32,11 @@ $table-hover-scale: 2% !default;
 
 /// Default color of standard rows on hover.
 /// @type List
-$table-row-hover: darken($table-background, $table-hover-scale) !default;
+$table-row-hover: color.adjust($table-background, $lightness: -$table-hover-scale) !default;
 
 /// Default color of striped rows on hover.
 /// @type List
-$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
+$table-row-stripe-hover: color.adjust($table-background, $lightness: -($table-color-scale + $table-hover-scale)) !default;
 
 /// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
 /// @type Boolean
@@ -50,11 +52,11 @@ $table-stripe: even !default;
 
 /// Default color for header background.
 /// @type Color
-$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
+$table-head-background: smart-scale($table-background, $table-color-scale * 0.5) !default;
 
 /// Default color of header rows on hover.
 /// @type List
-$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
+$table-head-row-hover: color.adjust($table-head-background, $lightness: -$table-hover-scale) !default;
 
 /// Default color for footer background.
 /// @type Color
@@ -62,7 +64,7 @@ $table-foot-background: smart-scale($table-background, $table-color-scale) !defa
 
 /// Default color of footer rows on hover.
 /// @type List
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;
+$table-foot-row-hover: color.adjust($table-foot-background, $lightness: -$table-hover-scale) !default;
 
 /// Default font color for header.
 /// @type Color
@@ -101,7 +103,6 @@ $table-stack-breakpoint: medium !default;
 
 @mixin -zf-table-unstripe() {
   tr {
-    border-bottom: 0;
     border-bottom: $table-border;
     background-color: $table-background;
   }
@@ -166,8 +167,8 @@ $table-stack-breakpoint: medium !default;
 
     &.unstriped {
       tbody {
-        @include -zf-table-unstripe();
         background-color: $table-background;
+        @include -zf-table-unstripe();
       }
     }
   }

data/vendor/assets/scss/components/_tabs.scss

@@ -59,11 +59,11 @@ $tab-content-padding: 1rem !default;
   $background: $tab-background,
   $border-color: $tab-content-border
 ) {
-  @include clearfix;
   margin: $margin;
   border: 1px solid $border-color;
   background: $background;
   list-style-type: none;
+  @include clearfix;
 }
 
 /// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
@@ -87,12 +87,12 @@ $tab-content-padding: 1rem !default;
   float: #{$global-left};
 
   > a {
-    @include disable-mouse-outline;
     display: block;
     padding: $padding;
     font-size: $font-size;
     line-height: 1;
     color: $color;
+    @include disable-mouse-outline;
 
     &:hover {
       background: $background-hover;

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

@@ -32,6 +32,8 @@ $topbar-unstack-breakpoint: medium !default;
 
 /// Adds styles for a top bar container.
 @mixin top-bar-container {
+  padding: $topbar-padding;
+
   @if $global-flexbox {
     display: flex;
     flex-wrap: nowrap;
@@ -42,8 +44,6 @@ $topbar-unstack-breakpoint: medium !default;
     @include clearfix;
   }
 
-  padding: $topbar-padding;
-
   &,
   ul {
     background-color: $topbar-background;
@@ -118,13 +118,15 @@ $topbar-unstack-breakpoint: medium !default;
 }
 
 @mixin foundation-top-bar {
-  // Top bar container
   .top-bar {
     @include top-bar-container;
-
+  }
+  .top-bar {
     // Stack on small screens by default
     @include top-bar-stacked;
-
+  }
+  // Top bar container
+  .top-bar {
     @include breakpoint($topbar-unstack-breakpoint) {
       @include top-bar-unstack;
     }

data/vendor/assets/scss/components/_visibility.scss

@@ -9,7 +9,7 @@
   // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
   // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
   // See https://github.com/foundation/foundation-sites/issues/11313
-  $size: -zf-bp-to-em($size) - .00125;
+  $size: -zf-bp-to-em($size) - 0.00125;
 
   @include breakpoint($size down) {
     display: none !important;
@@ -23,7 +23,7 @@
   $upper-bound-size: -zf-map-next($breakpoints, $size);
 
   // more often than not this will be correct, just one time round the loop it won't so set in scope here
-  $lower-bound: -zf-bp-to-em($lower-bound-size) - .00125;
+  $lower-bound: -zf-bp-to-em($lower-bound-size) - 0.00125;
   // test actual lower-bound-size, if 0 set it to 0em
   @if strip-unit($lower-bound-size) == 0 {
     $lower-bound: -zf-bp-to-em($lower-bound-size);
@@ -69,6 +69,9 @@
   .invisible {
     visibility: hidden;
   }
+  .visible {
+    visibility: visible;
+  }
 
   // Responsive visibility classes
   @each $size in $breakpoint-classes {
@@ -132,4 +135,44 @@
       display: block !important;
     }
   }
+
+  // Dark Mode Visibility
+  .show-for-dark-mode {
+    display: none;
+  }
+  .hide-for-dark-mode {
+    display: block;
+  }
+  @media screen and (prefers-color-scheme: dark) {
+    .show-for-dark-mode {
+      display: block !important;
+    }
+    .hide-for-dark-mode {
+      display: none !important;
+    }
+  }
+
+  // IE10+ Visibility
+  .show-for-ie {
+    display: none;
+  }
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .show-for-ie {
+      display: block !important;
+    }
+    .hide-for-ie {
+      display: none !important;
+    }
+  }
+
+  // Sticky Visibility
+  .show-for-sticky {
+    display: none;
+  }
+  .is-stuck .show-for-sticky {
+    display: block;
+  }
+  .is-stuck .hide-for-sticky {
+    display: none;
+  }
 }

data/vendor/assets/scss/forms/_label.scss

@@ -36,7 +36,8 @@ $form-label-line-height: 1.8 !default;
   $input-border-width: get-border-value($input-border, width);
 
   margin: 0 0 $form-spacing;
-  padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;
+  line-height: $global-lineheight;
+  padding: ($form-spacing * 0.5 + rem-calc($input-border-width)) 0;
 }
 
 @mixin foundation-form-label {

data/vendor/assets/scss/forms/_progress.scss

@@ -68,7 +68,7 @@ $progress-radius: $global-radius !default;
     }
 
     @each $name, $color in $foundation-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         // Internet Explorer sets the fill with color
         color: $color;
 

data/vendor/assets/scss/forms/_range.scss

@@ -40,7 +40,7 @@ $slider-radius: $global-radius !default;
 
 @mixin foundation-range-input {
   input[type='range'] {  // sass-lint:disable-line no-qualifying-elements
-    $margin: ($slider-handle-height - $slider-height) / 2;
+    $margin: ($slider-handle-height - $slider-height) * 0.5;
 
     display: block;
     width: 100%;

data/vendor/assets/scss/forms/_select.scss

@@ -36,18 +36,19 @@ $select-radius: $global-radius !default;
   line-height: $input-line-height;
   color: $input-color;
 
+  @if has-value($input-transition) {
+    transition: $input-transition;
+  }
+
   @if $select-triangle-color != transparent {
-    @include background-triangle($select-triangle-color);
     background-origin: content-box;
     background-position: $global-right (-$form-spacing) center;
     background-repeat: no-repeat;
     background-size: 9px 6px;
 
     padding-#{$global-right}: ($form-spacing * 1.5);
-  }
 
-  @if has-value($input-transition) {
-    transition: $input-transition;
+    @include background-triangle($select-triangle-color);
   }
 
   // Focus state