locomotivecms_wagon 2.2.0.beta1 → 2.2.0.rc1

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

@@ -0,0 +1,264 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group button
+////
+
+/// Padding inside buttons.
+/// @type List
+$button-padding: 0.85em 1em !default;
+
+/// Margin around buttons.
+/// @type List
+$button-margin: 0 $global-margin $global-margin 0 !default;
+
+/// Default fill for buttons. Can either be `solid` or `hollow`.
+/// @type Keyword
+$button-fill: solid !default;
+
+/// Default background color for buttons.
+/// @type Color
+$button-background: $primary-color !default;
+
+/// Background color on hover for buttons.
+/// @type Color
+$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
+
+/// Font color for buttons.
+/// @type List
+$button-color: #fff !default;
+
+/// Font color for buttons, if the background is light.
+/// @type List
+$button-color-alt: #000 !default;
+
+/// Border radius for buttons, defaulted to global-radius.
+/// @type Number
+$button-radius: $global-radius !default;
+
+/// Sizes for buttons.
+/// @type Map
+$button-sizes: (
+  tiny: 0.6rem,
+  small: 0.75rem,
+  default: 0.9rem,
+  large: 1.25rem,
+) !default;
+
+/// opacity for a disabled button.
+/// @type List
+$button-opacity-disabled: 0.25 !default;
+
+// Internal: flip from margin-right to margin-left for defaults
+@if $global-text-direction == 'rtl' {
+  $button-margin: 0 0 $global-margin $global-margin;
+}
+
+// TODO: Document button-base() mixin
+@mixin button-base {
+  @include disable-mouse-outline;
+  display: inline-block;
+  text-align: center;
+  line-height: 1;
+  cursor: pointer;
+  -webkit-appearance: none;
+  transition: all 0.25s ease-out;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: $button-radius;
+  padding: $button-padding;
+  margin: $button-margin;
+  font-size: map-get($button-sizes, default);
+}
+
+/// Expands a button to make it full-width.
+/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.
+@mixin button-expand($expand: true) {
+  @if $expand {
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  @else {
+    display: inline-block;
+    width: auto;
+    margin: $button-margin;
+  }
+}
+
+/// Sets the visual style of a button.
+/// @param {Color} $background [$button-background] - Background color of the button.
+/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
+/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
+@mixin button-style(
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color
+) {
+  @if $color == auto {
+    $color: isitlight($background);
+  }
+
+  @if $background-hover == auto {
+    $background-hover: scale-color($background, $lightness: -20%);
+  }
+
+  @if lightness($background) >= 70% {
+    $color: $button-color-alt;
+  }
+  @else {
+    $color: $button-color;
+  }
+
+  background: $background;
+  color: $color;
+
+  &:hover, &:focus {
+    background: $background-hover;
+    color: $color;
+  }
+}
+
+/// Removes background fill on hover and focus for hollow buttons.
+@mixin button-hollow {
+  &,
+  &:hover, &:focus {
+    background: transparent;
+  }
+}
+
+@mixin button-hollow-style($color: $primary-color) {
+  $color-hover: scale-color($color, $lightness: -50%);
+
+  border: 1px solid $color;
+  color: $color;
+
+  &:hover, &:focus {
+    border-color: $color-hover;
+    color: $color-hover;
+  }
+}
+
+/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
+@mixin button-disabled {
+  opacity: $button-opacity-disabled;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/// Adds a dropdown arrow to a button.
+/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.
+/// @param {Color} $color [white] - Color of the arrow.
+/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.
+@mixin button-dropdown(
+  $size: 0.4em,
+  $color: $white,
+  $offset: get-side($button-padding, right)
+) {
+  &::after {
+    @include css-triangle($size, $color, down);
+    position: relative;
+    top: 0.4em; // Aligns the arrow with the text of the button
+    float: #{$global-right};
+    margin-#{$global-left}: get-side($button-padding, right);
+    display: inline-block;
+  }
+}
+
+/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.
+/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.
+/// @param {Color} $background [$button-background] - Background color of the button.
+/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
+/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
+/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.
+@mixin button(
+  $expand: false,
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $style: $button-fill
+) {
+  @include button-base;
+
+  @if $style == solid {
+    @include button-style($background, $background-hover, $color);
+  }
+  @else if $style == hollow {
+    @include button-hollow;
+    @include button-hollow-style($background);
+  }
+
+  @if $expand {
+    @include button-expand;
+  }
+}
+
+@mixin foundation-button {
+  .button {
+    @include button;
+
+    // Sizes
+    &.tiny     { font-size: map-get($button-sizes, tiny); }
+    &.small    { font-size: map-get($button-sizes, small); }
+    &.large    { font-size: map-get($button-sizes, large); }
+    &.expanded { @include button-expand; }
+
+    // Colors
+    @each $name, $color in $foundation-colors {
+      @if $button-fill != hollow {
+        &.#{$name} {
+          @include button-style($color, auto);
+        }
+      }
+      @else {
+        &.#{$name} {
+          @include button-hollow-style($color);
+        }
+
+        &.#{$name}.dropdown::after {
+          border-top-color: $color;
+        }
+      }
+    }
+
+    // Hollow style
+    @if $button-fill != hollow {
+      &.hollow {
+        @include button-hollow;
+        @include button-hollow-style;
+
+        @each $name, $color in $foundation-colors {
+          &.#{$name} {
+            @include button-hollow-style($color);
+          }
+        }
+      }
+    }
+
+    // Disabled style
+    &.disabled {
+      @include button-disabled;
+    }
+
+    // Dropdown arrow
+    &.dropdown {
+      @include button-dropdown;
+
+      @if $button-fill == hollow {
+        &::after {
+          border-top-color: $button-background;
+        }
+      }
+    }
+
+    // Button with dropdown arrow only
+    &.arrow-only::after {
+      margin-#{$global-left}: 0;
+      float: none;
+      top: 0.2em;
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group callout
+////
+
+/// Defualt background color.
+/// @type Color
+$callout-background: $white !default;
+
+/// Default fade value for callout backgrounds.
+/// @type Number
+$callout-background-fade: 85% !default;
+
+/// Defualt border style for callouts.
+/// @type List
+$callout-border: 1px solid rgba($black, 0.25) !default;
+
+/// Default bottom margin for callouts.
+/// @type Number
+$callout-margin: 0 0 1rem 0 !default;
+
+/// Default inner padding for callouts.
+/// @type Number
+$callout-padding: 1rem !default;
+
+/// Default font color for callouts.
+/// @type Color
+$callout-font-color: $body-font-color !default;
+
+/// Default font color for callouts, if the callout has a dark background.
+/// @type Color
+$callout-font-color-alt: $body-background !default;
+
+/// Default border radius for callouts.
+/// @type Color
+$callout-radius: $global-radius !default;
+
+/// Amount to tint links used within colored panels. Set to `false` to disable this feature.
+/// @type Number | Boolean
+$callout-link-tint: 30%;
+
+/// Adds basic styles for a callout, including padding and margin.
+@mixin callout-base() {
+  margin: $callout-margin;
+  padding: $callout-padding;
+  border: $callout-border;
+  border-radius: $callout-radius;
+  position: relative;
+
+  // Respect the padding, fool.
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+/// Generate quick styles for a callout using a single color as a baseline. If `$callout-link-tint` is enabled, links within colored panels will be a darker version of the background.
+/// @param {Color} $color [$callout-background] - Color to use.
+@mixin callout-style($color: $callout-background) {
+  $background: scale-color($color, $lightness: $callout-background-fade);
+  $link-color: scale-color($color, $lightness: -$callout-link-tint);
+
+  background-color: $background;
+
+  @if $callout-link-tint and hue($background) > 0deg {
+    a {
+      color: $link-color;
+
+      &:hover {
+        color: darken($link-color, 15%);
+      }
+    }
+  }
+}
+
+@mixin callout-size($padding) {
+  padding-top: $padding;
+  padding-right: $padding;
+  padding-bottom: $padding;
+  padding-left: $padding;
+}
+
+
+/// Adds styles for a callout.
+/// @param {Color} $color [$callout-background] - Color to use.
+@mixin callout($color: $callout-background) {
+  @include callout-base;
+  @include callout-style($color);
+}
+
+@mixin foundation-callout {
+  .callout {
+    @include callout;
+
+    @each $name, $color in $foundation-colors {
+      &.#{$name} {
+        @include callout-style($color);
+      }
+    }
+
+    &.small {
+      @include callout-size(.5rem);
+    }
+
+    &.large {
+      @include callout-size(3rem);
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/components/_close-button.scss

@@ -0,0 +1,61 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group close-button
+////
+
+/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
+/// @type List
+$closebutton-position: right top !default;
+
+/// Right (or left) offset for a close button.
+/// @type Number
+$closebutton-offset-horizontal: 1rem !default;
+
+/// Top (or bottom) offset for a close button.
+/// @type Number
+$closebutton-offset-vertical: 0.5rem !default;
+
+/// Default font size of the close button.
+/// @type Number
+$closebutton-size: 2em !default;
+
+/// The line-height of the close button. It affects the spacing of the element.
+/// @type Number
+$closebutton-lineheight: 1 !default;
+
+/// Default color of the close button.
+/// @type Color
+$closebutton-color: $dark-gray !default;
+
+/// Default color of the close button when being hovered on.
+/// @type Color
+$closebutton-color-hover: $black !default;
+
+/// Adds styles for a close button, using the styles in the settings variables.
+@mixin close-button {
+  $x: nth($closebutton-position, 1);
+  $y: nth($closebutton-position, 2);
+
+  @include disable-mouse-outline;
+  position: absolute;
+  color: $closebutton-color;
+  #{$x}: $closebutton-offset-horizontal;
+  #{$y}: $closebutton-offset-vertical;
+  font-size: $closebutton-size;
+  line-height: $closebutton-lineheight;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    color: $closebutton-color-hover;
+  }
+}
+
+@mixin foundation-close-button {
+  .close-button {
+    @include close-button;
+  }
+}

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

@@ -0,0 +1,67 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group drilldown
+////
+
+/// Transition property to use for animating menus.
+/// @type Transition
+$drilldown-transition: transform 0.15s linear !default;
+
+/// Adds arrows to drilldown items with submenus, as well as the back button.
+/// @type Boolean
+$drilldown-arrows: true;
+
+@mixin foundation-drilldown-menu {
+  // Applied to the Menu container
+  .is-drilldown {
+    position: relative;
+    overflow: hidden;
+  }
+
+  // Applied to nested <ul>s
+  .is-drilldown-sub {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    z-index: -1;
+    height: 100%;
+    width: 100%;
+    background: $white;
+    transition: $drilldown-transition;
+
+    &.is-active {
+      z-index: 1;
+      display: block;
+      transform: translateX(-100%);
+    }
+
+    &.is-closing {
+      transform: translateX(100%);
+    }
+  }
+
+  @if $drilldown-arrows {
+    .is-drilldown-submenu-parent > a {
+      position: relative;
+
+      &::after {
+        @include css-triangle(6px, $primary-color, right);
+        position: absolute;
+        top: 50%;
+        margin-top: -6px;
+        right: 1rem;
+      }
+    }
+
+    .js-drilldown-back::before {
+      @include css-triangle(6px, $primary-color, left);
+      float: left;
+      margin-right: 0.75rem; // Creates space between the arrow and the text
+      margin-left: 0.6rem; // Lines the tip of the arrow with the items below
+      margin-top: 14px; // Aligns the arrow with the text
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/components/_dropdown-menu.scss

@@ -0,0 +1,123 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group dropdown-menu
+////
+
+/// Enables arrows for items with dropdown menus.
+/// @type Boolean
+$dropdownmenu-arrows: true !default;
+
+/// Minimum width of dropdown sub-menus.
+/// @type Length
+$dropdownmenu-min-width: 200px !default;
+
+/// Background color for dropdowns.
+/// @type Color
+$dropdownmenu-background: $white !default;
+
+/// Border for dropdown panes.
+/// @type List
+$dropdown-border: 1px solid $medium-gray !default;
+
+@mixin foundation-dropdown-menu {
+  .dropdown.menu {
+    .has-submenu {
+      position: relative;
+
+      a::after {
+        float: right;
+        margin-top: 3px;
+        margin-left: 10px;
+      }
+
+      @if $dropdownmenu-arrows {
+        &.is-down-arrow a {
+          padding-right: 1.5rem;
+          position: relative;
+        }
+        &.is-down-arrow > a::after {
+          @include css-triangle(5px, $anchor-color, down);
+          position: absolute;
+          top: 12px;
+          right: 5px;
+        }
+        &.is-left-arrow > a::after {
+          @include css-triangle(5px, $anchor-color, left);
+          float: left;
+          margin-left: 0;
+          margin-right: 10px;
+        }
+        &.is-right-arrow > a::after {
+          @include css-triangle(5px, $anchor-color, right);
+        }
+      }
+
+      &.is-left-arrow.opens-inner .submenu{
+        right: 0;
+        left: auto;
+      }
+      &.is-right-arrow.opens-inner .submenu{
+        left: 0;
+        right: auto;
+      }
+      &.opens-inner .submenu {
+        top: 100%;
+      }
+    }
+
+    .submenu {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 100%;
+      min-width: $dropdownmenu-min-width;
+      z-index: 1;
+      background: $dropdownmenu-background;
+      border: $dropdown-border;
+
+      > li {
+        width: 100%;
+      }
+
+      &.first-sub {
+        top: 100%;
+        left: 0;
+        right: auto;
+      }
+
+      &:not(.js-dropdown-nohover) > .has-submenu:hover > &,
+      &.js-dropdown-active {
+        display: block;
+      }
+    }
+
+    .has-submenu.opens-left .submenu {
+      left: auto;
+      right: 100%;
+    }
+
+    &.align-right {
+      .submenu.first-sub {
+        top: 100%;
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+
+  .is-dropdown-menu.vertical {
+    width: 100px;
+
+    &.align-right {
+      float: right;
+    }
+
+    > li .submenu {
+      top: 0;
+      left: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,64 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group dropdown
+////
+
+/// Padding for dropdown panes.
+/// @type List
+$dropdown-padding: 1rem !default;
+
+/// Border for dropdown panes.
+/// @type List
+$dropdown-border: 1px solid $medium-gray !default;
+
+/// Font size for dropdown panes.
+/// @type List
+$dropdown-font-size: 16rem !default;
+
+/// Width for dropdown panes.
+/// @type Number
+$dropdown-width: 300px !default;
+
+/// Border radius dropdown panes.
+/// @type Number
+$dropdown-radius: $global-radius !default;
+
+/// Sizes for dropdown panes. Each size is a CSS class you can apply.
+/// @type Map
+$dropdown-sizes: (
+  tiny: 100px,
+  small: 200px,
+  large: 400px,
+) !default;
+
+/// Applies styles for a basic dropdown.
+@mixin dropdown-container {
+  background-color: $body-background;
+  border: $dropdown-border;
+  display: block;
+  padding: $dropdown-padding;
+  position: absolute;
+  visibility: hidden;
+  width: 300px;
+  z-index: 10;
+  border-radius: $dropdown-radius;
+
+  &.is-open {
+    visibility: visible;
+  }
+}
+
+@mixin foundation-dropdown {
+  .dropdown-pane {
+    @include dropdown-container;
+  }
+
+  @each $name, $size in $dropdown-sizes {
+    .dropdown-pane.#{$name} {
+      width: $size;
+    }
+  }
+}