locomotivecms_wagon 2.2.0.beta1 → 2.2.0.rc1

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

@@ -0,0 +1,137 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group tabs
+////
+
+/// Default margin of the tab bar.
+/// @type Number
+$tab-margin: 0 !default;
+
+/// Default background color of a tab bar.
+/// @type Color
+$tab-background: $white !default;
+
+/// active background color of a tab bar.
+/// @type Color
+$tab-background-active: $light-gray !default;
+
+/// Default border color of tab content.
+/// @type Color
+$tab-border: $light-gray !default;
+
+/// Default text color for items in a Menu.
+/// @type Color
+$tab-item-color: foreground($tab-background, $primary-color) !default;
+
+/// Default background color on hover for items in a Menu.
+$tab-item-background-hover: $white !default;
+
+/// Default padding of a a tab item.
+/// @type Number
+$tab-item-padding: 1.25rem 1.5rem !default;
+
+/// Maximum number of `expand-n` classes to include in the CSS.
+/// @type Number
+$tab-expand-max: 6 !default;
+
+/// Default background color of tab content.
+/// @type Color
+$tab-content-background: $white !default;
+
+/// Default border color of tab content.
+/// @type Color
+$tab-content-border: $light-gray !default;
+
+/// Default text color of tab content.
+/// @type Color
+$tab-content-color: foreground($tab-background, $primary-color) !default;
+
+/// Default padding for tab content.
+/// @type Number | List
+$tab-content-padding: 1rem !default;
+
+@mixin foundation-tabs {
+  .tabs {
+    @include clearfix;
+    margin: $tab-margin;
+    list-style-type: none;
+    background: $tab-background;
+    border: 1px solid $tab-content-border;
+
+    // Simple
+    &.simple {
+      > li > a {
+        padding: 0;
+
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+
+    // Vertical
+    &.vertical {
+      > li {
+        width: auto;
+        float: none;
+        display: block;
+      }
+    }
+
+    // Primary color
+    &.primary {
+      background: $primary-color;
+
+      > li > a {
+        color: foreground($primary-color);
+
+        &:hover,
+        &:focus {
+          background: smart-scale($primary-color);
+        }
+      }
+    }
+  }
+
+  .tabs-title {
+    float: #{$global-left};
+
+    > a {
+      display: block;
+      padding: $tab-item-padding;
+      line-height: 1;
+      font-size: 12px;
+      color: $tab-item-color;
+
+      &:hover,
+      &:focus,
+      &[aria-selected="true"] {
+        background: $tab-background-active;
+      }
+    }
+  }
+
+  .tabs-content {
+    background: $tab-content-background;
+    transition: all 0.5s ease;
+    border: 1px solid $tab-content-border;
+    border-top: 0;
+
+    &.vertical {
+      border: 1px solid $tab-content-border;
+      border-#{$global-left}: 0;
+    }
+  }
+
+  .tabs-panel {
+    display: none;
+    padding: $tab-content-padding;
+
+    &.is-active {
+      display: block;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group thumbnail
+////
+
+/// Border around thumbnail images.
+/// @type Border
+$thumbnail-border: solid 4px $white !default;
+
+/// Bottom margin for thumbnail images.
+/// @type Length
+$thumbnail-margin-bottom: $global-margin !default;
+
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
+
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
+
+/// Transition proprties for thumbnail images.
+/// @type Transition
+$thumbnail-transition: box-shadow 200ms ease-out !default;
+
+/// Default radius for thumbnail images.
+/// @type Number
+$thumbnail-radius: $global-radius !default;
+
+/// Adds thumbnail styles to an element.
+@mixin thumbnail {
+  border: $thumbnail-border;
+  box-shadow: $thumbnail-shadow;
+  display: inline-block;
+  line-height: 0;
+  max-width: 100%;
+  transition: $thumbnail-transition;
+  border-radius: $thumbnail-radius;
+  margin-bottom: $thumbnail-margin-bottom;
+
+  &:hover,
+  &:focus {
+    box-shadow: $thumbnail-shadow-hover;
+  }
+}
+
+@mixin foundation-thumbnail {
+  .thumbnail {
+    @include thumbnail;
+  }
+}

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

@@ -0,0 +1,44 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group title-bar
+////
+
+@mixin foundation-title-bar {
+  .title-bar {
+    @include clearfix;
+    background: $black;
+    color: $white;
+    padding: 0.5rem;
+
+    .menu-icon {
+      margin-#{$global-left}: 0.25rem;
+      margin-#{$global-right}: 0.5rem;
+    }
+  }
+
+  .title-bar-left {
+    float: left;
+  }
+
+  .title-bar-right {
+    float: right;
+    text-align: right;
+  }
+
+  .title-bar-title {
+    font-weight: bold;
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  .menu-icon {
+    @include hamburger($color: white, $color-hover: $medium-gray);
+  }
+
+  .menu-icon.dark {
+    @include hamburger;
+  }
+}

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

@@ -0,0 +1,110 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group tooltip
+////
+
+/// Default color of the tooltip background.
+/// @type Color
+$tooltip-background-color: $black !default;
+
+/// Default color of the tooltip font.
+/// @type Color
+$tooltip-color: $white;
+
+/// Default padding of the tooltip background.
+/// @type Number
+$tooltip-padding: 0.75rem !default;
+
+/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
+/// @type Number
+$tooltip-font-size: $small-font-size !default;
+
+/// Default pip width for tooltips.
+/// @type Number
+$tooltip-pip-width: 0.75rem !default;
+
+/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.
+/// @type Number
+$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
+
+/// Default pip offset for tooltips. This controls how far the pip is indented from the left edge of the tooltip.
+/// @type Number
+$tooltip-pip-offset: 1.25rem !default;
+
+/// Default radius for tooltips.
+/// @type Number
+$tooltip-radius: $global-radius !default;
+
+@mixin has-tip {
+  border-bottom: dotted 1px $dark-gray;
+  font-weight: bold;
+  position: relative;
+  display: inline-block;
+
+  &:hover {
+    cursor: help;
+  }
+}
+
+@mixin tooltip {
+  background-color: $tooltip-background-color;
+  color: $tooltip-color;
+  font-size: $tooltip-font-size;
+  padding: $tooltip-padding;
+  position: absolute;
+  z-index: 10;
+  top: calc(100% + #{$tooltip-pip-height});
+  max-width: 10rem !important;
+  border-radius: $tooltip-radius;
+  // visibility: hidden;
+
+  &::before {
+    @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
+    bottom: 100%;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &.top {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
+      top: 100%;
+      bottom: auto;
+    }
+  }
+
+  &.left {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
+      bottom: auto;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &.right {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
+      bottom: auto;
+      left: auto;
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+@mixin foundation-tooltip {
+  .has-tip {
+    @include has-tip;
+  }
+
+  .tooltip {
+    @include tooltip;
+  }
+}

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

@@ -0,0 +1,57 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group top-bar
+////
+
+/// Padding for the top bar.
+/// @type Number
+$topbar-padding: 0.5rem !default;
+
+/// Background color for the top bar. This color also cascades to menus within the top bar.
+/// @type Color
+$topbar-background: #eee !default;
+
+/// Color for links inside a top bar menu.
+/// @type Color
+$topbar-link-color: #fff !default;
+
+/// Width of `<input>` elements inside the top bar.
+/// @type Number
+$topbar-input-width: 200px !default;
+
+/// Adds styles for a top bar container.
+@mixin top-bar-container {
+  @include clearfix;
+  padding: $topbar-padding;
+
+  &, ul {
+    background-color: $topbar-background;
+  }
+
+  input {
+    width: $topbar-input-width;
+    margin-#{$global-right}: 1rem;
+  }
+}
+
+@mixin foundation-top-bar {
+  // Top bar container
+  .top-bar {
+    @include top-bar-container;
+  }
+
+  // Sub-sections
+  // Stack on small screens
+  @include breakpoint(medium) {
+    .top-bar-left {
+      float: left;
+    }
+
+    .top-bar-right {
+      float: right
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+/// Hide an element by default, only displaying it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin show-for($size) {
+  $size: map-get($breakpoints, $size);
+  $size: -zf-bp-to-em($size) - (1/16);
+
+  @include breakpoint($size down) {
+    display: none !important;
+  }
+}
+
+/// Hide an element by default, only displaying it within a certain breakpoint.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin show-for-only($size) {
+  $lower-bound-size: map-get($breakpoints, $size);
+  $upper-bound-size: -zf-map-next($breakpoints, $size);
+
+  // more often than not this will be correct, just one time round the loop it won't so set in scope here
+  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
+  // test actual lower-bound-size, if 0 set it to 0em
+  @if $lower-bound-size == 0 {
+    $lower-bound: -zf-bp-to-em($lower-bound-size);
+  }
+
+  @if $upper-bound-size == null {
+    @media screen and (max-width: $lower-bound) {
+      display: none !important;
+    }
+  }
+  @else {
+    $upper-bound: -zf-bp-to-em($upper-bound-size);
+    @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
+      display: none !important;
+    }
+  }
+}
+
+
+/// Show an element by default, and hide it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin hide-for($size) {
+  @include breakpoint($size) {
+    display: none !important;
+  }
+}
+
+/// Show an element by default, and hide it above a certain screen size.
+/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
+@mixin hide-for-only($size) {
+  @include breakpoint($size only) {
+    display: none !important;
+  }
+}
+
+@mixin foundation-visibility-classes {
+  // Basic hiding classes
+  .hide {
+    display: none !important;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  // Responsive visibility classes
+  @each $size in $breakpoint-classes {
+    @if $size != small {
+      .hide-for-#{$size} {
+        @include hide-for($size);
+      }
+
+      .show-for-#{$size} {
+        @include show-for($size);
+      }
+    }
+
+    .hide-for-#{$size}-only {
+      @include hide-for-only($size);
+    }
+
+    .show-for-#{$size}-only {
+      @include show-for-only($size);
+    }
+  }
+
+  // Screen reader visibility classes
+  // Need a "hide-for-sr" class? Add aria-hidden="true" to the element
+  .show-for-sr,
+  .show-on-focus {
+    @include element-invisible;
+  }
+
+  // Only display the element when it's focused
+  .show-on-focus {
+    &:active,
+    &:focus {
+      @include element-invisible-off;
+    }
+  }
+
+  // Landscape and portrait visibility
+  .show-for-landscape,
+  .hide-for-portrait {
+    display: block !important;
+
+    @include breakpoint(landscape) {
+      display: block !important;
+    }
+
+    @include breakpoint(portrait) {
+      display: none !important;
+    }
+  }
+
+  .hide-for-landscape,
+  .show-for-portrait {
+    display: none !important;
+
+    @include breakpoint(landscape) {
+      display: none !important;
+    }
+
+    @include breakpoint(portrait) {
+      display: block !important;
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/forms/_checkbox.scss

@@ -0,0 +1,36 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+@mixin foundation-form-checkbox {
+  [type="file"],
+  [type="checkbox"],
+  [type="radio"] {
+    margin: 0 0 $form-spacing;
+  }
+
+  // Styles for input/label siblings
+  [type="checkbox"] + label,
+  [type="radio"] + label {
+    display: inline-block;
+    margin-#{$global-left}: $form-spacing * 0.5;
+    margin-#{$global-right}: $form-spacing;
+    margin-bottom: 0;
+    vertical-align: baseline;
+  }
+
+  // Styles for inputs inside labels
+  label > [type="checkbox"],
+  label > [type="label"] {
+    margin-#{$global-right}: $form-spacing * 0.5;
+  }
+
+  // Normalize file input width
+  [type="file"] {
+    width: 100%;
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/forms/_error.scss

@@ -0,0 +1,81 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group abide
+////
+
+/// Sets if error styles should be added to inputs.
+/// @type Boolean
+$abide-inputs: true !default;
+
+/// Sets if error styles should be added to labels.
+/// @type Boolean
+$abide-labels: true !default;
+
+/// Background color to use for invalid text inputs.
+/// @type Color
+$input-background-invalid: $alert-color !default;
+
+/// Color to use for labels of invalid inputs.
+/// @type Color
+$form-label-color-invalid: $alert-color !default;
+
+/// Default font color for form error text.
+/// @type Color
+$input-error-color: $alert-color !default;
+
+/// Default font size for form error text.
+/// @type Number
+$input-error-font-size: rem-calc(12) !default;
+
+/// Default font weight for form error text.
+/// @type Keyword
+$input-error-font-weight: $global-weight-bold !default;
+
+/// Styles the background and border of an input field to have an error state.
+/// @param {Color} $background [$alert-color] - Color to use for the background and border.
+@mixin form-input-error(
+  $background: $alert-color
+) {
+  &:not(:focus) {
+    background-color: rgba($background, 0.1);
+    border-color: $background;
+  }
+}
+
+/// Adds error styles to a form element, using the values in the settings file.
+@mixin form-error {
+  display: none;
+  margin-top: $form-spacing * -0.5;
+  margin-bottom: $form-spacing;
+  font-size: $input-error-font-size;
+  font-weight: $input-error-font-weight;
+  color: $input-error-color;
+}
+
+@mixin foundation-form-error {
+  @if $abide-inputs {
+    // Error class for invalid inputs
+    .is-invalid-input {
+      @include form-input-error;
+    }
+  }
+
+  @if $abide-labels {
+    // Error class for labels of invalid outputs
+    .is-invalid-label {
+      color: $form-label-color-invalid;
+    }
+  }
+
+  // Form error element
+  .form-error {
+    @include form-error;
+
+    &.is-visible {
+      display: block;
+    }
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/forms/_fieldset.scss

@@ -0,0 +1,53 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group forms
+////
+
+/// Default border around custom fieldsets.
+/// @type Border
+$fieldset-border: 1px solid $medium-gray !default;
+
+/// Default padding inside custom fieldsets.
+/// @type Number
+$fieldset-padding: rem-calc(20) !default;
+
+/// Default margin around custom fieldsets.
+/// @type Number
+$fieldset-margin: rem-calc(18 0) !default;
+
+/// Default padding between the legend text and fieldset border.
+/// @type Number
+$legend-padding: rem-calc(0 3) !default;
+
+@mixin fieldset {
+  border: $fieldset-border;
+  padding: $fieldset-padding;
+  margin: $fieldset-margin;
+
+  legend {
+    // Covers up the fieldset's border to create artificial padding
+    background: $body-background;
+    padding: $legend-padding;
+    margin: 0;
+    margin-#{$global-left}: rem-calc(-3);
+  }
+}
+
+@mixin foundation-form-fieldset {
+  fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  legend {
+    margin-bottom: $form-spacing * 0.5;
+  }
+
+  .fieldset {
+    @include fieldset;
+  }
+}