locomotivecms_wagon 2.2.0.beta1 → 2.2.0.rc1

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

@@ -0,0 +1,158 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+// [TODO] Check how plugin confirms disabled or vertical status
+// [TODO] Check if transition: all; is necessary
+
+////
+/// @group slider
+////
+
+/// Default height of the slider.
+/// @type Number
+$slider-height: 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.
+/// @type Transition
+$slider-transition: all 0.2s ease-in-out !default;
+
+/// Adds the general styles for sliders.
+@mixin slider-container {
+  position: relative;
+  height: $slider-height;
+  margin-top: 1.25rem;
+  margin-bottom: 2.25rem;
+  background-color: $slider-background;
+  cursor: pointer;
+  user-select: none;
+  touch-action: none;
+}
+
+/// Adds the general styles for active fill for sliders.
+@mixin slider-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  max-width: 100%;
+  height: $slider-height;
+  background-color: $slider-fill-background;
+  transition: $slider-transition;
+
+  &.is-dragging {
+    transition: all 0s linear;
+  }
+}
+
+/// Adds the general styles for the slider handles.
+@mixin slider-handle {
+  @include disable-mouse-outline;
+  @include v-align-middle;
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  display: inline-block;
+  width: $slider-handle-width;
+  height: $slider-handle-height;
+  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%);
+  }
+
+  &.is-dragging {
+    transition: all 0s linear;
+  }
+}
+
+@mixin slider-disabled {
+  opacity: $slider-opacity-disabled;
+  cursor: not-allowed;
+}
+
+@mixin slider-vertical {
+  display: inline-block;
+  width: $slider-width-vertical;
+  height: 12.5rem;
+  margin: 0 1.25rem;
+  transform: scale(1, -1);
+
+  .slider-fill {
+    top: 0;
+    width: $slider-width-vertical;
+    max-height: 100%;
+  }
+
+  .slider-handle {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: $slider-handle-height;
+    height: $slider-handle-width;
+    transform: translateX(-50%);
+  }
+}
+
+@mixin foundation-slider {
+  // Container
+  .slider {
+    @include slider-container;
+  }
+
+  // Fill area
+  .slider-fill {
+    @include slider-fill;
+  }
+
+  // Draggable handle
+  .slider-handle {
+    @include slider-handle;
+  }
+
+  // Disabled state
+  .slider.disabled,
+  .slider[disabled] {
+    @include slider-disabled;
+  }
+
+  // Vertical slider
+  .slider.vertical {
+    @include slider-vertical;
+  }
+}

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

@@ -0,0 +1,38 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@mixin foundation-sticky {
+  .sticky-container {
+    position: relative;
+  }
+
+  .sticky {
+    position: absolute;
+    z-index: 0;
+    transform: translate3d(0,0,0);
+  }
+
+  .sticky.is-stuck {
+    position: fixed;
+    z-index: 5;
+
+    &.is-at-top {
+      top: 0;
+    }
+
+    &.is-at-bottom {
+      bottom: 0;
+    }
+  }
+
+  .sticky.is-anchored {
+    position: absolute;
+    left: auto;
+    right: auto;
+
+    &.is-at-bottom {
+      bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,231 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group switch
+////
+
+/// Background color of a switch.
+/// @type Color
+$switch-background: $medium-gray !default;
+
+/// Background active color of a switch.
+/// @type Color
+$switch-background-active: $primary-color !default;
+
+/// Height of a switch, with no class applied.
+/// @type Number
+$switch-height: 2rem !default;
+
+/// Height of a switch with .tiny class.
+/// @type Number
+$switch-height-tiny: 1.5rem !default;
+
+/// Height of a switch with .small class.
+/// @type Number
+$switch-height-small: 1.75rem !default;
+
+/// Height of a switch with .large class.
+/// @type Number
+$switch-height-large: 2.5rem !default;
+
+/// Border radius of the switch
+/// @type Number
+$switch-radius: $global-radius;
+
+/// border around a modal.
+/// @type Number
+$switch-margin: $global-margin !default;
+
+/// Background color for the switch container and paddle.
+/// @type Color
+$switch-paddle-background: $white !default;
+
+/// Spacing between a switch paddle and the edge of the body.
+/// @type Number
+$switch-paddle-offset: 0.25rem !default;
+
+/// border radius of the switch paddle
+/// @type Number
+$switch-paddle-radius: $global-radius !default;
+
+/// switch transition.
+/// @type Number
+$switch-paddle-transition: all 0.25s ease-out !default;
+
+// make them variables
+// ask about accessibility on label
+// change class name for text
+
+/// Adds styles for a switch container. Apply this to a container class.
+@mixin switch-container {
+  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);
+}
+
+/// Adds styles for a switch input. Apply this to an `<input>` within a switch.
+@mixin switch-input {
+  opacity: 0;
+  position: absolute;
+}
+
+/// 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;
+  position: relative;
+  width: 4rem;
+  height: $switch-height;
+  transition: $switch-paddle-transition;
+  border-radius: $switch-radius;
+
+  // Resetting these <label> presets so type styles cascade down
+  color: inherit;
+  font-weight: inherit;
+
+  // Needed to override specificity
+  input + & {
+    margin: 0;
+  }
+
+  // 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;
+    transform: translate3d(0, 0, 0);
+  }
+
+  // Change the visual style when the switch is active
+  input:checked ~ & {
+    background: $switch-background-active;
+
+    &::after {
+      #{$global-left}: 2.25rem;
+    }
+  }
+
+  input:focus ~ & {
+    @include disable-mouse-outline;
+  }
+}
+
+/// Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`.
+@mixin switch-text {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/// Adds styles for the active state text within a switch.
+@mixin switch-text-active {
+  #{$global-left}: 8%;
+  display: none;
+
+  input:checked + label > & {
+    display: block;
+  }
+}
+
+/// Adds styles for the inactive state text within a switch.
+@mixin switch-text-inactive {
+  #{$global-right}: 15%;
+
+  input:checked + label > & {
+    display: none;
+  }
+}
+
+/// 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} $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,
+  $paddle-offset: 0.25rem
+) {
+  $paddle-height: $height - ($paddle-offset * 2);
+  $paddle-left-active: $width - $paddle-width - $paddle-offset;
+
+  .switch-paddle {
+    width: $width;
+    height: $height;
+    font-size: $font-size;
+  }
+
+  .switch-paddle::after {
+    width: $paddle-width;
+    height: $paddle-height;
+  }
+
+  input:checked ~ .switch-paddle:after {
+    #{$global-left}: $paddle-left-active;
+  }
+}
+
+@mixin foundation-switch {
+  // Container class
+  .switch {
+    @include switch-container;
+  }
+
+  // <input> element
+  .switch-input {
+    @include switch-input;
+  }
+
+  // <label> element
+  .switch-paddle {
+    @include switch-paddle;
+  }
+
+  // Base label text styles
+  %switch-text {
+    @include switch-text;
+  }
+
+  // Active label text styles
+  .switch-active {
+    @extend %switch-text;
+    @include switch-text-active;
+  }
+
+  // Inactive label text styles
+  .switch-inactive {
+    @extend %switch-text;
+    @include switch-text-inactive;
+  }
+
+  // Switch sizes
+  .switch.tiny {
+    @include switch-size(rem-calc(10), 3rem, $switch-height-tiny, 1rem, $switch-paddle-offset);
+  }
+
+  .switch.small {
+    @include switch-size(rem-calc(12), 3.5rem, $switch-height-small, 1.25rem, $switch-paddle-offset);
+  }
+
+  .switch.large {
+    @include switch-size(rem-calc(16), 5rem, $switch-height-large, 2rem, $switch-paddle-offset);
+  }
+}

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

@@ -0,0 +1,212 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+// scss-lint:disable MergeableSelector, QualifyingElement
+
+////
+/// @group table
+////
+
+/// Defualt color for table background.
+/// @type Color
+$table-background: $white  !default;
+
+/// Defualt scale for darkening the striped table rows and the table border.
+/// @type Number
+$table-color-scale: 5% !default;
+
+/// Defualt style for table border.
+/// @type List
+$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;
+
+/// Defualt padding for table.
+/// @type Number
+$table-padding: rem-calc(8 10 10) !default;
+
+/// Defualt scale for darkening the table rows on hover.
+/// @type Number
+$table-hover-scale: 2% !default;
+
+/// Defualt 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.
+/// @type List
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
+
+/// Defualt 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
+$table-stripe: even !default;
+
+/// Defualt color for header background.
+/// @type Color
+$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
+
+/// Defualt color for footer background.
+/// @type Color
+$table-foot-background: smart-scale($table-background, $table-color-scale) !default;
+
+/// Defualt font color for header.
+/// @type Color
+$table-head-font-color: $body-font-color !default;
+
+/// Defualt value for showing the header when using stacked tables.
+/// @type Boolean
+$show-header-for-stacked: false;
+
+/// 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;
+
+  @at-root {
+    thead,
+    tbody,
+    tfoot {
+      border: $table-border;
+      background-color: $table-background;
+    }
+
+    // Caption
+    caption {
+      font-weight: $global-weight-bold;
+      padding: $table-padding;
+    }
+
+    // Table head and foot
+    thead,
+    tfoot {
+      background: $table-head-background;
+      color: $table-head-font-color;
+
+      // 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 rows
+    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;
+          }
+        }
+      }
+
+      th,
+      td {
+        padding: $table-padding;
+      }
+    }
+  }
+}
+
+/// Adds the ability to horizontally scroll the table when the content overflows horizontally.
+@mixin table-scroll {
+  display: block;
+  width: 100%;
+  overflow-y: scroll;
+}
+
+/// Slightly darkens the table rows on hover.
+@mixin table-hover {
+  tr {
+    //Darkens the non-striped table rows on hover.
+    &:hover {
+      background-color: $table-row-hover;
+    }
+
+    //Darkens the even striped table rows.
+    @if($table-stripe == even) {
+      &:nth-of-type(even):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+
+    //Darkens the odd striped table rows.
+    @elseif($table-stripe == odd) {
+      &:nth-of-type(odd):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+  }
+}
+
+/// Adds styles for a stacked table. Useful for small-screen layouts.
+/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.
+@mixin table-stack($header: $show-header-for-stacked) {
+  @if $header {
+    thead {
+      th:first-child {
+        display: block;
+      }
+
+      th {
+        display: none;
+      }
+    }
+  } @else {
+    thead {
+      display: none;
+    }
+  }
+
+  tfoot {
+    display: none;
+  }
+
+  tr,
+  th,
+  td {
+    display: block;
+  }
+
+  td {
+    border-top: 0;
+  }
+}
+
+@mixin foundation-table {
+  table {
+    @include table;
+  }
+
+  table.stack {
+    @include breakpoint(medium down) {
+      @include table-stack;
+    }
+  }
+
+  table.scroll {
+    @include table-scroll;
+  }
+
+  table.hover {
+    @include table-hover;
+  }
+}