locomotivecms_wagon 2.4.0.rc2 → 2.4.0

data/generators/foundation/public/stylesheets/foundation6/components/_orbit.scss

@@ -58,25 +58,33 @@ $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 {
+      top: 0;
+      left: 0;
+    }
+  }
 }
 
 @mixin orbit-figure {
   margin: 0;
 }
 
+/// 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.
@@ -84,16 +92,17 @@ $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.
 @mixin orbit-control {
   @include disable-mouse-outline;
-  @include v-align-middle;
+  @include vertical-center;
   z-index: $orbit-control-zindex;
   padding: $orbit-control-padding;
   color: $white;
@@ -128,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/generators/foundation/public/stylesheets/foundation6/components/_pagination.scss

@@ -10,7 +10,7 @@
 /// @type Number
 $pagination-font-size: rem-calc(14) !default;
 
-/// Default bottom margin of the media object.
+/// Default bottom margin of the pagination object.
 /// @type Number
 $pagination-margin-bottom: $global-margin !default;
 
@@ -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
@@ -50,33 +50,58 @@ $pagination-item-color-disabled: $medium-gray !default;
 /// @type Color
 $pagination-ellipsis-color: $black !default;
 
-/// If `false`, don't display page number links on mobile, only next/previous links.
+/// If `false`, don't display page number links on mobile, only next/previous links
+/// and optionally current page number.
 /// @type Boolean
 $pagination-mobile-items: false !default;
 
+/// 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;
+
 /// If `true`, arrows are added to the next and previous links of pagination.
 /// @type Boolean
 $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;
-    display: none;
-    border-radius: $pagination-radius;
+    margin-#{$global-right}: $spacing;
+    border-radius: $radius;
+    font-size: $font-size;
+
+    @if $pagination-mobile-items {
+      display: inline-block;
+    }
+    @else {
+      display: none;
 
-    @if not $pagination-mobile-items {
       &:last-child,
       &:first-child {
         display: inline-block;
       }
 
+      @if $pagination-mobile-current-item {
+        &.current {
+          display: inline-block;
+        }
+      }
+
       @include breakpoint(medium) {
         display: inline-block;
       }
@@ -86,49 +111,37 @@ $pagination-arrows: true !default;
   // Page links
   a,
   button {
-    color: $pagination-item-color;
     display: block;
-    padding: $pagination-item-padding;
-    border-radius: $global-radius;
+    padding: $padding;
+    border-radius: $radius;
+    color: $color;
 
     &:hover {
-      background: $pagination-item-background-hover;
-    }
-  }
-
-  // Symbols
-  @if $pagination-arrows {
-    [aria-label="previous"] {
-      &::before {
-        content: '«';
-        display: inline-block;
-        margin-#{$global-right}: 0.75rem;
-      }
-    }
-
-    [aria-label="next"] {
-      &::after {
-        content: '»';
-        display: inline-block;
-        margin-#{$global-left}: 0.75rem;
-      }
+      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;
-  cursor: default;
+@mixin pagination-item-disabled (
+  $padding: $pagination-item-padding,
+  $color: $pagination-item-color-disabled
+) {
+  padding: $padding;
+  color: $color;
+  cursor: not-allowed;
 
   &:hover {
     background: transparent;
@@ -136,10 +149,13 @@ $pagination-arrows: true !default;
 }
 
 /// Adds styles for an ellipsis for use in a pagination list.
-@mixin pagination-ellipsis {
-  content: '…';
-  padding: $pagination-item-padding;
-  color: $pagination-ellipsis-color;
+@mixin pagination-ellipsis (
+  $padding: $pagination-item-padding,
+  $color: $pagination-ellipsis-color
+) {
+  padding: $padding;
+  content: '\2026';
+  color: $color;
 }
 
 @mixin foundation-pagination {
@@ -158,4 +174,20 @@ $pagination-arrows: true !default;
       @include pagination-ellipsis;
     }
   }
+
+  @if $pagination-arrows {
+    .pagination-previous a::before,
+    .pagination-previous.disabled::before {
+      display: inline-block;
+      margin-#{$global-right}: 0.5rem;
+      content: '\00ab';
+    }
+
+    .pagination-next a::after,
+    .pagination-next.disabled::after {
+      display: inline-block;
+      margin-#{$global-left}: 0.5rem;
+      content: '\00bb';
+    }
+  }
 }

data/generators/foundation/public/stylesheets/foundation6/components/_progress-bar.scss

@@ -2,36 +2,12 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-////
-/// @group progress-bar
-////
-
-/// Height of a progress bar.
-/// @type Number
-$progress-height: 1rem !default;
-
-/// Background color of a progress bar.
-/// @type Color
-$progress-background: $medium-gray !default;
-
-/// Bottom margin of a progress bar.
-/// @type Number
-$progress-margin-bottom: $global-margin !default;
-
-/// Default color of a progress bar's meter.
-/// @type Color
-$progress-meter-background: $primary-color !default;
-
-/// Default radius of a progress bar.
-/// @type Number
-$progress-radius: $global-radius !default;
-
 /// 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.
@@ -41,20 +17,25 @@ $progress-radius: $global-radius !default;
   width: 0%;
   height: 100%;
   background-color: $progress-meter-background;
-  border-radius: $global-radius;
+
+  @if has-value($progress-radius) {
+    border-radius: $global-radius;
+  }
 }
 
 /// Adds styles for text in the progress meter.
 @mixin progress-meter-text {
+  @include absolute-center;
   position: absolute;
-  top: 50%;
-  #{$global-left}: 50%;
-  transform: translate(-50%, -50%);
   margin: 0;
   font-size: 0.75rem;
   font-weight: bold;
   color: $white;
   white-space: nowrap;
+
+  @if has-value($progress-radius) {
+    border-radius: $progress-radius;
+  }
 }
 
 @mixin foundation-progress-bar {
@@ -62,7 +43,7 @@ $progress-radius: $global-radius !default;
   .progress {
     @include progress-container;
 
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $foundation-palette {
       &.#{$name} {
         .progress-meter {
           background-color: $color;
@@ -71,13 +52,13 @@ $progress-radius: $global-radius !default;
     }
   }
 
-  // Progress bar meter
+  // Inner meter
   .progress-meter {
     @include progress-meter;
+  }
 
-    // Progress bar meter text
-    .progress-meter-text {
-      @include progress-meter-text;
-    }
+  // Inner meter text
+  .progress-meter-text {
+    @include progress-meter-text;
   }
 }

data/generators/foundation/public/stylesheets/foundation6/components/_responsive-embed.scss

@@ -0,0 +1,70 @@
+// 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;
+
+// WARNING: Will be removed in version 6.4
+$responsive-embed-ratio: 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($ratio);
+}

data/generators/foundation/public/stylesheets/foundation6/components/_reveal.scss

@@ -18,10 +18,6 @@ $reveal-width: 600px !default;
 /// @type Number
 $reveal-max-width: $global-width !default;
 
-/// Offset from the top of the window when a modal is added.
-/// @type Number
-$reveal-offset: rem-calc(100) !default;
-
 /// Default padding inside a modal.
 /// @type Number
 $reveal-padding: $global-padding !default;
@@ -36,45 +32,59 @@ $reveal-radius: $global-radius !default;
 
 /// z-index for modals. The overlay uses this value, while the modal itself uses this value plus one.
 /// @type Number
-$reveal-zindex: 1005;
+$reveal-zindex: 1005 !default;
 
 /// Background color of modal overlays.
 /// @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 {
-  display: none;
+@mixin reveal-overlay($background: $reveal-overlay-background) {
   position: fixed;
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
   z-index: $reveal-zindex;
-  background-color: $reveal-overlay-background;
+
+  display: none;
+  background-color: $background;
   overflow-y: scroll;
 }
 
 /// 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;
-  // margin: 100px auto 0 100px;
-  margin: 100px auto 0 auto;
-  background-color: $reveal-background;
   border-radius: $reveal-radius;
+  background-color: $reveal-background;
 
   @include breakpoint(medium) {
     min-height: 0;
   }
 
   // Make sure rows don't have a min-width on them
-  .column,
-  .columns {
+  .column {
     min-width: 0;
   }
 
@@ -94,24 +104,41 @@ $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;
   }
 }
 
 /// 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?
+  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 {
+    min-height: 100%;
+    overflow: hidden;
+    position: fixed;
+    user-select: none;
+  }
+
   // Overlay
   .reveal-overlay {
     @include reveal-overlay;
@@ -121,23 +148,17 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   .reveal {
     @include reveal-modal-base;
     @include reveal-modal-width($reveal-width);
-    position: absolute;
+    position: relative;
+    top: 100px;
+    margin-right: auto;
+    margin-left: auto;
     overflow-y: auto;
+
     // Remove padding
     &.collapse {
       padding: 0;
     }
 
-    // Placeholder selector for medium-and-up modals
-    // Prevents duplicate CSS when defining multiple Reveal sizes
-    @include breakpoint(medium) {
-      %reveal-centered {
-        left: auto;
-        right: auto;
-        margin: 0 auto;
-      }
-    }
-
     // Sizing classes
     &.tiny  { @include reveal-modal-width(30%); }
     &.small { @include reveal-modal-width(50%); }
@@ -147,9 +168,13 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
     &.full {
       @include reveal-modal-fullscreen;
     }
-  }
-}
 
-body.is-reveal-open {
-  overflow: hidden;
+    @include breakpoint($-zf-zero-breakpoint only) {
+      @include reveal-modal-fullscreen;
+    }
+
+    &.without-overlay {
+      position: fixed;
+    }
+  }
 }