locomotivecms_wagon 2.2.0.beta1 → 2.2.0.rc1

data/generators/foundation/public/stylesheets/foundation6/components/_flex-video.scss

@@ -0,0 +1,68 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group flex-video
+////
+
+/// Padding above a flex video container.
+/// @type Number
+$flexvideo-padding-top: rem-calc(25) !default;
+
+/// Margin below a flex video container.
+/// @type Number
+$flexvideo-margin-bottom: rem-calc(16) !default;
+
+/// Padding used to create a 4:3 aspect ratio.
+/// @type Number
+$flexvideo-ratio: 4 by 3 !default;
+
+/// Padding used to create a 16:9 aspect ratio.
+/// @type Number
+$flexvideo-ratio-widescreen: 16 by 9 !default;
+
+/// Creates a percentage height that can be used as padding in a flex video container.
+/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
+/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container.
+@function flex-video($ratio) {
+  $w: nth($ratio, 1);
+  $h: nth($ratio, 3);
+  @return $h / $w * 100%;
+}
+
+/// Creates a flex video container.
+/// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`.
+@mixin flex-video($ratio: $flexvideo-ratio) {
+  position: relative;
+  height: 0;
+  padding-top: $flexvideo-padding-top;
+  padding-bottom: flex-video($ratio);
+  margin-bottom: $flexvideo-margin-bottom;
+  overflow: hidden;
+
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@mixin foundation-flex-video {
+  .flex-video {
+    @include flex-video;
+
+    &.widescreen {
+      padding-bottom: flex-video($flexvideo-ratio-widescreen);
+    }
+
+    &.vimeo {
+      padding-top: 0;
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group float
+////
+
+@mixin foundation-float-classes {
+  .float-left {
+    float: left !important;
+  }
+
+  .float-right {
+    float: right !important;
+  }
+
+  .float-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .clearfix {
+    @include clearfix;
+  }
+}

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

@@ -0,0 +1,56 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group label
+////
+
+/// Default background color for labels.
+/// @type Color
+$label-background: $primary-color !default;
+
+/// Default text color for labels.
+/// @type Color
+$label-color: foreground($label-background) !default;
+
+/// Default font size for labels.
+/// @type Number
+$label-font-size: 0.8rem !default;
+
+/// Default padding inside labels.
+/// @type Number
+$label-padding: 0.33333rem 0.5rem !default;
+
+/// Default radius of labels.
+/// @type Number
+$label-radius: $global-radius !default;
+
+/// Generates base styles for a label.
+@mixin label {
+  display: inline-block;
+  padding: $label-padding;
+  font-size: $label-font-size;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: default;
+  border-radius: $label-radius;
+}
+
+@mixin foundation-label {
+  .label {
+    @include label;
+
+    background: $label-background;
+    color: $label-color;
+
+    @each $name, $color in $foundation-colors {
+      @if $name != primary {
+        &.#{$name} {
+          background: $color;
+          color: foreground($color);
+        }
+      }
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/components/_media-object.scss

@@ -0,0 +1,74 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group media-object
+////
+
+/// Bottom margin of a media object.
+/// @type Number
+$mediaobject-margin-bottom: $global-margin !default;
+
+/// Left and right padding on sections within a media object.
+/// @type Number
+$mediaobject-section-padding: $global-padding !default;
+
+/// With of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
+/// @type Number
+$mediaobject-image-width-stacked: 100% !default;
+
+/// Adds styles for a media object container.
+@mixin media-object-container {
+  margin-bottom: $mediaobject-margin-bottom;
+  display: block;
+}
+
+/// Adds styles for sections within a media object.
+/// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
+@mixin media-object-section($padding: $mediaobject-section-padding) {
+  display: table-cell;
+  vertical-align: top;
+
+  &:first-child {
+    padding-#{$global-right}: $padding;
+  }
+
+  &:last-child:not(+ &:first-child) {
+    padding-#{$global-left}: $padding;
+  }
+}
+
+/// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
+@mixin media-object-stack {
+  display: block;
+  padding: 0;
+  padding-bottom: $mediaobject-section-padding;
+
+  img {
+    width: $mediaobject-image-width-stacked;
+  }
+}
+
+@mixin foundation-media-object {
+  .media-object {
+    @include media-object-container;
+
+    img {
+      max-width: none;
+    }
+
+    &.stack-for-small .media-object-section {
+      @include breakpoint(small only) {
+        @include media-object-stack;
+      }
+    }
+  }
+
+  .media-object-section {
+    @include media-object-section;
+
+    &.middle { vertical-align: middle; }
+    &.bottom { vertical-align: bottom; }
+  }
+}

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

@@ -0,0 +1,213 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group menu
+////
+
+/// Margin of a menu.
+/// @type Number
+$menu-margin: 0 !default;
+
+/// Left-hand margin of a nested menu.
+/// @type Number
+$menu-margin-nested: 1rem !default;
+
+/// Padding for items in a menu.
+/// @type Number
+$menu-item-padding: 0.7rem 1rem !default;
+
+/// Spacing between an icon and text in a menu item.
+/// @type Number
+$menu-icon-spacing: 0.25rem !default;
+
+/// Maximum number of `expand-n` classes to include in the CSS.
+/// @type Number
+$menu-expand-max: 6 !default;
+
+/// Creates the base styles for a Menu.
+@mixin menu-base {
+  margin: $menu-margin;
+  list-style-type: none;
+
+  // List items are table cell to allow for vertical alignment
+  > li {
+    @include disable-mouse-outline;
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  // Reset line height to make the height of the overall item easier to calculate
+  > li > a {
+    display: block;
+    padding: $menu-item-padding;
+    line-height: 1;
+  }
+
+  // Reset styles of inner elements
+  input,
+  a,
+  button {
+    margin-bottom: 0;
+  }
+}
+
+/// Expands the items of a Menu, so each item is the same width.
+/// @param {Keyword|Number} $count [auto] - Number of items in the Menu. You can hardcode a number, or use `auto` to generate CSS that will adapt to the number of items inside the menu.
+@mixin menu-expand($count: auto) {
+  display: table;
+  width: 100%;
+
+  > li {
+    @if $count == auto {
+      @include auto-width($menu-expand-max);
+    }
+    @else if type-of($count) == 'number' {
+      width: percentage(1 / $count);
+    }
+  }
+}
+
+/// Sets the direction of a Menu.
+/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
+@mixin menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    > li {
+      display: table-cell;
+    }
+  }
+  @else if $dir == vertical {
+    > li {
+      display: block;
+    }
+  }
+  @else {
+    @warn 'The direction used for menu-direction() must be horizontal or vertical.';
+  }
+}
+
+/// Creates a simple Menu, which has no padding or hover state.
+@mixin menu-simple {
+  a {
+    padding: 0;
+    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
+  }
+}
+
+/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
+/// @param {Keyword|Number} $padding [auto] - Length of the margin.
+@mixin menu-nested($margin: $menu-margin-nested) {
+  margin-#{$global-left}: $margin;
+}
+
+/// Adds support for icons to Menu items.
+/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
+/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
+@mixin menu-icons($position: side, $base: true) {
+  @if $base {
+    > li > a {
+      > img,
+      > i {
+        vertical-align: middle;
+      }
+
+      > span {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  @if $position == side {
+    > li > a {
+      > img,
+      > i {
+        display: inline-block;
+        margin-#{$global-right}: $menu-icon-spacing;
+      }
+    }
+  }
+  @else if $position == top {
+    > li > a {
+      text-align: center;
+
+      > img,
+      > i {
+        display: block;
+        margin: 0 auto $menu-icon-spacing;
+      }
+    }
+  }
+}
+
+@mixin menu-text {
+  font-weight: bold;
+  color: inherit;
+  line-height: 1;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding: $menu-item-padding;
+}
+
+@mixin foundation-menu {
+  .menu {
+    @include menu-base;
+    @include menu-icons;
+
+    // Orientation
+    @include menu-direction(horizontal);
+
+    &.vertical {
+      @include menu-direction(vertical);
+    }
+
+    @each $size in $breakpoint-classes {
+      @if $size != small {
+        @include breakpoint($size) {
+          &.#{$size}-horizontal {
+            @include menu-direction(horizontal);
+          }
+
+          &.#{$size}-vertical {
+            @include menu-direction(vertical);
+          }
+        }
+      }
+    }
+
+    // Simple
+    &.simple {
+      @include menu-simple;
+    }
+
+    // Align right
+    &.align-#{$global-right} {
+      > li {
+        float: $global-right;
+      }
+    }
+
+    // Even-width
+    &.expanded {
+      @include menu-expand;
+
+      > li:first-child:last-child {
+        width: 100%;
+      }
+    }
+
+    // Vertical icons
+    &.icon-top {
+      @include menu-icons(top, $base: false);
+    }
+
+    // Nesting
+    &.nested {
+      @include menu-nested;
+    }
+  }
+
+  .menu-text {
+    @include menu-text;
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/components/_off-canvas.scss

@@ -0,0 +1,170 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group off-canvas
+////
+
+/// Width of an off-canvas menu.
+/// @type Number
+$offcanvas-size: 250px;
+
+/// Background color of an off-canvas menu.
+/// @type Color
+$offcanvas-background: $light-gray;
+
+/// Z-index of an off-canvas menu.
+/// @type Number
+$offcanvas-zindex: -1;
+
+/// Length of the animation on an off-canvas menu.
+/// @type Number
+$offcanvas-transition-length: 0.5s;
+
+/// Timing function of the animation on an off-canvas menu.
+/// @type Keyword
+$offcanvas-transition-timing: ease;
+
+/// Background color for the overlay that appears when an off-canvas menu is open.
+/// @type Color
+$offcanvas-exit-background: rgba($white, 0.25);
+
+/// CSS class used for the main content area. The off-canvas mixins use this to target the page body.
+$maincontent-class: 'off-canvas-content';
+
+/// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.
+/// @type Shadow
+$maincontent-shadow: 0 0 10px rgba($black, 0.5);
+
+/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
+@mixin off-canvas-basics {
+  // Extra properties needed on <html> and <body> to make off-canvas work
+  html,
+  body {
+    height: 100%;
+  }
+
+  .off-canvas-wrapper {
+    width: 100%;
+    overflow-x: hidden;
+    position: relative;
+    backface-visibility: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .off-canvas-wrapper-inner {
+    @include clearfix;
+    position: relative;
+    width: 100%;
+    transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+  }
+
+  // Container for page content
+  .off-canvas-content {
+    min-height: 100%;
+    background: $body-background;
+    transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
+    backface-visibility: hidden;
+    z-index: 1;
+
+    @if hasvalue($maincontent-shadow) {
+      box-shadow: $maincontent-shadow;
+    }
+  }
+
+  // Click-to-exit overlay (generated by JavaScript)
+  .js-off-canvas-exit {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $offcanvas-exit-background;
+    cursor: pointer;
+    transition: background $offcanvas-transition-length $offcanvas-transition-timing;
+
+    .is-off-canvas-open & {
+      display: block;
+    }
+  }
+}
+
+/// Adds basic styles for an off-canvas menu.
+@mixin off-canvas-base {
+  @include disable-mouse-outline;
+  position: absolute;
+  background: $offcanvas-background;
+  z-index: $offcanvas-zindex;
+  max-height: 100%;
+  overflow-y: auto;
+  transform: translateX(0px);
+}
+
+@mixin off-canvas-position(
+  $position: left,
+  $size: $offcanvas-size,
+  $fixed: false
+) {
+  @if $position == left {
+    left: -$size;
+    top: 0;
+    width: $size;
+  }
+  @else if $position == right {
+    right: -$size;
+    top: 0;
+    width: $size;
+  }
+
+  // Generates an open state class that matches the width of the menu
+  @at-root {
+    .is-open-#{$position} {
+      @if $position == left {
+        transform: translateX($size);
+      }
+      @else if $position == right {
+        transform: translateX(-$size);
+      }
+    }
+  }
+}
+
+/// Adds styles that reveal an off-canvas menu.
+/// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed.
+@mixin off-canvas-reveal(
+  $position: left
+) {
+  #{$position}: 0;
+
+  & ~ .#{$maincontent-class} {
+    margin-#{$position}: $offcanvas-size;
+  }
+}
+
+@mixin foundation-off-canvas {
+  @include off-canvas-basics;
+
+  // Off-canvas container
+  .off-canvas {
+    @include off-canvas-base;
+
+    &.position-left   { @include off-canvas-position(left); }
+    &.position-right  { @include off-canvas-position(right); }
+  }
+
+  // Reveal off-canvas menu on larger screens
+  @each $name, $value in $breakpoint-classes {
+    @if $name != small {
+      @include breakpoint($name) {
+        .position-left.reveal-for-#{$name} {
+          @include off-canvas-reveal(left);
+        }
+        .position-right.reveal-for-#{$name} {
+          @include off-canvas-reveal(right);
+        }
+      }
+    }
+  }
+}