@lightspeed/design-system-css 1.1.2 → 1.3.0

package/src/vend.ui/styles/global/_normalise.scss

@@ -11,6 +11,13 @@ a:link {
 }
 
 // Enables fast-tap optimisation in iOS Safari when page is zoomed
-a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
+a,
+button,
+input,
+textarea,
+select,
+details,
+[ng-click],
+.vd-fast-tap {
   touch-action: manipulation;
 }

package/src/vend.ui/styles/global/_z-index.scss

@@ -3,15 +3,11 @@
 // Any content with an explicit position
 $vd-z-index-content-base: 100 !default;
 
-
-
 // ===================================     [200] Navigation     ===================================================== //
 
 // Top navigation, side navigation and level 2 actions (fixed action bars)
 $vd-z-index-navigation-base: $vd-z-index-content-base * 2 !default;
 
-
-
 // ===================================     [300] Popovers     ======================================================= //
 
 // Search results, drop downs, selects, tooltips, date pickers, etc
@@ -19,8 +15,6 @@ $vd-z-index-popover-base: $vd-z-index-content-base * 3 !default;
 
 $vd-popover-z-index: $vd-z-index-popover-base !default;
 
-
-
 // ===================================     [400] Modals     ========================================================= //
 
 // Splashes, dialogs, etc
@@ -30,8 +24,6 @@ $vd-modals-z-index: $vd-z-index-modal-base + 10 !default; // 410
 
 $vd-popover-inside-modal-z-index: $vd-modals-z-index + 10 !default; // 420
 
-
-
 // ===================================     [500] Toasts     ========================================================= //
 
 // Toast notifications etc

package/src/vend.ui/styles/global/colour/_base.scss

@@ -75,15 +75,6 @@ $vd-colour-charcoal-110: #242e34;
 $vd-colour-black: #000;
 $vd-colour-white: #fff;
 
-// @Depreacted use the theme based swatches instead
-$vd-colour-golden-sand: #f2c17b;
-$vd-colour-gothic: #678e98;
-$vd-colour-lavender-purple: #aa88b5;
-$vd-colour-new-york-pink: #d77173;
-$vd-colour-shuttle-gray: #62676f;
-$vd-colour-sinbad: #99c8d4;
-$vd-colour-tacao: #f49b8c;
-
 // Navigation
 $vd-nav-item-colours: (
   // Old nav colours; @todo once all apps are on a version of vend.ui which include the new nav colours, navago should
@@ -94,11 +85,15 @@ $vd-nav-item-colours: (
   shakespeare: #56bad6,
 
   // New nav colours (these actually match those used by Design)
-  downy: #70b8d3,       // Should replace `shakespeare`
-  fern: #65b479,        // Should replace `ocean-green`
+  downy: #70b8d3,
+  // Should replace `shakespeare`
+  fern: #65b479,
+  // Should replace `ocean-green`
   fiord: #4b576e,
-  rob-roy: #ebc381,     // Should replace `rajah`
-  terracotta: #e57d66,  // Should replace `carnation`
+  rob-roy: #ebc381,
+  // Should replace `rajah`
+  terracotta: #e57d66,
+  // Should replace `carnation`
   wistera: #965fb0
 );
 

package/src/vend.ui/styles/global/colour/_colour-functions.scss

@@ -28,11 +28,7 @@
 /// @param {String} $_vd-secondary-element - The vd colour element; e.g. `box`.
 /// @return {Colour<String>} - The highlighted colour
 @function vd-colour-highlight($_vd-primary-element, $_vd-secondary-element) {
-  @return mix(
-    vd-colour($_vd-primary-element),
-    vd-colour($_vd-secondary-element),
-    10
-  );
+  @return mix(vd-colour($_vd-primary-element), vd-colour($_vd-secondary-element), 10);
 }
 
 /// Generating a solid border for permitted border types (currently either keyline or framing)
@@ -41,11 +37,7 @@
 /// @param {String} $_vd-border-type - The border type, either keyline or framing
 /// @param {Unit} [$_vd-border-width=1px] - The width of the border
 /// @param {String} [$_vd-border-style=solid] - The style of the border
-@function vd-border(
-  $_vd-border-type,
-  $_vd-border-width: 1px,
-  $_vd-border-style: solid
-) {
+@function vd-border($_vd-border-type, $_vd-border-width: 1px, $_vd-border-style: solid) {
   @if (null != index($vd-border-types, $_vd-border-type)) {
     @return $_vd-border-width $_vd-border-style vd-colour($_vd-border-type);
   } @else {

package/src/vend.ui/styles/global/colour/_colour.scss

@@ -1,5 +1,5 @@
-@import "colour-functions";
+@import 'colour-functions';
 
 // @todo Remove these imports once theme functions and mixins have been introduced
-@import "base";
-@import "./themes/colour-themes";
+@import 'base';
+@import './themes/colour-themes';

package/src/vend.ui/styles/global/effects/_effects-ns.scss

@@ -1,13 +1,13 @@
-$vd-time-s: .2s !default;
-$vd-time-m: .5s !default;
-$vd-time-l: .8s !default;
+$vd-time-s: 0.2s !default;
+$vd-time-m: 0.5s !default;
+$vd-time-l: 0.8s !default;
 $vd-time-xl: 1s !default;
 
 @mixin vd-slow-rotate {
   animation: vd-rotate $vd-time-xl ease-in-out infinite;
 }
 
-@mixin vd-fade-in ($time: $vd-time-m) {
+@mixin vd-fade-in($time: $vd-time-m) {
   animation: vd-fade-in $time ease-in-out;
   animation-fill-mode: forwards;
 }

package/src/vend.ui/styles/global/effects/_effects.scss

@@ -5,18 +5,63 @@
 }
 
 @keyframes vd-fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes vd-flash {
-  0% {opacity: 0;}
-  30%, 70% {opacity: 1;}
-  100% {opacity: 0;}
+  0% {
+    opacity: 0;
+  }
+  30%,
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 .vd-fade-out {
   animation-duration: 1.5s;
   animation-name: vd-flash;
-  animation-fill-mode:forwards;
+  animation-fill-mode: forwards;
+}
+
+@keyframes vd-blink-highlight {
+  20%,
+  70% {
+    background-color: vd-colour(go-highlight);
+  }
+}
+
+@keyframes vd-shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+
+.vd-shake-highlight {
+  animation: vd-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both, vd-blink-highlight 1.2s;
 }

package/src/vend.ui/styles/global/spacing/_spacing-functions.scss

@@ -3,9 +3,9 @@
 /// @function vd-spacer
 /// @param {Number} $_vd-multiplier - The number of times to multiply the spacing unit.
 /// @return {Unit<px>} - The calculated spacing value.
-@function vd-spacer ($_vd-multiplier:1) {
+@function vd-spacer($_vd-multiplier: 1) {
   @if ($_vd-multiplier > $vd-spacing-max-multiplier) {
-    @error('[spacing-functions] The supplied multiplier is greater than the maximum permitted');
+    @error ('[spacing-functions] The supplied multiplier is greater than the maximum permitted');
   } @else {
     @return $vd-spacing-unit * $_vd-multiplier;
   }

package/src/vend.ui/styles/global/spacing/_spacing-helpers.scss

@@ -6,15 +6,11 @@
       $_vd-spacing_value: $i * $vd-spacing-unit;
 
       @if $_vd-position_value == a {
-        .vd-#{nth($_vd-spacing_type, 1)
-          + nth($_vd-position_value, 1)
-          + $i} {
+        .vd-#{nth($_vd-spacing_type, 1) + nth($_vd-position_value, 1) + $i} {
           #{nth($_vd-spacing_type, 2)}: $_vd-spacing_value !important;
         }
       } @else {
-        .vd-#{nth($_vd-spacing_type, 1)
-          + nth($_vd-position_value, 1)
-          + $i} {
+        .vd-#{nth($_vd-spacing_type, 1) + nth($_vd-position_value, 1) + $i} {
           #{nth($_vd-spacing_type, 2)}-#{nth($_vd-position_value, 2)}: $_vd-spacing_value !important;
         }
       }

package/src/vend.ui/styles/global/text/_base.scss

@@ -2,5 +2,5 @@ $vd-font-weight--regular: 400;
 $vd-font-weight--bold: 700;
 $vd-font-weight--ultra-bold: 900;
 
-$vd-font-lato: lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;  // stylelint-disable-line value-keyword-case
+$vd-font-lato: lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; // stylelint-disable-line value-keyword-case
 $vd-font-primary: $vd-font-lato !default;

package/src/vend.ui/styles/global/text/_text-definitions.scss

@@ -2,64 +2,64 @@ $_vd-text-definitions: (
   grand: (
     size: 48,
     leading: 56,
-    font-weight: 700
+    font-weight: 700,
   ),
   hero: (
     size: 32,
     leading: 48,
-    font-weight: 700
+    font-weight: 700,
   ),
   heading: (
     size: 24,
     leading: 32,
-    font-weight: 700
+    font-weight: 700,
   ),
   sub-heading: (
     size: 18,
     leading: 24,
-    font-weight: 700
+    font-weight: 700,
   ),
   intro: (
     size: 18,
     leading: 24,
-    font-weight: 400
+    font-weight: 400,
   ),
   signpost: (
     size: 15,
     leading: 20,
     font-weight: 900,
     tracking: 1.5,
-    casing: uppercase
+    casing: uppercase,
   ),
   label: (
     size: 15,
     leading: 20,
-    font-weight: 700
+    font-weight: 700,
   ),
   body: (
     size: 15,
     leading: 20,
-    font-weight: 400
+    font-weight: 400,
   ),
   supplementary: (
     size: 12,
     leading: 15,
-    font-weight: 400
+    font-weight: 400,
   ),
   mini-signpost: (
     size: 10,
     leading: 12,
     font-weight: 900,
-    casing: uppercase
+    casing: uppercase,
   ),
   mini-copy: (
     size: 10,
     leading: 12,
-    font-weight: 400
+    font-weight: 400,
   ),
   button: (
     size: 15,
     leading: 18,
-    font-weight: 700
-  )
+    font-weight: 700,
+  ),
 );

package/src/vend.ui/styles/global/text/_text-mixins.scss

@@ -1,6 +1,6 @@
-@use "sass:math";
+@use 'sass:math';
 
-@import "text-definitions";
+@import 'text-definitions';
 
 @mixin font-smoothing {
   font-synthesis: none;
@@ -10,7 +10,7 @@
 }
 
 // Heading Reset - Ensure correct styling continue for H<1..6>'s
-@mixin vd-heading-reset ($color: vd-colour(text)) {
+@mixin vd-heading-reset($color: vd-colour(text)) {
   word-break: break-word;
   font-weight: $vd-font-weight--bold;
   margin: 0;
@@ -19,12 +19,12 @@
 
 // Line Heights - Determine a proportionate line height calculated from a design based 'leading' value and the
 // required font size.
-@mixin vd-line-height ($leading, $font-size) {
-  line-height: math.div($leading, $font-size)
+@mixin vd-line-height($leading, $font-size) {
+  line-height: math.div($leading, $font-size);
 }
 
 // Intro
-@mixin vd-text-intro () {
+@mixin vd-text-intro() {
   @include vd-text(intro);
 }
 
@@ -43,7 +43,7 @@
 ///
 /// @mixin vd-text-clamp
 ///
-@mixin vd-text-clamp ($lines: 2) {
+@mixin vd-text-clamp($lines: 2) {
   // Autoprefixer removes out-of-date vendor prefixes
   // These old prefixes below are required for line clamping to work.
   // Use autoprefixer control comments so these rules are ignored
@@ -63,7 +63,7 @@
 ///
 /// @param {String} $name - The required text; e.g. grand, heading, body
 ///
-@mixin vd-text ($name, $color: text) {
+@mixin vd-text($name, $color: text) {
   @if (map-has-key($_vd-text-definitions, $name)) {
     $_vd-requested-type-styles: map-get($_vd-text-definitions, $name);
     $_size: map-get($_vd-requested-type-styles, 'size');
@@ -77,21 +77,13 @@
     @each $property, $value in $_vd-requested-type-styles {
       @if ($property == 'leading') {
         @include vd-line-height($value, $_size);
-      }
-
-      @else if ($property == 'casing') {
+      } @else if ($property == 'casing') {
         text-transform: $value;
-      }
-
-      @else if ($property == 'tracking') {
+      } @else if ($property == 'tracking') {
         letter-spacing: $value * 0.1 * 1em;
-      }
-
-      @else if ($property == 'size') {
+      } @else if ($property == 'size') {
         font-size: $value * 1px;
-      }
-
-      @else {
+      } @else {
         #{$property}: $value;
       }
     }
@@ -117,9 +109,9 @@
 /// @param {String} $_vd-text-name - The required text definition name; e.g. grand, heading, body
 /// @return {Number} - The font size of the requested requested text definition.
 ///
-@function vd-text-size ($_vd-text-name) {
+@function vd-text-size($_vd-text-name) {
   @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
-    @return map-deep-get($_vd-text-definitions, $_vd-text-name,size) * 1px;
+    @return map-deep-get($_vd-text-definitions, $_vd-text-name, size) * 1px;
   } @else {
     @error "[text-functions] The specified text definition  (#{$_vd-text-name}) does not exist.";
     @return null;
@@ -133,7 +125,7 @@
 /// @param {String} $_vd-text-name - The required text definition name; e.g. grand, heading, body
 /// @return {Number} - The font weight of the requested text definition.
 ///
-@function vd-text-weight ($_vd-text-name) {
+@function vd-text-weight($_vd-text-name) {
   @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
     @return map-deep-get($_vd-text-definitions, $_vd-text-name, font-weight);
   } @else {

package/src/vend.ui/styles/global/text/_text.scss

@@ -1,3 +1,3 @@
 // Text Module Non-styles
-@import "base";
-@import "text-mixins";
+@import 'base';
+@import 'text-mixins';

package/src/vend.ui/styles/global/utils/_functions.scss

@@ -3,9 +3,9 @@
 /// @function vd-px-unit
 /// @param {Number} $_value - Number to add 'px'
 /// @return {Number} - Number with px unit
-@use "sass:math";
+@use 'sass:math';
 
-@function vd-px-unit ($_value) {
+@function vd-px-unit($_value) {
   @return $_value * 1px;
 }
 

package/src/vend.ui/styles/global/viewport/_viewport-data.scss

@@ -1,37 +1,37 @@
 $vd-viewport: (
-  "identifier": (
-    "id": "vd-viewport-identifier",
-    "pseudoElement": "before",
-    "IEContentProp": "vd-content"
+  'identifier': (
+    'id': 'vd-viewport-identifier',
+    'pseudoElement': 'before',
+    'IEContentProp': 'vd-content',
   ),
-  "ranges": (
-    "xsmall": (
-      "range": (
-        "max": 480
-      )
+  'ranges': (
+    'xsmall': (
+      'range': (
+        'max': 480,
+      ),
     ),
-    "small": (
-      "range": (
-        "min": 481,
-        "max": 768
-      )
+    'small': (
+      'range': (
+        'min': 481,
+        'max': 768,
+      ),
     ),
-    "medium": (
-      "range": (
-        "min": 769,
-        "max": 1000
-      )
+    'medium': (
+      'range': (
+        'min': 769,
+        'max': 1000,
+      ),
     ),
-    "large": (
-      "range": (
-        "min": 1001,
-        "max": 1200
-      )
+    'large': (
+      'range': (
+        'min': 1001,
+        'max': 1200,
+      ),
     ),
-    "xlarge": (
-      "range": (
-        "min": 1201
-      )
-    )
-  )
+    'xlarge': (
+      'range': (
+        'min': 1201,
+      ),
+    ),
+  ),
 );

package/src/vend.ui/styles/global/viewport/_viewport-identifier.scss

@@ -24,7 +24,7 @@
   @each $_vd-viewport in map-keys($vd-viewport-ranges-map) {
     $_vd-viewport-content: quote($_vd-viewport);
 
-    @include vd-viewport-media-only ($_vd-viewport) {
+    @include vd-viewport-media-only($_vd-viewport) {
       &::#{map-get($vd-viewport-identifier-map, 'pseudoElement')} {
         content: $_vd-viewport-content;
       }

package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss

@@ -23,14 +23,14 @@
 ///     background-color: #FACADE;
 ///   }
 ///
-@mixin vd-viewport-media-only ($_viewport) {
+@mixin vd-viewport-media-only($_viewport) {
   $_viewport-min-width: null;
   $_viewport-max-width: null;
 
   @if (type-of($_viewport) == 'string') {
     // Known viewport range provided, e.g. xsmall
-    $_viewport-min-width: get-viewport-px-width($_viewport, "min");
-    $_viewport-max-width: get-viewport-px-width($_viewport, "max");
+    $_viewport-min-width: get-viewport-px-width($_viewport, 'min');
+    $_viewport-max-width: get-viewport-px-width($_viewport, 'max');
   } @else if (type-of($_viewport) == 'map') {
     // Custom min and max range values provided
     @if (map-has-key($_viewport, 'min') and map-has-key($_viewport, 'max')) {
@@ -48,11 +48,11 @@
 
       // Determine if a named viewport has been provided for the min and max widths
       @if (type-of($_custom-min) == 'string') {
-        $_custom-min: get-viewport-px-width($_custom-min, "min");
+        $_custom-min: get-viewport-px-width($_custom-min, 'min');
       }
 
       @if (type-of($_custom-max) == 'string') {
-        $_custom-max: get-viewport-px-width($_custom-max, "max");
+        $_custom-max: get-viewport-px-width($_custom-max, 'max');
       }
 
       $_viewport-min-width: $_custom-min;
@@ -62,14 +62,14 @@
     }
   }
 
-  $_viewport-media-range: "(min-width: #{$_viewport-min-width}) and (max-width: #{$_viewport-max-width})";
+  $_viewport-media-range: '(min-width: #{$_viewport-min-width}) and (max-width: #{$_viewport-max-width})';
 
   @if ($_viewport-min-width == null) {
-    $_viewport-media-range: "(max-width: #{$_viewport-max-width})";
+    $_viewport-media-range: '(max-width: #{$_viewport-max-width})';
   }
 
   @if ($_viewport-max-width == null) {
-    $_viewport-media-range: "(min-width: #{$_viewport-min-width})";
+    $_viewport-media-range: '(min-width: #{$_viewport-min-width})';
   }
 
   @media #{$vd-viewport-screen} and #{$_viewport-media-range} {
@@ -94,12 +94,12 @@
 ///     background-color: #C0FFEE;
 ///   }
 ///
-@mixin vd-viewport-media-min ($_viewport-range-min) {
+@mixin vd-viewport-media-min($_viewport-range-min) {
   $_media-min-width: null;
   $_viewport-media-range: null;
 
   @if (type-of($_viewport-range-min) == 'string') {
-    $_media-min-width: get-viewport-px-width($_viewport-range-min, "min");
+    $_media-min-width: get-viewport-px-width($_viewport-range-min, 'min');
     @if ($_media-min-width == null) {
       @error '[vd-viewport-media-min] Specified viewport range does not have a min range value. Use vd-viewport-media-max instead.';
     }
@@ -113,8 +113,8 @@
 
   @media #{$vd-viewport-screen} and
     (min-width: $_media-min-width) {
-      @content;
-    }
+    @content;
+  }
 }
 
 /// Descending content control.
@@ -133,12 +133,12 @@
 ///   @include vd-viewport-media-max (250px) {
 ///     background-color: #C0FFEE;
 ///   }
-@mixin vd-viewport-media-max ($_viewport-range-max) {
+@mixin vd-viewport-media-max($_viewport-range-max) {
   $_media-max-width: null;
   $_viewport-media-range: null;
 
   @if (type-of($_viewport-range-max) == 'string') {
-    $_media-max-width: get-viewport-px-width($_viewport-range-max, "max");
+    $_media-max-width: get-viewport-px-width($_viewport-range-max, 'max');
     @if ($_media-max-width == null) {
       @error '[vd-viewport-media-max] Specified viewport range does not have a max range value. Use vd-viewport-media-min instead.';
     }
@@ -152,6 +152,6 @@
 
   @media #{$vd-viewport-screen} and
     (max-width: $_media-max-width) {
-      @content;
-    }
+    @content;
+  }
 }

package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss

@@ -1,15 +1,15 @@
 // Viewport Screen
-$vd-viewport-screen: "only screen";
+$vd-viewport-screen: 'only screen';
 
 // Viewport Breakpoints - @todo Remove these !defaults.
-$vd-breakpoint-xsmall:       get-viewport-px-width('xsmall', 'max') !default;
-$vd-breakpoint-small-min:    get-viewport-px-width('small', 'min') !default;
-$vd-breakpoint-small:        get-viewport-px-width('small', 'max') !default;
-$vd-breakpoint-medium-min:   get-viewport-px-width('medium', 'min') !default;
-$vd-breakpoint-medium:       get-viewport-px-width('medium', 'max') !default;
-$vd-breakpoint-large-min:    get-viewport-px-width('large', 'min') !default;
-$vd-breakpoint-large:        get-viewport-px-width('large', 'max') !default;
-$vd-breakpoint-xlarge-min:   get-viewport-px-width('xlarge', 'min') !default;
+$vd-breakpoint-xsmall: get-viewport-px-width('xsmall', 'max') !default;
+$vd-breakpoint-small-min: get-viewport-px-width('small', 'min') !default;
+$vd-breakpoint-small: get-viewport-px-width('small', 'max') !default;
+$vd-breakpoint-medium-min: get-viewport-px-width('medium', 'min') !default;
+$vd-breakpoint-medium: get-viewport-px-width('medium', 'max') !default;
+$vd-breakpoint-large-min: get-viewport-px-width('large', 'min') !default;
+$vd-breakpoint-large: get-viewport-px-width('large', 'max') !default;
+$vd-breakpoint-xlarge-min: get-viewport-px-width('xlarge', 'min') !default;
 
 // Viewport Identifier
 $vd-viewport-identifier-map: map-get($vd-viewport, 'identifier');

package/src/vend.ui/styles/navi/_nv-topnav-title.scss

@@ -13,7 +13,7 @@
 
 // ========= Responsive Breakpoint Styles ========= //
 
-@include vd-viewport-media-max ($vd-breakpoint-medium) {
+@include vd-viewport-media-max($vd-breakpoint-medium) {
   .nv-topnav-title-shorthand {
     display: inline;
   }