foundation-rails 6.2.4.0 → 6.3.0.0

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

@@ -58,15 +58,15 @@ $orbit-control-zindex: 10 !default;
 /// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class.
 @mixin orbit-container {
   position: relative;
+  height: 0; // Prevent FOUC by not showing until JS sets height
   margin: 0;
-  overflow: hidden;
   list-style: none;
+  overflow: hidden;
 }
 
 /// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
 @mixin orbit-slide {
   width: 100%;
-  max-height: 100%;
 
   &.no-motionui {
     &.is-active {
@@ -82,9 +82,9 @@ $orbit-control-zindex: 10 !default;
 
 /// Adds styles for a slide containing an image. These styles are used on the `.orbit-image` class.
 @mixin orbit-image {
-  margin: 0;
   width: 100%;
   max-width: 100%;
+  margin: 0;
 }
 
 /// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class.
@@ -92,10 +92,11 @@ $orbit-control-zindex: 10 !default;
   position: absolute;
   bottom: 0;
   width: 100%;
-  padding: $orbit-caption-padding;
   margin-bottom: 0;
-  color: foreground($orbit-caption-background);
+  padding: $orbit-caption-padding;
+
   background-color: $orbit-caption-background;
+  color: color-pick-contrast($orbit-caption-background);
 }
 
 /// 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.
@@ -136,8 +137,9 @@ $orbit-control-zindex: 10 !default;
     width: $orbit-bullet-diameter;
     height: $orbit-bullet-diameter;
     margin: $orbit-bullet-margin;
-    background-color: $orbit-bullet-background;
+
     border-radius: 50%;
+    background-color: $orbit-bullet-background;
 
     &:hover {
       background-color: $orbit-bullet-background-active;

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

@@ -40,7 +40,7 @@ $pagination-item-background-current: $primary-color !default;
 
 /// Text color of the pagination item for the current page.
 /// @type Color
-$pagination-item-color-current: foreground($pagination-item-background-current) !default;
+$pagination-item-color-current: $white !default;
 
 /// Text color of a disabled pagination item.
 /// @type Color
@@ -55,7 +55,9 @@ $pagination-ellipsis-color: $black !default;
 /// @type Boolean
 $pagination-mobile-items: false !default;
 
-/// If `false`, don't display current page number on mobile.
+/// If `true`, display the current page number on mobile even if `$pagination-mobile-items` is set to `false`.
+/// This parameter will only override the visibility setting of the current item for `$pagination-mobile-items: false;`,
+/// it will not affect the current page number visibility when `$pagination-mobile-items` is set to `true`.
 /// @type Boolean
 $pagination-mobile-current-item: false !default;
 
@@ -64,16 +66,24 @@ $pagination-mobile-current-item: false !default;
 $pagination-arrows: true !default;
 
 /// Adds styles for a pagination container. Apply this to a `<ul>`.
-@mixin pagination-container {
+@mixin pagination-container (
+  $margin-bottom: $pagination-margin-bottom,
+  $font-size: $pagination-font-size,
+  $spacing: $pagination-item-spacing,
+  $radius: $pagination-radius,
+  $color: $pagination-item-color,
+  $padding: $pagination-item-padding,
+  $background-hover: $pagination-item-background-hover
+) {
   @include clearfix;
   margin-#{$global-left}: 0;
-  margin-bottom: $pagination-margin-bottom;
+  margin-bottom: $margin-bottom;
 
   // List item
   li {
-    font-size: $pagination-font-size;
-    margin-#{$global-right}: $pagination-item-spacing;
-    border-radius: $pagination-radius;
+    margin-#{$global-right}: $spacing;
+    border-radius: $radius;
+    font-size: $font-size;
 
     @if $pagination-mobile-items {
       display: inline-block;
@@ -101,29 +111,36 @@ $pagination-arrows: true !default;
   // Page links
   a,
   button {
-    color: $pagination-item-color;
     display: block;
-    padding: $pagination-item-padding;
+    padding: $padding;
     border-radius: $global-radius;
+    color: $color;
 
     &:hover {
-      background: $pagination-item-background-hover;
+      background: $background-hover;
     }
   }
 }
 
 /// Adds styles for the current pagination item. Apply this to an `<a>`.
-@mixin pagination-item-current {
-  padding: $pagination-item-padding;
-  background: $pagination-item-background-current;
-  color: $pagination-item-color-current;
+@mixin pagination-item-current (
+  $padding: $pagination-item-padding,
+  $background-current: $pagination-item-background-current,
+  $color-current: $pagination-item-color-current
+) {
+  padding: $padding;
+  background: $background-current;
+  color: $color-current;
   cursor: default;
 }
 
 /// Adds styles for a disabled pagination item. Apply this to an `<a>`.
-@mixin pagination-item-disabled {
-  padding: $pagination-item-padding;
-  color: $pagination-item-color-disabled;
+@mixin pagination-item-disabled (
+  $padding: $pagination-item-padding,
+  $color: $pagination-item-color-disabled
+) {
+  padding: $padding;
+  color: $color;
   cursor: not-allowed;
 
   &:hover {
@@ -132,10 +149,13 @@ $pagination-arrows: true !default;
 }
 
 /// Adds styles for an ellipsis for use in a pagination list.
-@mixin pagination-ellipsis {
+@mixin pagination-ellipsis (
+  $padding: $pagination-item-padding,
+  $color: $pagination-ellipsis-color
+) {
+  padding: $padding;
   content: '\2026';
-  padding: $pagination-item-padding;
-  color: $pagination-ellipsis-color;
+  color: $color;
 }
 
 @mixin foundation-pagination {
@@ -158,16 +178,16 @@ $pagination-arrows: true !default;
   @if $pagination-arrows {
     .pagination-previous a::before,
     .pagination-previous.disabled::before {
-      content: '\00ab';
       display: inline-block;
       margin-#{$global-right}: 0.5rem;
+      content: '\00ab';
     }
 
     .pagination-next a::after,
     .pagination-next.disabled::after {
-      content: '\00bb';
       display: inline-block;
       margin-#{$global-left}: 0.5rem;
+      content: '\00bb';
     }
   }
 }

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

@@ -4,10 +4,10 @@
 
 /// Adds styles for a progress bar container.
 @mixin progress-container {
-  background-color: $progress-background;
   height: $progress-height;
   margin-bottom: $progress-margin-bottom;
   border-radius: $progress-radius;
+  background-color: $progress-background;
 }
 
 /// Adds styles for the inner meter of a progress bar.

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

@@ -0,0 +1,66 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group responsive-embed
+////
+
+/// Margin below a responsive embed container.
+/// @type Number
+$responsive-embed-margin-bottom: rem-calc(16) !default;
+
+/// Aspect ratios used to determine padding-bottom of responsive embed containers.
+/// @type Map
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  widescreen: 16 by 9,
+) !default;
+
+/// Creates a responsive embed container.
+/// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
+@mixin responsive-embed($ratio: default) {
+  @if type-of($ratio) == 'string' {
+    $ratio: map-get($responsive-embed-ratios, $ratio);
+  }
+  position: relative;
+  height: 0;
+  margin-bottom: $responsive-embed-margin-bottom;
+  padding-bottom: ratio-to-percentage($ratio);
+  overflow: hidden;
+
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@mixin foundation-responsive-embed {
+  .responsive-embed, .flex-video {
+    @include responsive-embed($ratio: default);
+
+    $ratios: map-remove($responsive-embed-ratios,default);
+
+    @each $name, $ratio in $ratios {
+      &.#{$name} {
+        padding-bottom: ratio-to-percentage($ratio);
+      }
+    }
+  }
+}
+
+@mixin foundation-flex-video {
+  @warn 'This mixin is being replaced by foundation-responsive-embed(). foundation-flex-video() will be removed in Foundation 6.4.';
+  @include foundation-responsive-embed;
+}
+
+@mixin flex-video($ratio: $responsive-embed-ratio) {
+  @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
+  @include responsive-embed;
+}

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

@@ -41,13 +41,14 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 /// Adds styles for a modal overlay.
 /// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay.
 @mixin reveal-overlay($background: $reveal-overlay-background) {
-  display: none;
   position: fixed;
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
   z-index: $reveal-zindex;
+
+  display: none;
   background-color: $background;
   overflow-y: scroll;
 }
@@ -55,12 +56,16 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 /// Adds base styles for a modal.
 @mixin reveal-modal-base {
   @include disable-mouse-outline;
-  display: none;
   z-index: $reveal-zindex + 1;
+  // Workaround android browser z-index bug
+  backface-visibility: hidden;
+
+  display: none;
   padding: $reveal-padding;
+
   border: $reveal-border;
-  background-color: $reveal-background;
   border-radius: $reveal-radius;
+  background-color: $reveal-background;
 
   @include breakpoint(medium) {
     min-height: 0;
@@ -94,25 +99,26 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
 /// Creates a full-screen modal, which stretches the full width and height of the window.
 @mixin reveal-modal-fullscreen {
-  // scss-lint:disable DuplicateProperty
   top: 0;
   left: 0;
+
   width: 100%;
+  max-width: none;
   height: 100%;
-  height: 100vh;
+  height: 100vh; // sass-lint:disable-line no-duplicate-properties
   min-height: 100vh;
-  max-width: none;
   margin-left: 0;
+
   border: 0;
   border-radius: 0;
 }
 
 @mixin foundation-reveal {
   // [TODO] Is this necessary?
-  // scss-lint:disable QualifyingElement
-  body.is-reveal-open {
+  body.is-reveal-open { // sass-lint:disable-line no-qualifying-elements
     overflow: hidden;
   }
+
   // html gets this class only in iOS
   html.is-reveal-open,
   html.is-reveal-open body {
@@ -132,16 +138,16 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
     @include reveal-modal-width($reveal-width);
     position: relative;
     top: 100px;
-    margin-left: auto;
     margin-right: auto;
+    margin-left: auto;
     overflow-y: auto;
 
     // Placeholder selector for medium-and-up modals
     // Prevents duplicate CSS when defining multiple Reveal sizes
     @include breakpoint(medium) {
       %reveal-centered {
-        left: auto;
         right: auto;
+        left: auto;
         margin: 0 auto;
       }
     }

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

@@ -23,6 +23,7 @@ $slider-transition: all 0.2s ease-in-out !default;
   height: $slider-height;
   margin-top: 1.25rem;
   margin-bottom: 2.25rem;
+
   background-color: $slider-background;
   cursor: pointer;
   user-select: none;
@@ -34,9 +35,11 @@ $slider-transition: all 0.2s ease-in-out !default;
   position: absolute;
   top: 0;
   left: 0;
+
   display: inline-block;
   max-width: 100%;
   height: $slider-height;
+
   background-color: $slider-fill-background;
   transition: $slider-transition;
 
@@ -52,13 +55,15 @@ $slider-transition: all 0.2s ease-in-out !default;
   position: absolute;
   left: 0;
   z-index: 1;
+
   display: inline-block;
   width: $slider-handle-width;
   height: $slider-handle-height;
+
+  border-radius: $slider-radius;
   background-color: $slider-handle-background;
   transition: $slider-transition;
   touch-action: manipulation;
-  border-radius: $slider-radius;
 
   &:hover {
     background-color: scale-color($slider-handle-background, $lightness: -15%);

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

@@ -8,7 +8,7 @@
   }
 
   .sticky {
-    position: absolute;
+    position: relative;
     z-index: 0;
     transform: translate3d(0, 0, 0);
   }
@@ -27,9 +27,9 @@
   }
 
   .sticky.is-anchored {
-    position: absolute;
-    left: auto;
+    position: relative;
     right: auto;
+    left: auto;
 
     &.is-at-bottom {
       bottom: 0;

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

@@ -60,38 +60,46 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
 /// Adds styles for a switch container. Apply this to a container class.
 @mixin switch-container {
+  position: relative;
   margin-bottom: $switch-margin;
   outline: 0;
-  position: relative;
-  user-select: none;
 
   // These properties cascade down to the switch text
-  color: $white;
-  font-weight: bold;
   font-size: rem-calc(14);
+  font-weight: bold;
+  color: $white;
+
+  user-select: none;
 }
 
 /// Adds styles for a switch input. Apply this to an `<input>` within a switch.
 @mixin switch-input {
-  opacity: 0;
   position: absolute;
   margin-bottom: 0;
+  opacity: 0;
 }
 
 /// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
 @mixin switch-paddle {
-  background: $switch-background;
-  cursor: pointer;
-  display: block;
+  $switch-width: $switch-height * 2;
+  $paddle-height: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-width: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset;
+
   position: relative;
-  width: 4rem;
+  display: block;
+  width: $switch-width;
   height: $switch-height;
-  transition: $switch-paddle-transition;
+
   border-radius: $switch-radius;
+  background: $switch-background;
+  transition: $switch-paddle-transition;
 
   // Resetting these <label> presets so type styles cascade down
-  color: inherit;
   font-weight: inherit;
+  color: inherit;
+
+  cursor: pointer;
 
   // Needed to override specificity
   input + & {
@@ -100,17 +108,19 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
   // The paddle itself
   &::after {
-    background: $switch-paddle-background;
-    content: '';
-    display: block;
     position: absolute;
-    height: 1.5rem;
-    #{$global-left}: 0.25rem;
-    top: 0.25rem;
-    width: 1.5rem;
-    transition: $switch-paddle-transition;
+    top: $switch-paddle-offset;
+    #{$global-left}: $switch-paddle-offset;
+
+    display: block;
+    width: $paddle-width;
+    height: $paddle-height;
+
     transform: translate3d(0, 0, 0);
     border-radius: $switch-paddle-radius;
+    background: $switch-paddle-background;
+    transition: $switch-paddle-transition;
+    content: '';
   }
 
   // Change the visual style when the switch is active
@@ -118,7 +128,7 @@ $switch-paddle-transition: all 0.25s ease-out !default;
     background: $switch-background-active;
 
     &::after {
-      #{$global-left}: 2.25rem;
+      #{$global-left}: $paddle-active-offest;
     }
   }
 
@@ -155,35 +165,36 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
 /// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
 /// @param {Number} $font-size [1rem] - Font size of label text within the switch.
-/// @param {Number} $width [4rem] - Width of the switch body.
-/// @param {Number} $height [2rem] - Height of the switch body.
-/// @param {Number} $paddle-width [1.5rem] - Width of the switch paddle.
+/// @param {Number} $switch-height [2rem] - Height of the switch body.
 /// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
 @mixin switch-size(
   $font-size: 1rem,
-  $width: 4rem,
-  $height: 2rem,
-  $paddle-width: 1.5rem,
+  $switch-height: 2rem,
   $paddle-offset: 0.25rem
 ) {
-  $paddle-height: $height - ($paddle-offset * 2);
-  $paddle-left-active: $width - $paddle-width - $paddle-offset;
 
-  height: $height;
-  
+  $switch-width: $switch-height * 2;
+  $paddle-width: $switch-height - ($paddle-offset * 2);
+  $paddle-height: $switch-height - ($paddle-offset * 2);
+  $paddle-active-offest: $switch-width - $paddle-width - $paddle-offset;
+
+  height: $switch-height;
+
   .switch-paddle {
-    width: $width;
-    height: $height;
+    width: $switch-width;
+    height: $switch-height;
     font-size: $font-size;
   }
 
   .switch-paddle::after {
+    top: $paddle-offset;
+    #{$global-left}: $paddle-offset;
     width: $paddle-width;
     height: $paddle-height;
   }
 
   input:checked ~ .switch-paddle::after {
-    #{$global-left}: $paddle-left-active;
+    #{$global-left}: $paddle-active-offest;
   }
 }
 
@@ -223,14 +234,14 @@ $switch-paddle-transition: all 0.25s ease-out !default;
 
   // Switch sizes
   .switch.tiny {
-    @include switch-size(rem-calc(10), 3rem, $switch-height-tiny, 1rem, $switch-paddle-offset);
+    @include switch-size(rem-calc(10), $switch-height-tiny, $switch-paddle-offset);
   }
 
   .switch.small {
-    @include switch-size(rem-calc(12), 3.5rem, $switch-height-small, 1.25rem, $switch-paddle-offset);
+    @include switch-size(rem-calc(12), $switch-height-small, $switch-paddle-offset);
   }
 
   .switch.large {
-    @include switch-size(rem-calc(16), 5rem, $switch-height-large, 2rem, $switch-paddle-offset);
+    @include switch-size(rem-calc(16), $switch-height-large, $switch-paddle-offset);
   }
 }