locomotivecms_wagon 2.4.0.rc2 → 2.4.0

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

@@ -9,43 +9,11 @@
 /// @group slider
 ////
 
-/// Default height of the slider.
+/// Default slider width of a vertical slider. (Doesn't apply to the native slider.)
 /// @type Number
-$slider-height: 0.5rem !default;
+$slider-width-vertical: 0.5rem !default;
 
-/// Default slider width of a vertical slider.
-/// @type Number
-$slider-width-vertical: $slider-height !default;
-
-/// Default background color of the slider's track.
-/// @type Color
-$slider-background: $light-gray !default;
-
-/// Default color of the active fill color of the slider.
-/// @type Color
-$slider-fill-background: $medium-gray !default;
-
-/// Default height of the handle of the slider.
-/// @type Number
-$slider-handle-height: 1.4rem !default;
-
-/// Default width of the handle of the slider.
-/// @type Number
-$slider-handle-width: 1.4rem !default;
-
-/// Default color of the handle for the slider.
-/// @type Color
-$slider-handle-background: $primary-color !default;
-
-/// Default fade amount of a disabled slider.
-/// @type Number
-$slider-opacity-disabled: 0.25 !default;
-
-/// Default radius for slider.
-/// @type Number
-$slider-radius: $global-radius !default;
-
-/// Transition properties to apply to the slider handle and fill.
+/// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)
 /// @type Transition
 $slider-transition: all 0.2s ease-in-out !default;
 
@@ -55,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;
@@ -66,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;
 
@@ -80,17 +51,18 @@ $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 v-align-middle;
-  position: absolute;
+  @include vertical-center;
   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%);
@@ -155,4 +127,11 @@ $slider-transition: all 0.2s ease-in-out !default;
   .slider.vertical {
     @include slider-vertical;
   }
+
+  // RTL support
+  @if $global-text-direction == rtl {
+    .slider:not(.vertical) {
+      transform: scale(-1, 1);
+    }
+  }
 }

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

@@ -8,14 +8,15 @@
   }
 
   .sticky {
-    position: absolute;
+    position: relative;
     z-index: 0;
-    transform: translate3d(0,0,0);
+    transform: translate3d(0, 0, 0);
   }
 
   .sticky.is-stuck {
     position: fixed;
     z-index: 5;
+    width: 100%;
 
     &.is-at-top {
       top: 0;
@@ -27,9 +28,9 @@
   }
 
   .sticky.is-anchored {
-    position: absolute;
-    left: auto;
+    position: relative;
     right: auto;
+    left: auto;
 
     &.is-at-bottom {
       bottom: 0;

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

@@ -32,7 +32,7 @@ $switch-height-large: 2.5rem !default;
 
 /// Border radius of the switch
 /// @type Number
-$switch-radius: $global-radius;
+$switch-radius: $global-radius !default;
 
 /// border around a modal.
 /// @type Number
@@ -60,37 +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 + & {
@@ -99,16 +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
@@ -116,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;
     }
   }
 
@@ -153,39 +165,43 @@ $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;
+
+  $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;
+  input:checked ~ .switch-paddle::after {
+    #{$global-left}: $paddle-active-offest;
   }
 }
 
 @mixin foundation-switch {
   // Container class
   .switch {
+    height: $switch-height;
     @include switch-container;
   }
 
@@ -218,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);
   }
 }

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

@@ -2,155 +2,268 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-// scss-lint:disable MergeableSelector, QualifyingElement
+// sass-lint:disable force-element-nesting, no-qualifying-elements
 
 ////
 /// @group table
 ////
 
-/// Defualt color for table background.
+/// Default color for table background.
 /// @type Color
 $table-background: $white  !default;
 
-/// Defualt scale for darkening the striped table rows and the table border.
+/// Default scale for darkening the striped table rows and the table border.
 /// @type Number
 $table-color-scale: 5% !default;
 
-/// Defualt style for table border.
+/// Default style for table border.
 /// @type List
 $table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;
 
-/// Defualt padding for table.
+/// Default padding for table.
 /// @type Number
 $table-padding: rem-calc(8 10 10) !default;
 
-/// Defualt scale for darkening the table rows on hover.
+/// Default scale for darkening the table rows on hover.
 /// @type Number
 $table-hover-scale: 2% !default;
 
-/// Defualt color of standard rows on hover.
+/// Default color of standard rows on hover.
 /// @type List
 $table-row-hover: darken($table-background, $table-hover-scale) !default;
 
-/// Defualt color of striped rows on hover.
+/// Default color of striped rows on hover.
 /// @type List
 $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
 
-/// Defualt background color for striped rows.
+/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
+/// @type Boolean
+$table-is-striped: true !default;
+
+/// Default background color for striped rows.
 /// @type Color
 $table-striped-background: smart-scale($table-background, $table-color-scale) !default;
 
-/// Defualt value for showing the stripe on rows of the tables, excluding the header and footer If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or anyother value, the table rows will have no striping.
-/// @type Keyoword
+/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.
+/// @type Keyword
 $table-stripe: even !default;
 
-/// Defualt color for header background.
+/// Default color for header background.
 /// @type Color
 $table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
 
-/// Defualt color for footer background.
+/// Default color of header rows on hover.
+/// @type List
+$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
+
+/// Default color for footer background.
 /// @type Color
 $table-foot-background: smart-scale($table-background, $table-color-scale) !default;
 
-/// Defualt font color for header.
+/// Default color of footer rows on hover.
+/// @type List
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;
+
+/// Default font color for header.
 /// @type Color
 $table-head-font-color: $body-font-color !default;
 
-/// Defualt value for showing the header when using stacked tables.
+/// Default font color for footer.
+/// @type Color
+$table-foot-font-color: $body-font-color !default;
+
+/// Default value for showing the header when using stacked tables.
 /// @type Boolean
-$show-header-for-stacked: false;
+$show-header-for-stacked: false !default;
 
-/// Adds the general styles for tables.
-/// @param {Keyword} $stripe [$table-stripe] - Uses kewords even, odd, or none to darken rows of the table. The defualt value is even.
-@mixin table($stripe: $table-stripe) {
-  margin-bottom: $global-margin;
-  border-radius: $global-radius;
+/// Breakpoint at which stacked table switches from mobile to desktop view.
+/// @type Breakpoint
+$table-stack-breakpoint: medium !default;
 
-  @at-root {
-    thead,
-    tbody,
-    tfoot {
-      border: $table-border;
-      background-color: $table-background;
+@mixin -zf-table-stripe($stripe: $table-stripe) {
+  tr {
+    // If stripe is set to even, darken the even rows.
+    @if $stripe == even {
+      &:nth-child(even) {
+        border-bottom: 0;
+        background-color: $table-striped-background;
+      }
     }
 
-    // Caption
-    caption {
-      font-weight: $global-weight-bold;
+    // If stripe is set to odd, darken the odd rows.
+    @else if $stripe == odd {
+      &:nth-child(odd) {
+        background-color: $table-striped-background;
+      }
+    }
+  }
+}
+
+@mixin -zf-table-unstripe() {
+  tr {
+    border-bottom: 0;
+    border-bottom: $table-border;
+    background-color: $table-background;
+  }
+}
+
+@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {
+  thead,
+  tbody,
+  tfoot {
+    border: $table-border;
+    background-color: $table-background;
+  }
+
+  // Caption
+  caption {
+    padding: $table-padding;
+    font-weight: $global-weight-bold;
+  }
+
+  // Table head
+  thead {
+    background: $table-head-background;
+    color: $table-head-font-color;
+  }
+
+  // Table foot
+  tfoot {
+    background: $table-foot-background;
+    color: $table-foot-font-color;
+  }
+
+  // Table head and foot
+  thead,
+  tfoot {
+    // Rows within head and foot
+    tr {
+      background: transparent;
+    }
+
+    // Cells within head and foot
+    th,
+    td {
       padding: $table-padding;
+      font-weight: $global-weight-bold;
+      text-align: #{$global-left};
     }
+  }
 
-    // Table head and foot
-    thead,
-    tfoot {
-      background: $table-head-background;
-      color: $table-head-font-color;
+  // Table rows
+  tbody {
+    th,
+    td {
+      padding: $table-padding;
+    }
+  }
 
-      // Rows within head and foot
-      tr {
-        background: transparent;
-      }
+  // If tables are striped
+  @if $is-striped == true {
+    tbody {
+      @include -zf-table-stripe($stripe);
+    }
 
-      // Cells within head and foot
-      th,
-      td {
-        padding: $table-padding;
-        font-weight: $global-weight-bold;
-        text-align: #{$global-left};
+    &.unstriped {
+      tbody {
+        @include -zf-table-unstripe();
+        background-color: $table-background;
       }
     }
+  }
 
-    // Table rows
+  // If tables are not striped
+  @else if $is-striped == false {
     tbody {
-      tr {
-        // If stripe is set to even, darken the even rows.
-        @if $stripe == even {
-          &:nth-child(even) {
-            background-color: $table-striped-background;
-          }
-        }
-
-        // If stripe is set to odd, darken the odd rows.
-        @else if $stripe == odd {
-          &:nth-child(odd) {
-            background-color: $table-striped-background;
-          }
-        }
-      }
+      @include -zf-table-unstripe();
+    }
 
-      th,
-      td {
-        padding: $table-padding;
+    &.striped {
+      tbody {
+        @include -zf-table-stripe($stripe);
       }
     }
   }
 }
 
+/// Adds the general styles for tables.
+/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.
+@mixin table(
+  $stripe: $table-stripe,
+  $nest: false
+) {
+  border-collapse: collapse;
+  width: 100%;
+  margin-bottom: $global-margin;
+  border-radius: $global-radius;
+
+  @if $nest {
+    @include -zf-table-children-styles($stripe);
+  }
+  @else {
+    @at-root {
+      @include -zf-table-children-styles($stripe);
+    }
+  }
+}
+
 /// Adds the ability to horizontally scroll the table when the content overflows horizontally.
 @mixin table-scroll {
   display: block;
   width: 100%;
-  overflow-y: scroll;
+  overflow-x: auto;
 }
 
 /// Slightly darkens the table rows on hover.
 @mixin table-hover {
-  tr {
+  thead tr {
+    //Darkens the table header rows on hover.
+    &:hover {
+      background-color: $table-head-row-hover;
+    }
+  }
+
+  tfoot tr {
+    //Darkens the table footer rows on hover.
+    &:hover {
+      background-color: $table-foot-row-hover;
+    }
+  }
+
+  tbody tr {
     //Darkens the non-striped table rows on hover.
     &:hover {
       background-color: $table-row-hover;
     }
+  }
 
-    //Darkens the even striped table rows.
+  @if $table-is-striped == true {
+    // Darkens the even striped table rows.
     @if($table-stripe == even) {
-      &:nth-of-type(even):hover {
+      &:not(.unstriped) tr:nth-of-type(even):hover {
         background-color: $table-row-stripe-hover;
       }
     }
 
-    //Darkens the odd striped table rows.
+    // Darkens the odd striped table rows.
     @elseif($table-stripe == odd) {
-      &:nth-of-type(odd):hover {
+      &:not(.unstriped) tr:nth-of-type(odd):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+  }
+
+  @else if $table-is-striped == false {
+    // Darkens the even striped table rows.
+    @if($table-stripe == even) {
+      &.striped tr:nth-of-type(even):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+
+    // Darkens the odd striped table rows.
+    @elseif($table-stripe == odd) {
+      &.striped tr:nth-of-type(odd):hover {
         background-color: $table-row-stripe-hover;
       }
     }
@@ -162,15 +275,12 @@ $show-header-for-stacked: false;
 @mixin table-stack($header: $show-header-for-stacked) {
   @if $header {
     thead {
-      th:first-child {
-        display: block;
-      }
-
       th {
-        display: none;
+        display: block;
       }
     }
-  } @else {
+  }
+  @else {
     thead {
       display: none;
     }
@@ -191,13 +301,13 @@ $show-header-for-stacked: false;
   }
 }
 
-@mixin foundation-table {
+@mixin foundation-table($nest: false) {
   table {
-    @include table;
+    @include table($nest: $nest);
   }
 
   table.stack {
-    @include breakpoint(medium down) {
+    @include breakpoint($table-stack-breakpoint down) {
       @include table-stack;
     }
   }
@@ -209,4 +319,12 @@ $show-header-for-stacked: false;
   table.hover {
     @include table-hover;
   }
+
+  .table-scroll {
+    overflow-x: auto;
+
+    table {
+      width: auto;
+    }
+  }
 }