foundation-rails 6.3.1.0 → 6.4.1.0

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

@@ -18,21 +18,33 @@ $offcanvas-vertical-size: 250px !default;
 /// @type Color
 $offcanvas-background: $light-gray !default;
 
-/// Box shadow for the off-canvas panel.
+/// Box shadow for the off-canvas overlap panel.
 /// @type Shadow
 $offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default;
 
+/// Inner box shadow size for the off-canvas push panel.
+/// @type Number
+$offcanvas-inner-shadow-size: 20px !default;
+
+/// Inner box shadow color for the off-canvas push panel.
+/// @type Color
+$offcanvas-inner-shadow-color: rgba($black, 0.25) !default;
+
+/// Z-index of an off-canvas content overlay.
+/// @type Number
+$offcanvas-overlay-zindex: 11 !default;
+
 /// Z-index of an off-canvas panel with the `push` transition.
 /// @type Number
-$offcanvas-push-zindex: 1 !default;
+$offcanvas-push-zindex: 12 !default;
 
 /// Z-index of an off-canvas panel with the `overlap` transition.
 /// @type Number
-$offcanvas-overlap-zindex: 10 !default;
+$offcanvas-overlap-zindex: 13 !default;
 
 /// Z-index of an off-canvas panel using the `reveal-for-*` classes or mixin.
 /// @type Number
-$offcanvas-reveal-zindex: 1 !default;
+$offcanvas-reveal-zindex: 12 !default;
 
 /// Length of the animation on an off-canvas panel.
 /// @type Number
@@ -55,6 +67,13 @@ $maincontent-class: 'off-canvas-content' !default;
 
 /// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
 @mixin off-canvas-basics {
+
+  // Checks the z-indexes and increase them due to backwards compatibility.
+  // This is necessary because the overlay's z-index is new since v6.4 and may be identical to the user custom settings of the push z-index.
+  @if $offcanvas-push-zindex <= $offcanvas-overlay-zindex { $offcanvas-push-zindex: $offcanvas-overlay-zindex + 1 !global; }
+  @if $offcanvas-overlap-zindex <= $offcanvas-push-zindex { $offcanvas-overlap-zindex: $offcanvas-push-zindex + 1 !global; }
+  @if $offcanvas-reveal-zindex <= $offcanvas-overlay-zindex { $offcanvas-reveal-zindex: $offcanvas-overlay-zindex + 1 !global; }
+
   // Hides overflow on body when an off-canvas panel is open.
   .is-off-canvas-open {
     overflow: hidden;
@@ -65,6 +84,7 @@ $maincontent-class: 'off-canvas-content' !default;
     position: absolute;
     top: 0;
     left: 0;
+    z-index: $offcanvas-overlay-zindex;
 
     width: 100%;
     height: 100%;
@@ -118,13 +138,24 @@ $maincontent-class: 'off-canvas-content' !default;
     position: absolute;
   }
 
+  // Set the off-canvas z-index.
   z-index: $offcanvas-push-zindex;
 
+  // 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;
+  }
+
   // Overlap only styles.
   &.is-transition-overlap {
     z-index: $offcanvas-overlap-zindex;
@@ -154,10 +185,20 @@ $maincontent-class: 'off-canvas-content' !default;
 
     transform: translateX(-$size);
     overflow-y: auto;
+    
+    // Sets the position for nested off-canvas element
+    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+      transform: translateX(-$size);
+      &.is-transition-overlap.is-open {
+        transform: translate(0, 0);
+      }
+    }
 
     // Sets the open position for the content
-    &.is-open ~ .#{$maincontent-class} {
-      transform: translateX($size);
+    @at-root .#{$maincontent-class}.is-open-#{$position} {
+      &.has-transition-push {
+        transform: translateX($size);
+      }
     }
   }
   @else if $position == right {
@@ -168,10 +209,20 @@ $maincontent-class: 'off-canvas-content' !default;
 
     transform: translateX($size);
     overflow-y: auto;
+    
+    // Sets the position for nested off-canvas element
+    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+      transform: translateX($size);
+      &.is-transition-overlap.is-open {
+        transform: translate(0, 0);
+      }
+    }
 
     // Sets the open position for the content
-    &.is-open ~ .#{$maincontent-class} {
-      transform: translateX(-$size);
+    @at-root .#{$maincontent-class}.is-open-#{$position} {
+      &.has-transition-push {
+        transform: translateX(-$size);
+      }
     }
   }
   @else if $position == top {
@@ -183,10 +234,20 @@ $maincontent-class: 'off-canvas-content' !default;
 
     transform: translateY(-$size);
     overflow-x: auto;
+    
+    // Sets the position for nested off-canvas element
+    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+      transform: translateY(-$size);
+      &.is-transition-overlap.is-open {
+        transform: translate(0, 0);
+      }
+    }
 
     // Sets the open position for the content
-    &.is-open ~ .#{$maincontent-class} {
-      transform: translateY($size);
+    @at-root .#{$maincontent-class}.is-open-#{$position} {
+      &.has-transition-push {
+        transform: translateY($size);
+      }
     }
   }
   @else if $position == bottom {
@@ -198,63 +259,59 @@ $maincontent-class: 'off-canvas-content' !default;
 
     transform: translateY($size);
     overflow-x: auto;
+    
+    // Sets the position for nested off-canvas element
+    @at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
+      transform: translateY($size);
+      &.is-transition-overlap.is-open {
+        transform: translate(0, 0);
+      }
+    }
 
     // Sets the open position for the content
-    &.is-open ~ .#{$maincontent-class} {
-      transform: translateY(-$size);
+    @at-root .#{$maincontent-class}.is-open-#{$position} {
+      &.has-transition-push {
+        transform: translateY(-$size);
+      }
     }
   }
 
-  // If $offcanvas-shadow is set, add it as a pseudo-element.
+  // If $offcanvas-inner-shadow-size is set, add inner box-shadow.
   // This mimics the off-canvas panel having a lower z-index, without having to have one.
-  @if $offcanvas-shadow {
-    &.is-transition-push::after {
-      position: absolute;
-
+  @if $offcanvas-inner-shadow-size {
+    &.is-transition-push {
       @if $position == left {
-        top: 0;
-        right: 0;
-
-        height: 100%;
-        width: 1px;
+        @include inner-side-shadow(right, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
       }
       @else if $position == right {
-        top: 0;
-        left: 0;
-
-        height: 100%;
-        width: 1px;
+        @include inner-side-shadow(left, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
       }
       @else if $position == top {
-        bottom: 0;
-        left: 0;
-
-        height: 1px;
-        width: 100%;
+        @include inner-side-shadow(bottom, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
       }
       @else if $position == bottom {
-        top: 0;
-        left: 0;
-
-        height: 1px;
-        width: 100%;
+        @include inner-side-shadow(top, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
       }
-
-      box-shadow: $offcanvas-shadow;
-      content: " ";
-    }
+    }    
   }
 
-  // No transform on overlap transition
-  &.is-transition-overlap.is-open ~ .#{$maincontent-class} {
-    transform: none;
-  }
 }
 
 /// Sets the styles for the content container.
 @mixin off-canvas-content() {
+  transform: none;
   transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
   backface-visibility: hidden;
+
+  // Transform scope until the element is closed (makes sure transitionend gets triggered)
+  &.has-transition-push {
+    transform: translate(0, 0);
+  }
+
+  // Consider element & content, nested in another content
+  .off-canvas.is-open {
+    transform: translate(0, 0);
+  }
 }
 
 /// Adds styles that reveal an off-canvas panel.
@@ -265,16 +322,56 @@ $content: $maincontent-class
 ) {
   transform: none;
   z-index: $zindex;
+  transition: none;
+  visibility: visible;
 
   @if not $offcanvas-fixed-reveal {
     position: absolute;
   }
 
+  .close-button {
+    display: none;
+  }
+
+  // Consider revealed element is nested in content
+  .#{$maincontent-class} & {
+    transform: none;
+  }
+
+  @at-root .#{$content}.has-reveal-#{$position} {
+    margin-#{$position}: $offcanvas-size;
+  }
+
+  // backwards compatibility (prior to v6.4)
   & ~ .#{$content} {
     margin-#{$position}: $offcanvas-size;
   }
 }
 
+/// Overrides the off-canvas styles
+@mixin in-canvas() {
+  visibility: visible;
+  height: auto;
+  position: static;
+  background: inherit;
+  width: inherit;
+  overflow: inherit;
+  transition: inherit;
+
+  // Increase CSS specificity
+  &.position-left,
+  &.position-right,
+  &.position-top,
+  &.position-bottom {
+    box-shadow: none;
+    transform: none;
+  }
+
+  .close-button {
+    display: none;
+  }
+}
+
 @mixin foundation-off-canvas {
   @include off-canvas-basics;
 
@@ -286,6 +383,12 @@ $content: $maincontent-class
   // Off-canvas container
   .off-canvas {
     @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;
+    }
   }
 
   // Off-canvas container with absolute position
@@ -325,5 +428,16 @@ $content: $maincontent-class
       }
     }
   }
+
+  // Move in-canvas for larger screens
+  @each $name, $value in $breakpoint-classes {
+    @if $name != $-zf-zero-breakpoint {
+      @include breakpoint($name) {
+        .off-canvas.in-canvas-for-#{$name} {
+          @include in-canvas;
+        }
+      }
+    }
+  }
 }
 

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

@@ -113,7 +113,7 @@ $pagination-arrows: true !default;
   button {
     display: block;
     padding: $padding;
-    border-radius: $global-radius;
+    border-radius: $radius;
     color: $color;
 
     &:hover {

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

@@ -38,6 +38,18 @@ $reveal-zindex: 1005 !default;
 /// @type Color
 $reveal-overlay-background: rgba($black, 0.45) !default;
 
+
+// Placeholder selector for medium-and-up modals
+// Prevents duplicate CSS when defining multiple Reveal sizes
+@include breakpoint(medium) {
+  %reveal-centered {
+    right: auto;
+    left: auto;
+    margin: 0 auto;
+  }
+}
+
+
 /// Adds styles for a modal overlay.
 /// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay.
 @mixin reveal-overlay($background: $reveal-overlay-background) {
@@ -92,7 +104,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   @include breakpoint(medium) {
     @extend %reveal-centered;
     width: $width;
-    max-width: $reveal-max-width;
+    max-width: $max-width;
   }
 }
 
@@ -142,16 +154,6 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
     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 {
-        right: auto;
-        left: auto;
-        margin: 0 auto;
-      }
-    }
-
     // Remove padding
     &.collapse {
       padding: 0;

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

@@ -52,7 +52,6 @@ $slider-transition: all 0.2s ease-in-out !default;
 @mixin slider-handle {
   @include disable-mouse-outline;
   @include vertical-center;
-  position: absolute;
   left: 0;
   z-index: 1;
 

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

@@ -16,6 +16,7 @@
   .sticky.is-stuck {
     position: fixed;
     z-index: 5;
+    width: 100%;
 
     &.is-at-top {
       top: 0;

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

@@ -76,6 +76,10 @@ $table-foot-font-color: $body-font-color !default;
 /// @type Boolean
 $show-header-for-stacked: false !default;
 
+/// Breakpoint at which stacked table switches from mobile to desktop view.
+/// @type Breakpoint
+$table-stack-breakpoint: medium !default;
+
 @mixin -zf-table-stripe($stripe: $table-stripe) {
   tr {
     // If stripe is set to even, darken the even rows.
@@ -188,6 +192,7 @@ $show-header-for-stacked: false !default;
   $stripe: $table-stripe,
   $nest: false
 ) {
+  border-collapse: collapse;
   width: 100%;
   margin-bottom: $global-margin;
   border-radius: $global-radius;
@@ -270,12 +275,8 @@ $show-header-for-stacked: false !default;
 @mixin table-stack($header: $show-header-for-stacked) {
   @if $header {
     thead {
-      th:first-child {
-        display: block;
-      }
-
       th {
-        display: none;
+        display: block;
       }
     }
   }
@@ -306,7 +307,7 @@ $show-header-for-stacked: false !default;
   }
 
   table.stack {
-    @include breakpoint(medium down) {
+    @include breakpoint($table-stack-breakpoint down) {
       @include table-stack;
     }
   }

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

@@ -138,7 +138,7 @@ $tab-content-padding: 1rem !default;
   display: none;
   padding: $padding;
 
-  &[aria-hidden="false"] {
+  &.is-active {
     display: block;
   }
 }