locomotivecms_wagon 2.2.0.beta1 → 2.2.0.rc1

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

@@ -0,0 +1,186 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group orbit
+////
+
+/// Default color for Orbit's bullets.
+/// @type Color
+$orbit-bullet-background: $medium-gray !default;
+
+/// Default active color for Orbit's bullets.
+/// @type Color
+$orbit-bullet-background-active: $dark-gray !default;
+
+/// Default diameter for Orbit's bullets.
+/// @type Number
+$orbit-bullet-diameter: 1.2rem !default;
+
+/// Default margin between Orbit's bullets.
+/// @type Number
+$orbit-bullet-margin: 0.1rem !default;
+
+/// Default distance from slide region for Orbit's bullets.
+/// @type Number
+$orbit-bullet-margin-top: 0.8rem !default;
+
+/// Default bottom margin from Orbit's bullets to whatever content may lurk below it.
+/// @type Number
+$orbit-bullet-margin-bottom: 0.8rem !default;
+
+/// Default background color for Orbit's caption.
+/// @type Color
+$orbit-caption-background: rgba($black, 0.5) !default;
+
+/// Default padding for Orbit's caption.
+/// @type Number
+$orbit-caption-padding: 1rem !default;
+
+/// Default background color for Orbit's controls when hovered.
+/// @type Color
+$orbit-control-background-hover: rgba($black, 0.5) !default;
+
+/// Default padding for Orbit's controls.
+/// @type Number
+$orbit-control-padding: 1rem !default;
+
+/// Default z-index for Orbit's controls.
+/// @type Number
+$orbit-control-zindex: 10 !default;
+
+/// Adds styles for the outer Orbit wrapper. These styles are used on the `.orbit` class.
+@mixin orbit-wrapper {
+  position: relative;
+}
+
+/// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class.
+@mixin orbit-container {
+  position: relative;
+  margin: 0;
+  overflow: hidden;
+  list-style: none;
+}
+
+/// 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%;
+}
+
+@mixin orbit-figure {
+  margin: 0;
+}
+
+@mixin orbit-image {
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+/// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class.
+@mixin orbit-caption {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: $orbit-caption-padding;
+  margin-bottom: 0;
+  color: foreground($orbit-caption-background);
+  background-color: $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;
+  z-index: $orbit-control-zindex;
+  padding: $orbit-control-padding;
+  color: $white;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: $orbit-control-background-hover;
+  }
+}
+
+/// Adds styles for the Orbit previous button. These styles are used on the `.orbit-previous` class.
+@mixin orbit-previous {
+  #{$global-left}: 0;
+}
+
+/// Adds styles for the Orbit next button. These styles are used on the `.orbit-next` class.
+@mixin orbit-next {
+  #{$global-left}: auto;
+  #{$global-right}: 0;
+}
+
+/// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class.
+@mixin orbit-bullets {
+  @include disable-mouse-outline;
+  position: relative;
+  margin-top: $orbit-bullet-margin-top;
+  margin-bottom: $orbit-bullet-margin-bottom;
+  text-align: center;
+
+  button {
+    width: $orbit-bullet-diameter;
+    height: $orbit-bullet-diameter;
+    margin: $orbit-bullet-margin;
+    background-color: $orbit-bullet-background;
+    border-radius: 50%;
+
+    &:hover {
+      background-color: $orbit-bullet-background-active;
+    }
+
+    &.is-active {
+      background-color: $orbit-bullet-background-active;
+    }
+  }
+}
+
+@mixin foundation-orbit {
+  .orbit {
+    @include orbit-wrapper;
+  }
+
+  .orbit-container {
+    @include orbit-container;
+  }
+
+  .orbit-slide {
+    @include orbit-slide;
+  }
+
+  .orbit-figure {
+    @include orbit-figure;
+  }
+
+  .orbit-image {
+    @include orbit-image;
+  }
+
+  .orbit-caption {
+    @include orbit-caption;
+  }
+
+  %orbit-control {
+    @include orbit-control;
+  }
+
+  .orbit-previous {
+    @extend %orbit-control;
+    @include orbit-previous;
+  }
+
+  .orbit-next {
+    @extend %orbit-control;
+    @include orbit-next;
+  }
+
+  .orbit-bullets {
+    @include orbit-bullets;
+  }
+}

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

@@ -0,0 +1,161 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group pagination
+////
+
+/// Font size of pagination items.
+/// @type Number
+$pagination-font-size: rem-calc(14) !default;
+
+/// Default bottom margin of the media object.
+/// @type Number
+$pagination-margin-bottom: $global-margin !default;
+
+/// Text color of pagination items.
+/// @type Color
+$pagination-item-color: $black !default;
+
+/// Padding inside of pagination items.
+/// @type Number
+$pagination-item-padding: rem-calc(3 10) !default;
+
+/// Right margin to separate pagination items.
+/// @type Number
+$pagination-item-spacing: rem-calc(1) !default;
+
+/// Default radius for pagination items.
+/// @type Number
+$pagination-radius: $global-radius !default;
+
+/// Background color of pagination items on hover.
+/// @type Color
+$pagination-item-background-hover: $light-gray !default;
+
+/// Background color of pagination item for the current page.
+/// @type Color
+$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;
+
+/// Text color of a disabled pagination item.
+/// @type Color
+$pagination-item-color-disabled: $medium-gray !default;
+
+/// Color of the ellipsis in a pagination menu.
+/// @type Color
+$pagination-ellipsis-color: $black !default;
+
+/// If `false`, don't display page number links on mobile, only next/previous links.
+/// @type Boolean
+$pagination-mobile-items: 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 {
+  @include clearfix;
+  margin-#{$global-left}: 0;
+  margin-bottom: $pagination-margin-bottom;
+
+  // List item
+  li {
+    font-size: $pagination-font-size;
+    margin-#{$global-right}: $pagination-item-spacing;
+    display: none;
+    border-radius: $pagination-radius;
+
+    @if not $pagination-mobile-items {
+      &:last-child,
+      &:first-child {
+        display: inline-block;
+      }
+
+      @include breakpoint(medium) {
+        display: inline-block;
+      }
+    }
+  }
+
+  // Page links
+  a,
+  button {
+    color: $pagination-item-color;
+    display: block;
+    padding: $pagination-item-padding;
+    border-radius: $global-radius;
+
+    &: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;
+      }
+    }
+  }
+}
+
+/// 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;
+  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;
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+/// Adds styles for an ellipsis for use in a pagination list.
+@mixin pagination-ellipsis {
+  content: '…';
+  padding: $pagination-item-padding;
+  color: $pagination-ellipsis-color;
+}
+
+@mixin foundation-pagination {
+  .pagination {
+    @include pagination-container;
+
+    .current {
+      @include pagination-item-current;
+    }
+
+    .disabled {
+      @include pagination-item-disabled;
+    }
+
+    .ellipsis::after {
+      @include pagination-ellipsis;
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+// Foundation for Sites by ZURB
+// 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;
+}
+
+/// Adds styles for the inner meter of a progress bar.
+@mixin progress-meter {
+  position: relative;
+  display: block;
+  width: 0%;
+  height: 100%;
+  background-color: $progress-meter-background;
+  border-radius: $global-radius;
+}
+
+/// Adds styles for text in the progress meter.
+@mixin progress-meter-text {
+  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;
+}
+
+@mixin foundation-progress-bar {
+  // Progress bar
+  .progress {
+    @include progress-container;
+
+    @each $name, $color in $foundation-colors {
+      &.#{$name} {
+        .progress-meter {
+          background-color: $color;
+        }
+      }
+    }
+  }
+
+  // Progress bar meter
+  .progress-meter {
+    @include progress-meter;
+
+    // Progress bar meter text
+    .progress-meter-text {
+      @include progress-meter-text;
+    }
+  }
+}

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

@@ -0,0 +1,155 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group reveal
+////
+
+/// Default background color of a modal.
+/// @type Color
+$reveal-background: $white !default;
+
+/// Default width of a modal, with no class applied.
+/// @type Number
+$reveal-width: 600px !default;
+
+/// Default maximum width of a modal.
+/// @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;
+
+/// Default border around a modal.
+/// @type Number
+$reveal-border: 1px solid $medium-gray !default;
+
+/// Default radius for modal.
+/// @type Number
+$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;
+
+/// Background color of modal overlays.
+/// @type Color
+$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 {
+  display: none;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $reveal-zindex;
+  background-color: $reveal-overlay-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;
+  padding: $reveal-padding;
+  border: $reveal-border;
+  // margin: 100px auto 0 100px;
+  margin: 100px auto 0 auto;
+  background-color: $reveal-background;
+  border-radius: $reveal-radius;
+
+  @include breakpoint(medium) {
+    min-height: 0;
+  }
+
+  // Make sure rows don't have a min-width on them
+  .column,
+  .columns {
+    min-width: 0;
+  }
+
+  // Strip margins from the last item in the modal
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Adjusts the width of a modal.
+/// @param {Number} $width - Width of the modal. Generally a percentage.
+/// @param {Number} $max-width [$reveal-max-width] - Maximum width of the modal.
+@mixin reveal-modal-width(
+  $width: $reveal-width,
+  $max-width: $reveal-max-width
+) {
+  @include breakpoint(medium) {
+    @extend %reveal-centered;
+    width: $width;
+    max-width: $reveal-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%;
+  height: 100%;
+  height: 100vh;
+  min-height: 100vh;
+  max-width: none;
+  margin-left: 0;
+}
+
+@mixin foundation-reveal {
+  // Overlay
+  .reveal-overlay {
+    @include reveal-overlay;
+  }
+
+  // Modal container
+  .reveal {
+    @include reveal-modal-base;
+    @include reveal-modal-width($reveal-width);
+    position: absolute;
+    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%); }
+    &.large { @include reveal-modal-width(90%); }
+
+    // Full-screen mode
+    &.full {
+      @include reveal-modal-fullscreen;
+    }
+  }
+}
+
+body.is-reveal-open {
+  overflow: hidden;
+}