Add linear gradient background mixin (#304)

* adding Hugo Giraudel's linear gradient mixin; initial pass needs cleanup

* add documentation; needs to move functions later

* cleanup and move helper functions

* cc fixes

* remove support for -webkit and related helper function to-legacy-direction; fixups

* small z-index tweak to brand bar so skiplink is above it when in focused, while keeping brand bar above everything else including nav

core/scss/components/main-nav/_main-nav.scss

@@ -4,11 +4,11 @@
 //
 // The primary site navigation that is usually in the header region of a website.
 // It is a horizontal menu bar on larger breakpoints, while on smaller breakpoints,
-// it changes into a vertical menu and the display is toggled by a button.
+// it changes into a vertical menu and can be expanded or collapsed by a toggle button.
 //
 // This component is implemented to be accessible. For more information, please see:
 //
-// https://github.com/SU-SWS/decanter/wiki/About-the-Main-Nav-Component
+// <a href="https://github.com/SU-SWS/decanter/wiki/About-the-Main-Nav-Component">https://github.com/SU-SWS/decanter/wiki/About-the-Main-Nav-Component</a>
 //
 //**Modifier classes for the Main Nav:**
 // - .su-main-nav--light          - light colored theme

core/scss/utilities/functions/string/_convert-angle.scss

@@ -0,0 +1,25 @@
+@charset 'UTF-8';
+
+//
+// convert-angle($value, $unit)
+//
+// @author Chris Eppstein
+//
+// Convert an angle to the proper unit requested
+//
+// $value - Number: Value to convert
+// $unit - String: Unit to convert to
+//
+// Style guide: Functions.String.convert-angle
+//
+@function convert-angle($value, $unit) {
+  $convertable-units: deg grad turn rad;
+  $conversion-factors: 1 (10grad / 9deg) (1turn / 360deg) (3.1415926rad / 180deg);
+  @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
+    @return $value
+             / nth($conversion-factors, index($convertable-units, unit($value)))
+             * nth($conversion-factors, index($convertable-units, $unit));
+  }
+
+  @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
+}

core/scss/utilities/functions/string/index.scss

@@ -7,6 +7,7 @@
 //
 
 @import
+  "convert-angle",
   "str-replace",
   "to-length",
   "to-list",

core/scss/utilities/functions/type-checks/_is-direction-or-angle.scss

@@ -0,0 +1,16 @@
+@charset 'UTF-8';
+
+// is-direction-or-angle($value)
+//
+// Validates whether something is a direction or an angle
+//
+// $value - the value to type check
+//
+// Style guide: Functions.Type Checks.is-direction-or-angle
+//
+@function is-direction-or-angle($value) {
+  $is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
+  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
+
+  @return $is-direction or $is-angle;
+}

core/scss/utilities/functions/type-checks/index.scss

@@ -8,6 +8,7 @@
 
 @import
   'is-absolute-length',
+  'is-direction-or-angle',
   'is-integer',
   'is-length',
   'is-number',

core/scss/utilities/mixins/gradient/_linear-gradient.scss

@@ -0,0 +1,29 @@
+@charset 'UTF-8';
+
+//
+// @linear-gradient($direction, $color-stops...)
+//
+// @author Hugo Giraudel
+//
+// Mixin to create a linear gradient with a plain color fallback.
+//
+// **Examples:**
+// - `@include linear-gradient(#31b7d7, #edac7d);`
+// - `@include linear-gradient(to right, #eee 0%, $color-cardinal-red 50%, $color-palo-alto 100%);`
+// - `@include linear-gradient(32deg, #53284f 0%, #00548f 50%, #0098db 50.01%, $color-white 100%);`
+//
+// $direction - String: Linear gradient direction. One of: to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left
+// $color-stops - List: Color-stops composing the gradient. Each includes a color value, and a location in percentage (when there are more than 2 $color-stops), e.g., #123456 30% .
+//
+// Style guide: Mixins.Gradient.linear-gradient
+//
+
+@mixin linear-gradient($direction, $color-stops...) {
+  @if is-direction-or-angle($direction) == false {
+    $color-stops: ($direction, $color-stops);
+    $direction: 180deg;
+  }
+
+  background: nth(nth($color-stops, 1), 1);
+  background: linear-gradient($direction, $color-stops);
+}

core/scss/utilities/mixins/gradient/index.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+// Gradient
+//
+// Mixins for creating gradients
+//
+// Style guide: Mixins.Gradient
+//
+@import
+ 'linear-gradient';

core/scss/utilities/mixins/index.scss

@@ -12,6 +12,7 @@
   'cta/index',
   'display/index',
   'flex/index',
+  'gradient/index',
   'grid/index',
   'icons-logos/index',
   'image/index',

core/scss/utilities/mixins/modular-scale/_modular-spacing.scss

@@ -64,7 +64,7 @@
         @if nth($steps, 4) != null {
           #{$type}-left: (calculate-modular-spacing(nth($steps, 4), $key));
         }
-      } @else if length($steps) > 4 or length($step) == 0 {
+      } @else if length($steps) > 4 or length($steps) == 0 {
         @error '$steps should have 1 to 4 values';
       }
     }

kss/builder/decanter/scss/_brand-bar.scss

@@ -6,6 +6,6 @@
   > .su-brand-bar {
     position: fixed;
     top: 0;
-    z-index: 22222;
+    z-index: 11200;
   }
 }