@lightspeed/design-system-css 0.1.0

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

@@ -0,0 +1,141 @@
+@import "text-definitions";
+
+@mixin font-smoothing {
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Heading Reset - Ensure correct styling continue for H<1..6>'s
+@mixin vd-heading-reset ($color: vd-colour(text)) {
+  word-break: break-word;
+  font-weight: $vd-font-weight--bold;
+  margin: 0;
+  color: $color;
+}
+
+// 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: ($leading / $font-size)
+}
+
+// Intro
+@mixin vd-text-intro () {
+  @include vd-text(intro);
+}
+
+/// Clip a single line of text with an ellipsis.
+///
+/// @mixin vb-text-ellipsis
+///
+@mixin vd-text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-word;
+}
+
+/// Line clamp to the provided number of lines.
+///
+/// @mixin vd-text-clamp
+///
+@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
+  /* autoprefixer: off */
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  /* autoprefixer: on */
+}
+
+/// Creates the css rules for the given text definition
+///
+/// @mixin vd-text
+///
+/// @param {String} $name - The required text; e.g. grand, heading, body
+///
+@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');
+
+    @include font-smoothing;
+    // Resets to ensure <h#> and <p> elements will have the same margins and text colour
+    word-break: break-word;
+
+    margin: 0;
+
+    @each $property, $value in $_vd-requested-type-styles {
+      @if ($property == 'leading') {
+        @include vd-line-height($value, $_size);
+      }
+
+      @else if ($property == 'casing') {
+        text-transform: $value;
+      }
+
+      @else if ($property == 'tracking') {
+        letter-spacing: $value / 10 * 1em;
+      }
+
+      @else if ($property == 'size') {
+        font-size: $value * 1px;
+      }
+
+      @else {
+        #{$property}: $value;
+      }
+    }
+  } @else {
+    @warn "[text mixin] The specified text name (#{$name}) does not exist.";
+  }
+}
+
+/// Truncate a given element to its contents
+///
+/// @mixin vd-truncate
+///
+@mixin vd-truncate() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/// Get the font size for a named text definition
+///
+/// @function vd-text-size
+
+/// @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) {
+  @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
+    @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;
+  }
+}
+
+/// Get the font size for a named text definition
+///
+/// @function vd-text-weight
+
+/// @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) {
+  @if (map-has-key($_vd-text-definitions, $_vd-text-name)) {
+    @return map-deep-get($_vd-text-definitions, $_vd-text-name, font-weight);
+  } @else {
+    @error "[text-functions] The specified text definition  (#{$_vd-text-name}) does not exist.";
+    @return null;
+  }
+}

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

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

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

@@ -0,0 +1,84 @@
+/// Add px unit to the provided value.
+///
+/// @function vd-px-unit
+/// @param {Number} $_value - Number to add 'px'
+/// @return {Number} - Number with px unit
+@function vd-px-unit ($_value) {
+  @return $_value * 1px;
+}
+
+/// Remove the unit of a length.
+///
+/// @param {Number} $number - Number to remove unit from
+/// @return {Number} - Unitless number
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+/// toFixed() function for Sass. See http://www.sassmeister.com/gist/9832501.
+///
+/// @function to-fixed
+/// @param {Number} $float - Number to format
+/// @param {Number} $digits [2] - Number of digits to leave
+/// @return {Number}
+@function to-fixed($float, $digits: 2) {
+  $sass-precision: 5;
+
+  $pow: pow(10, $digits);
+  @return round($float * $pow) / $pow;
+}
+
+/// Power function
+///
+/// @function pow
+/// @param {Number} $x
+/// @param {Number} $n
+/// @return {Number}
+@function pow($x, $n) {
+  $ret: 1;
+
+  @if $n >= 0 {
+    @for $i from 1 through $n {
+      $ret: $ret * $x;
+    }
+  } @else {
+    @for $i from $n to 0 {
+      $ret: $ret / $x;
+    }
+  }
+
+  @return $ret;
+}
+
+/// Map deep get
+///
+/// @function map-deep-get
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} - Desired value
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+/// Get viewport width
+///
+/// @function get-viewport-px-width
+/// @param {String} $viewport-size - Viewport size key, SMALL, MEDIUM etc
+/// @param {String} $viewport-range - Viewport range, either min or max
+/// @return {String} - Width of viewport at requested viewport size and range
+@function get-viewport-px-width($viewport-size, $viewport-range) {
+  $_viewportWidth: map-deep-get($vd-viewport, 'ranges', $viewport-size, 'range', $viewport-range);
+
+  @if ($_viewportWidth != null) {
+    @return vd-px-unit($_viewportWidth);
+  } @else {
+    @return null;
+  }
+}

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

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

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

@@ -0,0 +1,37 @@
+// Viewport identifier
+//
+// Use this element in conjuction with the vdWindowDelegateService to determine the
+// current viewport. Element is added to the DOM by the service if not already present. See _viewport-data.scss for
+// interpolated values.
+##{map-get($vd-viewport-identifier-map, 'id')} {
+  position: absolute;
+  z-index: -1;
+
+  top: 0;
+  left: 0;
+
+  width: 0;
+  height: 0;
+
+  visibility: hidden;
+  overflow: hidden;
+
+  &::#{map-get($vd-viewport-identifier-map, 'pseudoElement')} {
+    visibility: hidden;
+  }
+
+  // Iterate through the viewport ranges map and generate the pseudo element content
+  @each $_vd-viewport in map-keys($vd-viewport-ranges-map) {
+    $_vd-viewport-content: quote($_vd-viewport);
+
+    @include vd-viewport-media-only ($_vd-viewport) {
+      &::#{map-get($vd-viewport-identifier-map, 'pseudoElement')} {
+        content: $_vd-viewport-content;
+      }
+
+      // Proprietary property name. Support for window getComputedStyle pseudo-element is only >= IE11. For older IE's
+      // we can use element.getCurrentStyle('vd-content').
+      #{map-get($vd-viewport-identifier-map, 'IEContentProp')}: $_vd-viewport-content;
+    }
+  }
+}

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

@@ -0,0 +1,157 @@
+/// Range based content control; between a min and max width.
+///
+/// @mixin vd-viewport-media-only
+///
+/// @param  {String|Map} $_viewport
+///         The viewport range key (such as xsmall, large) or a map consisting of the custom min and max sizes.
+///         The custom min or max sizes can also be passed a viewport range key.
+///
+/// @example
+///   @include vd-viewport-media-only(medium) {
+///     background-color: #C0FFEE;
+///   }
+///
+///   @include vd-viewport-media-only((min: 100px, max: 200px)) {
+///     background-color: #BAFF1E;
+///   }
+///
+///   @include vd-viewport-media-only((min: small, max: medium)) {
+///     background-color: #0FF1CE;
+///   }
+///
+///   @include vd-viewport-media-only((min: 250px, max: large)) {
+///     background-color: #FACADE;
+///   }
+///
+@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");
+  } @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')) {
+      $_custom-min: map-get($_viewport, 'min');
+      $_custom-max: map-get($_viewport, 'max');
+
+      // Determine if we have a valid number with a css measurement unit
+      @if (type-of($_custom-min) == 'number' and unitless($_custom-min)) {
+        @error '[vd-viewport-media-only] Unitless min range value provided.';
+      }
+
+      @if (type-of($_custom-max) == 'number' and unitless($_custom-max)) {
+        @error '[vd-viewport-media-only] Unitless max range value provided.';
+      }
+
+      // 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");
+      }
+
+      @if (type-of($_custom-max) == 'string') {
+        $_custom-max: get-viewport-px-width($_custom-max, "max");
+      }
+
+      $_viewport-min-width: $_custom-min;
+      $_viewport-max-width: $_custom-max;
+    } @else {
+      @error '[vd-viewport-media-only] Missing min or max range value.';
+    }
+  }
+
+  $_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})";
+  }
+
+  @if ($_viewport-max-width == null) {
+    $_viewport-media-range: "(min-width: #{$_viewport-min-width})";
+  }
+
+  @media #{$vd-viewport-screen} and #{$_viewport-media-range} {
+    @content;
+  }
+}
+
+/// Ascending content control.
+///
+/// @mixin vd-viewport-media-min
+///
+/// @param  {String|Number} $_viewport-range-min
+///         The viewport range key to be used to obtain the min width from (such as large), or a specific number and a
+///         css measurement unit.
+///
+/// @example
+///   @include vd-viewport-media-min (large) {
+///     background-color: #C0FFEE;
+///   }
+///
+///   @include vd-viewport-media-min (250px) {
+///     background-color: #C0FFEE;
+///   }
+///
+@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");
+    @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.';
+    }
+  } @else {
+    @if (unitless($_viewport-range-min)) {
+      @error '[vd-viewport-media-min] Unitless range value provided.';
+    }
+
+    $_media-min-width: $_viewport-range-min;
+  }
+
+  @media #{$vd-viewport-screen} and
+    (min-width: $_media-min-width) {
+      @content;
+    }
+}
+
+/// Descending content control.
+///
+/// @mixin vd-viewport-media-max
+///
+/// @param  {String|Number} $_viewport-range-max
+///         The viewport range key to be used to obtain the max width from (such as large), or a specific number and a
+///         css measurement unit.
+///
+/// @example
+///   @include vd-viewport-media-max (large) {
+///     background-color: #C0FFEE;
+///   }
+///
+///   @include vd-viewport-media-max (250px) {
+///     background-color: #C0FFEE;
+///   }
+@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");
+    @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.';
+    }
+  } @else {
+    @if (unitless($_viewport-range-max)) {
+      @error '[vd-viewport-media-max] Unitless range value provided.';
+    }
+
+    $_media-max-width: $_viewport-range-max;
+  }
+
+  @media #{$vd-viewport-screen} and
+    (max-width: $_media-max-width) {
+      @content;
+    }
+}

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

@@ -0,0 +1,18 @@
+// Viewport 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;
+
+// Viewport Identifier
+$vd-viewport-identifier-map: map-get($vd-viewport, 'identifier');
+
+// Viewport Ranges
+$vd-viewport-ranges-map: map-get($vd-viewport, 'ranges');

package/src/vend.ui/styles/navi/_non-styles.scss

@@ -0,0 +1,2 @@
+@import 'non-styles/variables';
+@import 'non-styles/mixins';

package/src/vend.ui/styles/navi/_nv-account-banner.scss

@@ -0,0 +1,12 @@
+.nv-account-banner {
+  display: block;
+
+  .vd-banner-content {
+    display: inline-flex;
+  }
+}
+
+.nv-account-banner-action {
+  flex-shrink: 0;
+  margin-left: vd-grid-unit(6);
+}

package/src/vend.ui/styles/navi/_nv-notifications-item.scss

@@ -0,0 +1,15 @@
+.nv-notifications-item {
+  position: relative;
+
+  @include nv-topnav-status-icon() {
+    top: 15px;
+    right: 12px;
+    transform: scale(0);
+  }
+}
+
+.nv-notifications-item--active {
+  &::after {
+    transform: scale(1);
+  }
+}

package/src/vend.ui/styles/navi/_nv-sidenav.scss

@@ -0,0 +1,143 @@
+@mixin nv-sidenav-faux-column-bg($tabs-width, $drawer-width) {
+  background: linear-gradient(
+    to right,
+    $vd-sidebar-tabs-background-color 0,
+    $vd-sidebar-tabs-background-color $tabs-width,
+    $vd-sidebar-drawer-background-color $tabs-width,
+    $vd-sidebar-drawer-background-color $drawer-width
+  );
+}
+
+// The sidebar contents can be hidden, if so we shouldn't show the sidebar
+.vd-sidebar:empty {
+  display: none;
+}
+
+.nv-sidenav {
+  transform: translateX(0);
+  transition: transform 0.2s ease-in-out;
+  display: block;
+  height: calc(100% - #{$vd-topbar-height});
+  z-index: $nv-sidenav-base-z-index;
+
+  .nv-sidenav-modal-close {
+    display: none;
+    top: $nv-sidenav-modal-close-base-offset;
+    right: $nv-sidenav-modal-close-right-offset;
+  }
+
+  .vd-sidebar-tabs {
+    box-shadow: none;
+    height: auto;
+  }
+
+  .vd-sidebar-drawer {
+    border-right: none;
+    height: auto;
+  }
+
+  @media print {
+    display: none;
+  }
+
+  @supports (height: min-content) {
+    .vd-sidebar-tabs,
+    .vd-sidebar-drawer {
+      height: min-content;
+    }
+  }
+
+  // Required so banner does not appear over the top of the sidenav when its toggled
+  // on smaller devices
+  @include vd-viewport-media-max($vd-breakpoint-large) {
+    z-index: $vd-z-index-popover-base + 2;
+  }
+}
+
+.nv-sidenav-content {
+  @include nv-sidenav-faux-column-bg(
+    $vd-sidebar-tabs-desktop-width,
+    $vd-sidebar-drawer-desktop-width
+  );
+  width: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  display: flex;
+  box-shadow: $nv-sidenav-content-box-shadow-offset-x 0 0 0 vd-colour(framing);
+}
+
+.nv-sidenav--pad-drawer {
+  padding-right: $vd-sidebar-drawer-desktop-width;
+}
+
+// ========= Body Class Sidenav Modal State ========= //
+
+.nv-display-sidenav-modal {
+  .nv-sidenav {
+    z-index: $nv-sidenav-modal-z-index;
+
+    .nv-sidenav-modal-close {
+      display: flex;
+    }
+  }
+}
+
+// ========= Responsive Breakpoint Styles ========= //
+
+@include vd-viewport-media-max($vd-breakpoint-large) {
+  .nv-sidenav {
+    position: absolute;
+    left: 0;
+    height: 100%;
+    transform: translateX(
+      calc(-100% - #{$nv-sidenav-content-box-shadow-offset-x})
+    );
+
+    .nv-sidenav-content {
+      @include nv-sidenav-faux-column-bg(
+        $nv-sidenav-tabs-mobile-width,
+        $nv-sidenav-drawer-mobile-width
+      );
+    }
+
+    .vd-sidebar-tabs {
+      width: $nv-sidenav-tabs-mobile-width;
+    }
+
+    .vd-sidebar-drawer {
+      width: $nv-sidenav-drawer-mobile-width;
+    }
+  }
+
+  .nv-display-sidenav-modal {
+    .nv-sidenav {
+      transform: translateX(0);
+    }
+  }
+
+  .nv-sidenav--pad-drawer {
+    padding-right: 0;
+  }
+}
+
+@include vd-viewport-media-min($vd-breakpoint-xlarge-min) {
+  // The following styles are required to allow the sidenav modal overlay page content when no drawer is displayed
+  // This only applies to the nav at large desktop size
+  .nv-sidenav--no-drawer {
+    width: $vd-sidebar-tabs-desktop-width;
+  }
+
+  .nv-display-sidenav-modal {
+    .nv-sidenav--no-drawer {
+      .nv-sidenav-content {
+        position: absolute;
+      }
+
+      .nv-sidenav-modal-close {
+        right: $nv-sidenav-modal-close-right-offset -
+          $vd-sidebar-drawer-desktop-width;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+.nv-topnav-title {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  flex-shrink: 0;
+  font-size: vd-text-size(body);
+  font-weight: $vd-font-weight--bold;
+}
+
+.nv-topnav-title-shorthand {
+  display: none;
+}
+
+// ========= Responsive Breakpoint Styles ========= //
+
+@include vd-viewport-media-max ($vd-breakpoint-medium) {
+  .nv-topnav-title-shorthand {
+    display: inline;
+  }
+
+  .nv-topnav-title-full {
+    display: none;
+  }
+}