locomotivecms_wagon 2.4.0.rc2 → 2.4.0

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

@@ -12,7 +12,15 @@ $badge-background: $primary-color !default;
 
 /// Default text color for badges.
 /// @type Color
-$badge-color: foreground($badge-background) !default;
+$badge-color: $white !default;
+
+/// Alternate text color for badges.
+/// @type Color
+$badge-color-alt: $black !default;
+
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$badge-palette: $foundation-palette !default;
 
 /// Default padding inside badges.
 /// @type Number
@@ -29,11 +37,13 @@ $badge-font-size: 0.6rem !default;
 /// Generates the base styles for a badge.
 @mixin badge {
   display: inline-block;
-  padding: $badge-padding;
   min-width: $badge-minwidth;
+  padding: $badge-padding;
+
+  border-radius: 50%;
+
   font-size: $badge-font-size;
   text-align: center;
-  border-radius: 50%;
 }
 
 @mixin foundation-badge {
@@ -43,12 +53,10 @@ $badge-font-size: 0.6rem !default;
     background: $badge-background;
     color: $badge-color;
 
-    @each $name, $color in $foundation-colors {
-      @if $name != primary {
-        &.#{$name} {
-          background: $color;
-          color: foreground($color);
-        }
+    @each $name, $color in $badge-palette {
+      &.#{$name} {
+        background: $color;
+        color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
       }
     }
   }

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

@@ -34,38 +34,60 @@ $breadcrumbs-item-margin: 0.75rem !default;
 /// @type Boolean
 $breadcrumbs-item-uppercase: true !default;
 
-/// If `true`, adds a slash between breadcrumb links.
+/// If `true`, adds a seperator between breadcrumb links.
 /// @type Boolean
-$breadcrumbs-item-slash: true !default;
+$breadcrumbs-item-separator: true !default;
+
+// If it exists $breadcrumbs-item-slash is used to build $breadcrumbs-item-separator. See the documentation.
+@if variable-exists(breadcrumbs-item-slash) {
+  $breadcrumbs-item-separator: $breadcrumbs-item-slash;
+}
+
+/// Used character for the breadcrumb separator.
+/// @type Content
+$breadcrumbs-item-separator-item: '/' !default;
+
+/// Used character for the breadcrumb separator in rtl mode.
+/// @type Content
+$breadcrumbs-item-separator-item-rtl: '\\' !default;
+
+/// Color of breadcrumb item.
+/// @type Color
+$breadcrumbs-item-separator-color: $medium-gray !default;
+
+// If it exists $breadcrumbs-item-slash-color is used to build $breadcrumbs-item-separator-color. See the documentation.
+@if variable-exists(breadcrumbs-item-slash-color) {
+  $breadcrumbs-item-separator-color: $breadcrumbs-item-slash-color;
+}
 
 /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
 @mixin breadcrumbs-container {
   @include clearfix;
-  list-style: none;
   margin: $breadcrumbs-margin;
+  list-style: none;
 
   // Item wrapper
   li {
     float: #{$global-left};
-    color: $breadcrumbs-item-color-current;
+
     font-size: $breadcrumbs-item-font-size;
+    color: $breadcrumbs-item-color-current;
     cursor: default;
 
     @if $breadcrumbs-item-uppercase {
       text-transform: uppercase;
     }
 
-    @if $breadcrumbs-item-slash {
+    @if $breadcrumbs-item-separator {
       // Need to escape the backslash
-      $slash: if($global-text-direction == 'ltr', '/', '\\');
+      $separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);
 
       &:not(:last-child)::after {
-        color: $medium-gray;
-        content: $slash;
-        margin: 0 $breadcrumbs-item-margin;
         position: relative;
-        top: 1px;
+        margin: 0 $breadcrumbs-item-margin;
         opacity: 1;
+        content: $separator;
+        color: $breadcrumbs-item-separator-color;
       }
     }
     @else {
@@ -89,6 +111,7 @@ $breadcrumbs-item-slash: true !default;
 
     .disabled {
       color: $breadcrumbs-item-color-disabled;
+      cursor: not-allowed;
     }
   }
 }

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

@@ -8,53 +8,115 @@
 
 /// Margin for button groups.
 /// @type Number
-$buttongroup-margin: 1rem;
+$buttongroup-margin: 1rem !default;
 
 /// Margin between buttons in a button group.
-/// @type Border
-$buttongroup-spacing: 1px;
+/// @type Number
+$buttongroup-spacing: 1px !default;
 
 /// Selector for the buttons inside a button group.
 /// @type String
-$buttongroup-child-selector: '.button';
+$buttongroup-child-selector: '.button' !default;
 
 /// Maximum number of buttons that can be in an even-width button group.
 /// @type Number
-$buttongroup-expand-max: 6;
+$buttongroup-expand-max: 6 !default;
+
+/// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.
+/// @type Boolean
+$buttongroup-radius-on-each: true !default;
 
 /// Add styles for a button group container.
 /// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
 @mixin button-group(
-  $child-selector: $buttongroup-child-selector
+  $child-selector: $buttongroup-child-selector,
+  $spacing: $buttongroup-spacing
 ) {
   @include clearfix;
   margin-bottom: $buttongroup-margin;
-  font-size: map-get($button-sizes, default);
+
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+  @else {
+    font-size: 0;
+  }
 
   #{$child-selector} {
-    float: #{$global-left};
     margin: 0;
-    font-size: inherit;
+    margin-#{$global-right}: $spacing;
+    margin-bottom: $spacing;
+    font-size: map-get($button-sizes, default);
+
+    @if $global-flexbox {
+      flex: 0 0 auto;
+    }
 
-    &:not(:last-child) {
-      border-#{$global-right}: $buttongroup-spacing solid $body-background;
+    &:last-child {
+      margin-#{$global-right}: 0;
     }
+
+    @if not $buttongroup-radius-on-each {
+      border-radius: 0;
+
+      &:first-child {
+        border-top-#{$global-left}-radius: $button-radius;
+        border-bottom-#{$global-left}-radius: $button-radius;
+      }
+
+      &:last-child {
+        border-top-#{$global-right}-radius: $button-radius;
+        border-bottom-#{$global-right}-radius: $button-radius;
+      }
+    }
+
   }
 }
 
 /// Creates a full-width button group, making each button equal width.
-/// @param {Keyword|Number} $count [auto] - Number of buttons inside the button group. Set to `auto` to generate CSS that will account for a variable number of buttons.
 /// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
 @mixin button-group-expand(
-  $count: auto,
-  $selector: $buttongroup-child-selector
+  $selector: $buttongroup-child-selector,
+  $spacing: $buttongroup-spacing,
+  $count: null
 ) {
+  @if not $global-flexbox {
+    margin-#{$global-right}: -$spacing;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+
   #{$selector} {
-    @if $count == auto {
-      @include auto-width($buttongroup-expand-max, $selector);
+    @if $global-flexbox {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
     }
-    @else if type-of($count) == 'number' {
-      width: percentage(1 / $count);
+    @else {
+      // One child
+      &:first-child:last-child {
+        width: 100%;
+      }
+
+      // Two or more childreen
+      @for $i from 2 through $buttongroup-expand-max {
+        &:first-child:nth-last-child(#{$i}) {
+          &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
+            display: inline-block;
+            width: calc(#{percentage(1 / $i)} - #{$spacing});
+            margin-#{$global-right}: $spacing;
+
+            &:last-child {
+              margin-#{$global-right}: $spacing * -$buttongroup-expand-max;
+            }
+          }
+        }
+      }
     }
   }
 }
@@ -64,9 +126,38 @@ $buttongroup-expand-max: 6;
 @mixin button-group-stack(
   $selector: $buttongroup-child-selector
 ) {
+  @if $global-flexbox {
+    flex-wrap: wrap;
+  }
+
   #{$selector} {
-    width: 100%;
-    border-#{$global-right}: 0;
+    @if $global-flexbox {
+      flex: 0 0 100%;
+    }
+    @else {
+      width: 100%;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+
+    @if not $buttongroup-radius-on-each {
+      border-radius: 0;
+
+      &:first-child{
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: $global-radius;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+      }
+    }
+
   }
 }
 
@@ -76,11 +167,28 @@ $buttongroup-expand-max: 6;
   $selector: $buttongroup-child-selector
 ) {
   #{$selector} {
-    width: auto;
+    @if $global-flexbox {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+    @else {
+      width: auto;
+    }
+    margin-bottom: 0;
 
-    &:not(:last-child) {
-      border-#{$global-right}: $buttongroup-spacing solid $body-background;
+    @if not $buttongroup-radius-on-each {
+      &:first-child {
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+      }
+
+      &:last-child {
+        border-top-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-left}-radius: 0;
+      }
     }
+
   }
 }
 
@@ -89,20 +197,33 @@ $buttongroup-expand-max: 6;
     @include button-group;
 
     // 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); }
+    @each $size, $value in map-remove($button-sizes, default) {
+      &.#{$size} #{$buttongroup-child-selector} {
+        font-size: $value;
+      }
+    }
+
+    // Even-width Group
     &.expanded { @include button-group-expand; }
 
     // Colors
-    @each $name, $color in $foundation-colors {
-      &.#{$name} #{$buttongroup-child-selector} {
-        @include button-style($color, auto, auto);
+    @each $name, $color in $foundation-palette {
+      @if $button-fill != hollow {
+        &.#{$name} #{$buttongroup-child-selector} {
+          @include button-style($color, auto, auto);
+        }
+      }
+      @else {
+        &.#{$name} #{$buttongroup-child-selector} {
+          @include button-hollow;
+          @include button-hollow-style($color);
+        }
       }
     }
 
     &.stacked,
-    &.stacked-for-small {
+    &.stacked-for-small,
+    &.stacked-for-medium {
       @include button-group-stack;
     }
 
@@ -111,5 +232,22 @@ $buttongroup-expand-max: 6;
         @include button-group-unstack;
       }
     }
+
+    &.stacked-for-medium {
+      @include breakpoint(large) {
+        @include button-group-unstack;
+      }
+    }
+
+    &.stacked-for-small.expanded { // sass-lint:disable-line force-element-nesting
+      @include breakpoint(small only) {
+        display: block;
+
+        #{$buttongroup-child-selector} {
+          display: block;
+          margin-#{$global-right}: 0;
+        }
+      }
+    }
   }
 }

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

@@ -6,13 +6,17 @@
 /// @group button
 ////
 
+/// Font family for button elements.
+/// @type Font
+$button-font-family: inherit !default;
+
 /// 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;
+$button-margin: 0 0 $global-margin 0 !default;
 
 /// Default fill for buttons. Can either be `solid` or `hollow`.
 /// @type Keyword
@@ -28,16 +32,20 @@ $button-background-hover: scale-color($button-background, $lightness: -15%) !def
 
 /// Font color for buttons.
 /// @type List
-$button-color: #fff !default;
+$button-color: $white !default;
 
-/// Font color for buttons, if the background is light.
+/// Alternative font color for buttons.
 /// @type List
-$button-color-alt: #000 !default;
+$button-color-alt: $black !default;
 
 /// Border radius for buttons, defaulted to global-radius.
 /// @type Number
 $button-radius: $global-radius !default;
 
+/// Border width for hollow outline buttons
+/// @type Number
+$button-hollow-border-width: 1px !default;
+
 /// Sizes for buttons.
 /// @type Map
 $button-sizes: (
@@ -47,30 +55,59 @@ $button-sizes: (
   large: 1.25rem,
 ) !default;
 
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$button-palette: $foundation-palette !default;
+
 /// opacity for a disabled button.
 /// @type List
 $button-opacity-disabled: 0.25 !default;
 
+/// Background color lightness on hover for buttons.
+/// @type Number
+$button-background-hover-lightness: -20% !default;
+
+/// Color lightness on hover for hollow buttons.
+/// @type Number
+$button-hollow-hover-lightness: -50% !default;
+
 // Internal: flip from margin-right to margin-left for defaults
 @if $global-text-direction == 'rtl' {
-  $button-margin: 0 0 $global-margin $global-margin;
+  $button-margin: 0 0 $global-margin $global-margin !default;
 }
 
+/// transitions for buttons.
+/// @type List
+$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
+
 // 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;
+  margin: $button-margin;
+  font-family: $button-font-family;
+
+  @if (type-of($button-padding) == 'map') {
+    @each $size, $padding in $button-padding {
+      @include breakpoint($size) {
+        padding: $padding;
+      }
+    }
+  }
+  @else {
+    padding: $button-padding;
+  }
+
+  -webkit-appearance: none;
   border: 1px solid transparent;
   border-radius: $button-radius;
-  padding: $button-padding;
-  margin: $button-margin;
+  transition: $button-transition;
+
   font-size: map-get($button-sizes, default);
+  line-height: 1;
+  text-align: center;
+  cursor: pointer;
 }
 
 /// Expands a button to make it full-width.
@@ -79,8 +116,8 @@ $button-opacity-disabled: 0.25 !default;
   @if $expand {
     display: block;
     width: 100%;
-    margin-left: 0;
     margin-right: 0;
+    margin-left: 0;
   }
   @else {
     display: inline-block;
@@ -96,28 +133,22 @@ $button-opacity-disabled: 0.25 !default;
 @mixin button-style(
   $background: $button-background,
   $background-hover: $button-background-hover,
-  $color: $button-color
+  $color: $button-color,
+  $background-hover-lightness: $button-background-hover-lightness
 ) {
   @if $color == auto {
-    $color: isitlight($background);
+    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
   }
 
   @if $background-hover == auto {
-    $background-hover: scale-color($background, $lightness: -20%);
+    $background-hover: scale-color($background, $lightness: $background-hover-lightness);
   }
 
-  @if lightness($background) >= 70% {
-    $color: $button-color-alt;
-  }
-  @else {
-    $color: $button-color;
-  }
-
-  background: $background;
+  background-color: $background;
   color: $color;
 
   &:hover, &:focus {
-    background: $background-hover;
+    background-color: $background-hover;
     color: $color;
   }
 }
@@ -126,27 +157,57 @@ $button-opacity-disabled: 0.25 !default;
 @mixin button-hollow {
   &,
   &:hover, &:focus {
-    background: transparent;
+    background-color: transparent;
+  }
+
+  &.disabled,
+  &[disabled] {
+    &,
+    &:hover, &:focus {
+      background-color: transparent;
+    }
   }
 }
 
-@mixin button-hollow-style($color: $primary-color) {
-  $color-hover: scale-color($color, $lightness: -50%);
+@mixin button-hollow-style(
+  $color: $button-background,
+  $hover-lightness: $button-hollow-hover-lightness,
+  $border-width: $button-hollow-border-width
+) {
+  $color-hover: scale-color($color, $lightness: $hover-lightness);
 
-  border: 1px solid $color;
+  border: $border-width solid $color;
   color: $color;
 
   &:hover, &:focus {
     border-color: $color-hover;
     color: $color-hover;
+    &.disabled,
+    &[disabled] {
+      border: $border-width solid $color;
+      color: $color;
+    }
   }
 }
 
 /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
-@mixin button-disabled {
+/// @param [Color] $background [$button-background] - Background color of the disabled button.
+/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
+@mixin button-disabled(
+  $background: $button-background,
+  $color: $button-color
+) {
+  @if $color == auto {
+    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+  }
+
   opacity: $button-opacity-disabled;
   cursor: not-allowed;
-  pointer-events: none;
+
+  &, &:hover, &:focus {
+    background-color: $background;
+    color: $color;
+  }
 }
 
 /// Adds a dropdown arrow to a button.
@@ -162,9 +223,10 @@ $button-opacity-disabled: 0.25 !default;
     @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;
+    float: #{$global-right};
+    margin-#{$global-left}: $offset;
   }
 }
 
@@ -201,16 +263,19 @@ $button-opacity-disabled: 0.25 !default;
     @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); }
+    @each $size, $value in map-remove($button-sizes, default) {
+      &.#{$size} {
+        font-size: $value;
+      }
+    }
+
     &.expanded { @include button-expand; }
 
     // Colors
-    @each $name, $color in $foundation-colors {
+    @each $name, $color in $button-palette {
       @if $button-fill != hollow {
         &.#{$name} {
-          @include button-style($color, auto);
+          @include button-style($color, auto, auto);
         }
       }
       @else {
@@ -224,13 +289,25 @@ $button-opacity-disabled: 0.25 !default;
       }
     }
 
+    // Disabled style
+    &.disabled,
+    &[disabled] {
+      @include button-disabled;
+
+      @each $name, $color in $button-palette {
+        &.#{$name} {
+          @include button-disabled($color, auto);
+        }
+      }
+    }
+
     // Hollow style
     @if $button-fill != hollow {
       &.hollow {
         @include button-hollow;
         @include button-hollow-style;
 
-        @each $name, $color in $foundation-colors {
+        @each $name, $color in $button-palette {
           &.#{$name} {
             @include button-hollow-style($color);
           }
@@ -238,9 +315,33 @@ $button-opacity-disabled: 0.25 !default;
       }
     }
 
-    // Disabled style
-    &.disabled {
-      @include button-disabled;
+    // Clear style
+    @if $button-fill != clear {
+      &.clear {
+        @include button-hollow;
+        @include button-hollow-style;
+
+        &, &:hover, &:focus {
+          &, &.disabled, &[disabled] {
+            border-color: transparent;
+          }
+        }
+
+        @each $name, $color in $button-palette {
+          &.#{$name} {
+            @include button-hollow-style($color);
+
+            &, &:hover,
+            &:focus {
+              &,
+              &.disabled,
+              &[disabled] {
+                border-color: transparent;
+              }
+            }
+          }
+        }
+      }
     }
 
     // Dropdown arrow
@@ -252,13 +353,33 @@ $button-opacity-disabled: 0.25 !default;
           border-top-color: $button-background;
         }
       }
+
+      &.hollow {
+        &::after {
+          border-top-color: $button-background;
+        }
+
+        @each $name, $color in $button-palette {
+          &.#{$name} {
+            &::after {
+              border-top-color: $color;
+            }
+          }
+        }
+      }
     }
 
     // Button with dropdown arrow only
     &.arrow-only::after {
-      margin-#{$global-left}: 0;
+      top: -0.1em;
       float: none;
-      top: 0.2em;
+      margin-#{$global-left}: 0;
+    }
+  }
+  a.button {
+    &:hover,
+    &:focus {
+      text-decoration: none;
     }
   }
 }