RubyGems - locomotivecms_wagon - Versions diffs - 2.4.0.rc2 → 2.4.0 - Mend

locomotivecms_wagon 2.4.0.rc2 → 2.4.0

Files changed (137) hide show

data/generators/foundation/public/stylesheets/foundation6/_global.scss CHANGED

@@ -2,41 +2,33 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
+// sass-lint:disable force-attribute-nesting, force-pseudo-nesting, no-color-literals, no-qualifying-elements
 ////
 /// @group global
 ////
-/// Global width of your site. Used by the grid to determine row width.
-/// @type Number
-$global-width: rem-calc(1200) !default;
 /// Font size attribute applied to `<html>` and `<body>`. We use 100% by default so the value is inherited from the user's browser settings.
 /// @type Number
 $global-font-size: 100% !default;
+/// Global width of your site. Used by the grid to determine row width.
+/// @type Number
+$global-width: rem-calc(1200) !default;
 /// Default line height for all type. `$global-lineheight` is 24px while `$global-font-size` is 16px
 /// @type Number
 $global-lineheight: 1.5 !default;
-/// Primary color for interactive components like links and buttons.
-/// @type Color
-$primary-color: #2199e8 !default;
-/// Secondary color, used with components that support the `.secondary` class.
-/// @type Color
-$secondary-color: #777 !default;
-/// Color to indicate a positive status or action, used with the `.success` class.
-/// @type Color
-$success-color: #3adb76 !default;
-/// Color to indicate a caution status or action, used with the `.warning` class.
-/// @type Color
-$warning-color: #ffae00 !default;
-/// Color to indicate a negative status or action, used with the `.alert` class.
-/// @type Color
-$alert-color: #ec5840 !default;
+/// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
+/// @type Map
+$foundation-palette: (
+  primary: #1779ba,
+  secondary: #767676,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #cc4b37,
+) !default;
 /// Color used for light gray UI items.
 /// @type Color
@@ -68,16 +60,12 @@ $body-font-color: $black !default;
 /// Font stack of the body.
 /// @type List
-$body-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif !default;
 /// Set to `true` to enable antialiased type, using the `-webkit-font-smoothing` and `-moz-osx-font-smoothing` CSS properties.
 /// @type Boolean
 $body-antialiased: true !default;
-/// Text direction for the document. Set to `rtl` to reverse the orientation and direction of all components.
-/// @type Keyword
-$text-direction: ltr !default;
 /// Global value used for margin on components.
 /// @type Number
 $global-margin: 1rem !default;
@@ -86,9 +74,9 @@ $global-margin: 1rem !default;
 /// @type Number
 $global-padding: 1rem !default;
-/// Global value used for margin between components.
+/// Global value used for positioning on components.
 /// @type Number
-$global-margin: 1rem !default;
+$global-position: 1rem !default;
 /// Global font weight used for normal type.
 /// @type Keyword | Number
@@ -102,45 +90,79 @@ $global-weight-bold: bold !default;
 /// @type Number
 $global-radius: 0 !default;
+/// Global value used for all menu styles. Can be overwritten at individual menu component level.
+/// @type Number
+$global-menu-padding: 0.7rem 1rem !default;
+/// Global value used for all menu styles. Nested margin for submenu.
+$global-menu-nested-margin: 1rem !default;
 /// Sets the text direction of the CSS. Can be either `ltr` or `rtl`.
+/// @type Keyword
 $global-text-direction: ltr !default;
+/// Enables flexbox for components that support it.
+/// @type Boolean
+$global-flexbox: true !default;
+/// Enabled responsive breakpoints for prototypes if applicable
+/// @type Boolean
+$global-prototype-breakpoints: false !default;
+/// Button cursor's value, `auto` by default
+/// @type Keyword
+$global-button-cursor: auto !default;
+@if not map-has-key($foundation-palette, primary) {
+  @error 'In $foundation-palette, you must have a color named "primary".';
+}
 // Internal variables used for text direction
 $global-left: if($global-text-direction == rtl, right, left);
 $global-right: if($global-text-direction == rtl, left, right);
-// Internal map used to iterate through colors, to generate CSS classes with less code
-$foundation-colors: (
-  primary: $primary-color,
-  secondary: $secondary-color,
-  success: $success-color,
-  alert: $alert-color,
-  warning: $warning-color,
-);
+/// Global tolerance for color pick contrast.
+/// @type Number
+$global-color-pick-contrast-tolerance: 0 !default;
+// Internal variables used for colors
+$primary-color: get-color(primary);
+$secondary-color: get-color(secondary);
+$success-color: get-color(success);
+$warning-color: get-color(warning);
+$alert-color: get-color(alert);
 @mixin foundation-global-styles {
-  html,
-  body {
-    font-size: $global-font-size;
+  @include -zf-normalize;
+  // These styles are applied to a <meta> tag, which is read by the Foundation JavaScript
+  .foundation-mq {
+    font-family: '#{-zf-bp-serialize($breakpoints)}';
+  }
+  html {
     box-sizing: border-box;
+    font-size: $global-font-size;
   }
   // Set box-sizing globally to handle padding and border widths
   *,
-  *:before,
-  *:after {
+  *::before,
+  *::after {
     box-sizing: inherit;
   }
   // Default body styles
   body {
-    padding: 0;
     margin: 0;
+    padding: 0;
+    background: $body-background;
     font-family: $body-font-family;
     font-weight: $global-weight-normal;
     line-height: $global-lineheight;
     color: $body-font-color;
-    background: $body-background;
     @if ($body-antialiased) {
       -webkit-font-smoothing: antialiased;
@@ -149,14 +171,14 @@ $foundation-colors: (
   }
   img {
+    // Get rid of gap under images by making them display: inline-block; by default
+    display: inline-block;
+    vertical-align: middle;
     // Grid defaults to get images and embeds to work properly
     max-width: 100%;
     height: auto;
     -ms-interpolation-mode: bicubic;
-    // Get rid of gap under images by making them display: inline-block; by default
-    display: inline-block;
-    vertical-align: middle;
   }
   // Make sure textarea takes on height automatically
@@ -168,13 +190,13 @@ $foundation-colors: (
   // Make select elements are 100% width by default
   select {
+    box-sizing: border-box;
     width: 100%;
     border-radius: $global-radius;
   }
   // Styles Google Maps and MapQuest embeds properly
-  // scss-lint:disable IdSelector
-  #map_canvas,
+  // sass-lint:disable-line no-ids
   .map_canvas,
   .mqa-display {
     img,
@@ -186,12 +208,42 @@ $foundation-colors: (
   // Reset <button> styles created by most browsers
   button {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background: transparent;
+    @include disable-mouse-outline;
     padding: 0;
+    appearance: none;
     border: 0;
     border-radius: $global-radius;
+    background: transparent;
     line-height: 1;
+    cursor: $global-button-cursor;
+  }
+  // Prevent text overflow on pre
+  pre {
+    overflow: auto;
   }
+  // Make reset inherit font-family instead of settings sans-serif
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+  }
+  // Internal classes to show/hide elements in JavaScript
+  .is-visible {
+    display: block !important;
+  }
+  .is-hidden {
+    display: none !important;
+  }
+}
+/// Loads normalize.css.
+/// @access private
+@mixin -zf-normalize {
+  @include normalize();
 }

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

@@ -2,27 +2,170 @@
 /// @group accordion-menu
 ////
+/// Sets accordion menu padding.
+/// @type Number
+$accordionmenu-padding: $global-menu-padding !default;
+/// Sets accordion menu nested margin
+/// @type Number
+$accordionmenu-nested-margin: $global-menu-nested-margin !default;
+/// Sets accordion menu submenu padding.
+/// @type Number
+$accordionmenu-submenu-padding: $accordionmenu-padding !default;
 /// Sets if accordion menus have the default arrow styles.
 /// @type Boolean
-$accordionmenu-arrows: true;
+$accordionmenu-arrows: true !default;
+/// Sets accordion menu arrow color if arrow is used.
+/// @type Color
+$accordionmenu-arrow-color: $primary-color !default;
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-item-background: null !default;
+/// Sets accordion menu item border.
+/// @type Color
+$accordionmenu-border: null !default;
+/// Sets accordion menu item padding.
+/// @type Color
+$accordionmenu-submenu-toggle-background: null !default;
+/// Sets accordion menu item padding.
+/// @type List
+$accordion-submenu-toggle-border: $accordionmenu-border !default;
+/// Sets accordion menu submenu toggle background width.
+/// @type Number
+$accordionmenu-submenu-toggle-width: 40px !default;
+/// Sets accordion menu submenu toggle background height.
+/// @type Number
+$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default;
+/// Sets accordion menu arrow size if arrow is used.
+/// @type Length
+$accordionmenu-arrow-size: 6px !default;
+@mixin zf-accordion-menu-left-right-arrows {
+  .is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
+    position: relative;
+    &::after {
+      @include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
+      position: absolute;
+      top: 50%;
+      margin-top: -1 * ($accordionmenu-arrow-size / 2);
+      #{$global-right}: 1rem;
+    }
+  }
+  &.align-left .is-accordion-submenu-parent > a::after {
+    left: auto;
+    right: 1rem;
+  }
+  &.align-right .is-accordion-submenu-parent > a::after {
+    right: auto;
+    left: 1rem;
+  }
+}
 @mixin foundation-accordion-menu {
-  @if $accordionmenu-arrows {
-    .is-accordion-submenu-parent > a {
-      position: relative;
-      &::after {
-        @include css-triangle(6px, $primary-color, down);
-        position: absolute;
-        top: 50%;
-        margin-top: -4px;
-        right: 1rem;
+  .accordion-menu {
+    @if $accordionmenu-border {
+      border-bottom: $accordionmenu-border;
+    }
+    li {
+      @if $accordionmenu-border {
+        border-top: $accordionmenu-border;
+        border-right: $accordionmenu-border;
+        border-left: $accordionmenu-border;
       }
+      width: 100%;
     }
-    .is-accordion-submenu-parent[aria-expanded="true"] > a::after {
-      transform-origin: 50% 50%;
-      transform: scaleY(-1);
+    a {
+      @if $accordionmenu-item-background {
+        background: $accordionmenu-item-background;
+      }
+      padding: $accordionmenu-padding;
+    }
+    .is-accordion-submenu a {
+      padding: $accordionmenu-submenu-padding;
+    }
+    .nested.is-accordion-submenu {
+      @include menu-nested($accordionmenu-nested-margin);
     }
+    &.align-#{$global-right} {
+      .nested.is-accordion-submenu {
+        @include menu-nested($accordionmenu-nested-margin, right);
+      }
+    }
+    @if $accordionmenu-arrows {
+      @include zf-accordion-menu-left-right-arrows;
+      .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+        transform: rotate(180deg);
+        transform-origin: 50% 50%;
+      }
+    }
+  }
+  .is-accordion-submenu li {
+    @if $accordionmenu-border {
+      border-right: 0;
+      border-left: 0;
+    }
+  }
+  .is-accordion-submenu-parent {
+    position: relative;
+  }
+  .has-submenu-toggle > a {
+    margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
+  }
+  // Submenu toggle
+  .submenu-toggle {
+    position: absolute;
+    top: 0;
+    #{$global-right}: 0;
+    cursor: pointer;
+    width: $accordionmenu-submenu-toggle-width;
+    height: $accordionmenu-submenu-toggle-height;
+    border-#{$global-left}: $accordion-submenu-toggle-border;
+    @if $accordionmenu-submenu-toggle-background {
+      background: $accordionmenu-submenu-toggle-background;
+    }
+    // Add the arrow to the toggle
+    &::after {
+      @include css-triangle(6px, $accordionmenu-arrow-color, down);
+      top: 0;
+      bottom: 0;
+      margin: auto;
+    }
+  }
+  // Rotate the arrow when menu is open
+  .submenu-toggle[aria-expanded='true']::after {
+    transform: scaleY(-1);
+    transform-origin: 50% 50%;
+  }
+  .submenu-toggle-text {
+    @include element-invisible;
   }
 }

data/generators/foundation/public/stylesheets/foundation6/components/_accordion.scss CHANGED

@@ -8,15 +8,19 @@
 /// Default background color of an accordion group.
 /// @type Color
-$accordion-background: $white;
+$accordion-background: $white !default;
 /// If `true`, adds plus and minus icons to the side of each accordion title.
 /// @type Boolean
-$accordion-plusminus: true;
+$accordion-plusminus: true !default;
+/// Font size of accordion titles.
+/// @type Number
+$accordion-title-font-size: rem-calc(12) !default;
 /// Default text color for items in a Menu.
 /// @type Color
-$accordion-item-color: foreground($accordion-background, $primary-color);
+$accordion-item-color: $primary-color !default;
 /// Default background color on hover for items in a Menu.
 /// @type Color
@@ -36,61 +40,100 @@ $accordion-content-border: 1px solid $light-gray !default;
 /// Default text color of tab content.
 /// @type Color
-$accordion-content-color: foreground($accordion-background, $primary-color);
+$accordion-content-color: $body-font-color !default;
 /// Default padding for tab content.
 /// @type Number | List
 $accordion-content-padding: 1rem !default;
 /// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
-@mixin accordion-container {
-  list-style-type: none;
-  background: $accordion-background;
-  border: $accordion-content-border;
-  border-radius: $global-radius;
+@mixin accordion-container (
+  $background: $accordion-background
+) {
   margin-#{$global-left}: 0;
+  background: $background;
+  list-style-type: none;
+  &[disabled] {
+    .accordion-title {
+      cursor: not-allowed;
+    }
+  }
+}
+/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
+@mixin accordion-item {
+  &:first-child > :first-child {
+    border-radius: $global-radius $global-radius 0 0;
+  }
+  &:last-child > :last-child {
+    border-radius: 0 0 $global-radius $global-radius;
+  }
 }
 /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
-@mixin accordion-title {
+@mixin accordion-title (
+  $padding: $accordion-item-padding,
+  $font-size: $accordion-title-font-size,
+  $color: $accordion-item-color,
+  $border: $accordion-content-border,
+  $background-hover: $accordion-item-background-hover
+) {
+  position: relative;
   display: block;
-  padding: $accordion-item-padding;
+  padding: $padding;
+  border: $border;
+  border-bottom: 0;
+  font-size: $font-size;
   line-height: 1;
-  font-size: rem-calc(12);
-  color: $accordion-item-color;
-  position: relative;
-  border-bottom: $accordion-content-border;
+  color: $color;
-  &:hover,
-  &:focus {
-    background-color: $accordion-item-background-hover;
+  :last-child:not(.is-active) > & {
+    border-bottom: $border;
+    border-radius: 0 0 $global-radius $global-radius;
   }
-  // Remove the border on the last title
-  :last-child > & {
-    border-bottom-width: 0;
+  &:hover,
+  &:focus {
+    background-color: $background-hover;
   }
   @if $accordion-plusminus {
     &::before {
-      content: '+';
       position: absolute;
-      #{$global-right}: 1rem;
       top: 50%;
+      #{$global-right}: 1rem;
       margin-top: -0.5rem;
+      content: '+';
     }
     .is-active > &::before {
-      content: '–';
+      content: '\2013';
     }
   }
 }
 /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
-@mixin accordion-content {
-  padding: $accordion-item-padding;
+@mixin accordion-content (
+  $padding: $accordion-content-padding,
+  $border: $accordion-content-border,
+  $background: $accordion-content-background,
+  $color: $accordion-content-color
+) {
   display: none;
-  border-bottom: $accordion-content-border;
+  padding: $padding;
+  border: $border;
+  border-bottom: 0;
+  background-color: $background;
+  color: $color;
+  :last-child > &:last-child {
+    border-bottom: $border;
+  }
 }
 @mixin foundation-accordion {
@@ -99,7 +142,7 @@ $accordion-content-padding: 1rem !default;
   }
   .accordion-item {
-    // This class doesn't need styles!
+    @include accordion-item;
   }
   .accordion-title {