@lightspeed/design-system-css 0.1.0

package/src/vend.ui/components/vd-dott/vd-dott.scss

@@ -0,0 +1,41 @@
+$vd-dott-diameter: 32px;
+$vd-dott-aperture-diameter: 12px;
+$vd-dot-border-width: 2px;
+
+vd-dott, .vd-dott { // stylelint-disable-line selector-type-no-unknown
+  display: inline-block;
+  width: $vd-dott-diameter;
+  height: $vd-dott-diameter;
+
+  will-change: transform;
+  animation: vd-rotate 3s infinite linear;
+}
+
+.vd-dott-mask {
+  stroke: $vd-colour-white;
+  // Define stroke width as the difference between aperture diameter and full diameter, expressed as % of full diameter
+  stroke-width: ($vd-dott-diameter - $vd-dott-aperture-diameter) / $vd-dott-diameter * 100%;
+}
+
+.vd-dott-gradient-start {
+  stop-color: vd-colour(go);
+}
+
+.vd-dott-gradient-stop {
+  stop-color: vd-colour(success);
+}
+
+.vd-dott-border:not(.vd-input--error):not(.vd-error) {
+  // Overide existing borders before applying patchy border styles ourselves
+  border: initial;
+  border-top: $vd-dot-border-width solid vd-colour(go);
+  border-bottom: $vd-dot-border-width solid vd-colour(success);
+  // Second bg-image value, in conjunction with the background-position, ensures the right side border displays correctly
+  background-image:
+    linear-gradient(vd-colour(go), vd-colour(success)),
+    linear-gradient(vd-colour(go), vd-colour(success));
+  background-size: $vd-dot-border-width 100%;
+  background-position: 0 0, 100% 0;
+  background-repeat: no-repeat;
+  box-shadow: 0 0 4px 0 vd-colour(go);
+}

package/src/vend.ui/components/vd-dropdown/vd-dropdown.scss

@@ -0,0 +1,15 @@
+.vd-dropdown-input {
+  cursor: pointer;
+
+  &::placeholder {
+    user-select: none;
+  }
+}
+
+.vd-dropdown-input-container {
+  @include vd-input-error-selectors () {
+    .vd-dropdown-input {
+      @include vd-input-error-styles();
+    }
+  }
+}

package/src/vend.ui/components/vd-expandable/vd-expandable.scss

@@ -0,0 +1,11 @@
+.vd-expandable-content {
+  transition: max-height $vd-time-s;
+  overflow: hidden;
+  max-height: 0;
+
+  .vd-expandable--expanded > &,
+  .vd-expandable--expanded ~ & {
+    max-height: 1000px;
+    transition-duration: $vd-time-l;
+  }
+}

package/src/vend.ui/components/vd-feedback/vd-feedback.scss

@@ -0,0 +1,23 @@
+.vd-feedback-button-container {
+  margin-left: vd-grid-unit(2);
+}
+
+.vd-feedback-capture {
+  resize: none;
+  height: 100px;
+}
+
+.vd-feedback-button {
+  cursor: pointer;
+  display: inline;
+  margin-left: vd-grid-unit(6);
+  white-space: nowrap;
+}
+
+.vd-feedback-button-icon {
+  margin-right: vd-grid-unit(2);
+}
+
+.vd-feedback-thankyou {
+  width: 100%;
+}

package/src/vend.ui/components/vd-field/vd-field-ns.scss

@@ -0,0 +1,4 @@
+$vd-field-margin: vd-grid-unit(5);
+$vd-fieldset-field-margin-right: vd-grid-unit(2);
+$vd-fieldset-field-margin-bottom: vd-grid-unit(4);
+$vd-field-short-max-width: 400px;

package/src/vend.ui/components/vd-field/vd-field.scss

@@ -0,0 +1,59 @@
+.vd-field {
+  margin-bottom: $vd-field-margin;
+  font-size: vd-text-size(body);
+  flex: 1;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .vd-fieldset & {
+    margin-bottom: $vd-fieldset-field-margin-bottom;
+
+    &:not(:last-child) {
+      margin-right: $vd-fieldset-field-margin-right;
+
+      @include vd-viewport-media-max(xsmall) {
+        margin-right: 0;
+      }
+    }
+
+    &:only-child {
+      margin-bottom: $vd-fieldset-field-margin-bottom;
+    }
+  }
+}
+
+.vd-label {
+  @include vd-text(label);
+  display: inline-block;
+  margin-bottom: vd-spacer(1);
+}
+
+.vd-value {
+  position: relative;
+}
+
+.vd-field--short {
+  max-width: $vd-field-short-max-width;
+  margin-right: $vd-field-margin;
+
+  &:last-of-type {
+    margin-right: 0;
+  }
+}
+
+@include vd-viewport-media-max(small) {
+  .vd-field {
+    margin-top: $vd-field-margin;
+
+    .vd-fieldset & {
+      margin-top: inherit;
+    }
+  }
+
+  .vd-field--short {
+    max-width: initial;
+    margin-right: 0;
+  }
+}

package/src/vend.ui/components/vd-fieldset/vd-fieldset.scss

@@ -0,0 +1,19 @@
+.vd-fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+
+  + .vd-fieldset {
+    margin-top: $vd-section-padding-v;
+  }
+}
+
+.vd-legend {
+  padding: 0 0 vd-grid-unit(2);
+  margin: 0 0 vd-grid-unit(4);
+  font-size: 16px;
+  font-weight: $vd-font-weight--bold;
+  border-bottom: 1px solid vd-colour(keyline);
+  width: 100%;
+}

package/src/vend.ui/components/vd-flag/vd-flag-ns.scss

@@ -0,0 +1 @@
+$vd-font-size--flag: 10px !default;

package/src/vend.ui/components/vd-flag/vd-flag.scss

@@ -0,0 +1,46 @@
+.vd-flag {
+  @include vd-text(mini-signpost);
+
+  padding: vd-grid-unit(1) vd-grid-unit(2);
+  background-color: vd-colour(framing);
+  border-radius: $vd-border-radius;
+  display: inline-block;
+  vertical-align: text-top;
+  overflow: hidden;
+
+  &,
+  &:link,
+  &:visited {
+    color: vd-colour(supplementary--text) !important;
+  }
+
+}
+
+.vd-flag-chevron {
+  border-width: 1px 1px 0 0;
+  border-style: solid;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  transform: rotate(59deg) skew(27deg);
+  margin: -2px 3px -4px -3px;
+  opacity: 0.5;
+  // Hacks to ensure anti-aliasing
+  backface-visibility: hidden; // Chrome
+  outline: 1px solid transparent; // Firefox
+}
+
+.vd-flag--negative,
+.vd-flag--warning {
+  background-color: vd-colour(no);
+
+  &,
+  &:link,
+  &:visited {
+    color: vd-colour(text-action) !important;
+  }
+
+  .vd-flag-chevron{
+    opacity: 1;
+  }
+}

package/src/vend.ui/components/vd-flex/vd-flex.scss

@@ -0,0 +1,21 @@
+.vd-flex {
+  display: flex;
+  flex: 1;
+}
+
+.vd-flex--row             { flex-direction: row; }
+.vd-flex--column          { flex-direction: column; }
+
+.vd-flex--no-shrink       { flex-shrink: 0 }
+
+.vd-flex--justify-start   { justify-content: flex-start; }
+.vd-flex--justify-end     { justify-content: flex-end; }
+.vd-flex--justify-between { justify-content: space-between; }
+.vd-flex--justify-around  { justify-content: space-around; }
+.vd-flex--justify-center  { justify-content: center; }
+
+.vd-flex--align-start     { align-items: flex-start; }
+.vd-flex--align-end       { align-items: flex-end; }
+.vd-flex--align-baseline  { align-items: baseline; }
+.vd-flex--align-center    { align-items: center; }
+.vd-flex--align-stretch   { align-items: stretch; }

package/src/vend.ui/components/vd-grid/vd-grid.scss

@@ -0,0 +1,26 @@
+@include vd-build-grid();
+
+// Large gutter; @todo deprecate since it has inconsistent vertical spacing
+.vd-g-row--gutter-l {
+  margin: -($vd-grid-row-gutter-large / 2);
+  max-width: $vd-section-wrap-max-width + $vd-grid-row-gutter-large;
+
+  > .vd-g-col {
+    padding: $vd-grid-row-gutter-large / 2;
+  }
+}
+
+.vd-g-row--gutter {
+  margin-left: -($vd-grid-row-gutter-large / 2);
+  margin-right: -($vd-grid-row-gutter-large / 2);
+  margin-bottom: -($vd-grid-row-gutter-large / 2);
+  max-width: $vd-section-wrap-max-width + $vd-grid-row-gutter-large;
+
+  + .vd-g-row--gutter {
+    margin-top: ($vd-grid-row-gutter-large / 2);
+  }
+
+  > .vd-g-col {
+    padding: 0 ($vd-grid-row-gutter-large / 2) ($vd-grid-row-gutter-large / 2);
+  }
+}

package/src/vend.ui/components/vd-header/vd-header.scss

@@ -0,0 +1,34 @@
+.vd-header {
+  display: block;
+  font-weight: vd-text-weight(heading);
+  color: vd-colour(text);
+  margin: 0;
+}
+
+.vd-header--page {
+  font-size: vd-text-size(hero);
+  position: relative;
+}
+
+.vd-header--subpage {
+  font-size: vd-text-size(heading);
+}
+
+.vd-header--section {
+  font-size: vd-text-size(sub-heading);
+  margin-bottom: vd-grid-unit(1);
+}
+
+.vd-header--settings {
+  font-size: vd-text-size(sub-heading);
+  margin-bottom: vd-grid-unit(5);
+
+  @include vd-viewport-media-max(small) {
+    margin-bottom: vd-grid-unit(3);
+  }
+}
+
+.vd-header--dialog {
+  font-size: vd-text-size(heading);
+  word-break: break-word;
+}

package/src/vend.ui/components/vd-hero/vd-hero-ns.scss

@@ -0,0 +1,28 @@
+$vd-hero-padding-horizontal: vd-grid-unit(5) !default;
+$vd-hero-paddding-vertical: vd-grid-unit(12) !default;
+$vd-hero-items-margin-vertical: vd-grid-unit(5) !default;
+
+$vd-hero-content-max-width: 80% !default;
+$vd-hero-content-min-width: 300px !default;
+$vd-hero-headline-max-width: 90% !default;
+
+$vd-hero-aux-content-margin: vd-grid-unit(3) !default;
+$vd-hero-aux-headline-max-width: 90% !default;
+$vd-hero-aux-content-max-width: 90% !default;
+$vd-hero-aux-hr-width: 80px !default;
+$vd-hero-aux-width: 33.33333% !default;
+
+// Hero Auxiliary Headline
+@mixin vd-text-hero-aux-headline () {
+  @include vd-text(intro);
+  font-weight: $vd-font-weight--bold;
+}
+
+// Hero Headline
+@mixin vd-text-hero-headline () {
+  @include vd-heading-reset();
+  @include vd-line-height(42, 35);
+  @include font-smoothing;
+
+  font-size: vd-text-size(hero);
+}

package/src/vend.ui/components/vd-hero/vd-hero.scss

@@ -0,0 +1,114 @@
+.vd-hero-container {
+  display: flex;
+
+  @include vd-viewport-media-max(medium) {
+    flex-wrap: wrap;
+  }
+}
+
+// Hero
+.vd-hero {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  font-family: $vd-font-lato;
+  text-align: center;
+  padding: $vd-hero-paddding-vertical $vd-hero-padding-horizontal;
+  box-sizing: border-box;
+  background-color: vd-colour(box);
+
+  .vd-hero-container & {
+    @include vd-viewport-media-max(medium) {
+      flex-basis: 100%;
+    }
+  }
+}
+
+.vd-hero--transparent {
+  background-color: initial;
+}
+
+.vd-hero-content {
+  max-width: $vd-hero-content-max-width;
+  min-width: $vd-hero-content-min-width;
+
+  @include vd-viewport-media-max(xsmall) {
+    min-width: initial;
+  }
+}
+
+.vd-hero-headline {
+  @include vd-text-hero-headline;
+  max-width: $vd-hero-headline-max-width;
+  margin-bottom: $vd-hero-items-margin-vertical;
+}
+
+.vd-hero-intro {
+  @include vd-text-intro;
+  margin: 0;
+}
+
+.vd-hero-button {
+  margin: $vd-hero-items-margin-vertical 0 0;
+}
+
+// Hero Auxiliary
+.vd-hero-aux {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  padding: vd-grid-unit(5);
+  box-sizing: border-box;
+
+  background-color: vd-colour(box-inverse);
+
+  font-family: $vd-font-lato;
+  color: vd-colour(text-inverse);
+  text-align: center;
+  font-size: vd-text-size(body);
+
+  .vd-hero-container & {
+    flex: 0 0 $vd-hero-aux-width;
+
+    @include vd-viewport-media-max(medium) {
+      flex: 1;
+    }
+  }
+}
+
+.vd-hero-aux-headline {
+  @include vd-text-hero-aux-headline;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $vd-hero-aux-headline-max-width;
+}
+
+.vd-hero-aux-hr {
+  margin: $vd-hero-aux-content-margin auto;
+
+  border-top: 1px solid currentColor;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+
+  width: $vd-hero-aux-hr-width;
+}
+
+.vd-hero-aux-content {
+  @include font-smoothing;
+  @include vd-line-height(24, 15);
+
+  font-size: vd-text-size(body);
+  max-width: $vd-hero-aux-content-max-width;
+  margin: 0 auto;
+}
+
+.vd-hero-aux-footer {
+  color: vd-colour(keyline);
+  margin-top: $vd-hero-aux-content-margin;
+}

package/src/vend.ui/components/vd-hr/vd-hr.scss

@@ -0,0 +1,14 @@
+.vd-hr {
+  margin: vd-grid-unit(5) auto;
+  width: 100%;
+  max-width: $vd-section-wrap-max-width;
+  border-top: 1px solid vd-colour(keyline);
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+}
+
+.vd-hr--full {
+  width: 100%;
+  max-width: 100%;
+}

package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss

@@ -0,0 +1,61 @@
+.vd-in-page-help {
+  display: block;
+}
+
+.vd-in-page-help-section {
+  border-bottom: 1px solid vd-colour(framing);
+}
+
+.vd-in-page-help-container {
+  position: relative;
+}
+
+.vd-in-page-help-content {
+
+  @include vd-viewport-media-min(medium) {
+    display: flex;
+    flex-flow: row wrap;
+  }
+}
+
+.vd-in-page-help-content-item {
+
+  @include vd-viewport-media-min(medium) {
+    flex: 1;
+  }
+
+  &.vd-in-page-help-content-item--constrained {
+    flex-basis: 50%;
+    flex-grow: 0;
+
+    @include vd-viewport-media-max(medium) {
+      flex: 1 1 auto;
+    }
+  }
+
+  .vd-in-page-help-is-dismissible > & {
+    margin-right: 65px;
+  }
+}
+
+.vd-in-page-help-content-text {
+  min-width: 200px;
+  padding-top: 10px;
+}
+
+.vd-in-page-help-content-media {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include vd-viewport-media-min(medium) {
+    min-width: 500px;
+    min-height: 250px;
+  }
+}
+
+.vd-in-page-help-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+}

package/src/vend.ui/components/vd-input/vd-input-ns.scss

@@ -0,0 +1,99 @@
+$vd-input-padding: vd-grid-unit(3) !default;
+$vd-input-icon-padding: 35px;
+$vd-input-icon-position-h: vd-grid-unit(3);
+$vd-input-border-width: 2px;
+
+$vd-input-message-margin: 8px;
+
+// Generate 5dp px line height value for vd-textarea. Required to accurately calculate it's height based on the
+// requested number of lines. Specify the exact pixel value to ensure there is not rounding issues between browsers.
+$vd-textarea-leading: 20;
+$vd-textarea-unitless-font-size: map-deep-get($_vd-text-definitions, body, size);
+$vd-textarea-unitless-line-height: to-fixed(($vd-textarea-leading / $vd-textarea-unitless-font-size), $digits: 5);
+$vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-textarea-unitless-line-height);
+
+@mixin vd-input-text() {
+  color: vd-colour(text);
+  font-family: $vd-font-primary;
+  font-weight: $vd-font-weight--regular;
+  font-size: vd-text-size(body);
+  word-break: normal;
+
+  &::placeholder {
+    color: vd-colour(supplementary);
+    opacity: 1;
+  }
+
+  // Add ellipsis to long placeholders
+  &:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+
+  &:disabled {
+    @include disabled();
+  }
+
+  @include vd-viewport-media-max(xsmall) {
+    // Prevent zooming when focusing on inputs; @todo there are better approaches to handle this
+    font-size: 16px;
+  }
+}
+
+@mixin vd-input-box-model ($vd-input-width: 100%) {
+  width: $vd-input-width;
+  margin: 0;
+  padding: $vd-input-padding;
+  box-sizing: border-box;
+  outline: none;
+}
+
+@mixin vd-input-states () {
+  box-shadow: none;
+  background-color: vd-colour(box);
+  border: vd-border(framing, $vd-input-border-width);
+  border-radius: $vd-border-radius;
+
+  transition: all $vd-time-s;
+  transition-property: border-color, box-shadow;
+
+  @include vd-input-focus();
+  @include vd-input-error();
+}
+
+@mixin vd-input-focus () {
+  &:focus, &.vd-focus {
+    border-color: vd-colour(go);
+    box-shadow: 0 0 $vd-shadow-blur vd-colour(go);
+  }
+}
+
+@mixin vd-input-error () {
+  @include vd-input-error-selectors () {
+    @include vd-input-error-styles();
+  }
+}
+
+@mixin vd-input-error-selectors () {
+  // @TODO Deprecate `.vd-input--error`.
+  &.vd-input--error,
+  &.vd-error,
+  &.ng-invalid.ng-dirty,
+  .ng-submitted &.ng-invalid {
+    @content;
+  }
+}
+
+@mixin vd-input-error-styles () {
+  border-color: vd-colour(no);
+
+  &:focus, &.vd-focus {
+    box-shadow: 0 0 $vd-shadow-blur vd-colour(no);
+  }
+}
+
+@mixin vd-input {
+  cursor: text;
+  @include vd-input-text();
+  @include vd-input-box-model();
+  @include vd-input-states();
+}

package/src/vend.ui/components/vd-input/vd-input.scss

@@ -0,0 +1,49 @@
+.vd-input {
+  @include vd-input;
+}
+
+.vd-input-error-message-section {
+  display: block;
+  margin-top: $vd-input-message-margin;
+  color: vd-colour(no);
+  font-size: vd-text-size(supplementary);
+
+  .vd-input-error-message-text {
+    margin-left: $vd-input-message-margin / 2;
+  }
+}
+
+.vd-input--icon-left { padding-left: $vd-input-icon-padding; }
+.vd-input--icon-right { padding-right: $vd-input-icon-padding; }
+
+.vd-input-icon {
+  position: absolute;
+  top: 16px;
+  color: vd-colour(supplementary--text);
+  pointer-events: none;
+}
+
+.vd-input-icon--left { left: $vd-input-icon-position-h; }
+.vd-input-icon--right { right: $vd-input-icon-position-h; }
+
+.vd-input--text-align-right {
+  text-align: right;
+}
+
+.vd-input--text-align-left {
+  text-align: left;
+}
+.vd-input-symbol {
+  line-height: 1;
+}
+
+.vd-textarea {
+  display: block;
+  resize: none;
+  overflow: hidden;
+  line-height: $vd-textarea-line-height;
+}
+
+.vd-textarea--scrollable {
+  overflow: visible;
+}

package/src/vend.ui/components/vd-input-char-limit/vd-input-char-limit.scss

@@ -0,0 +1,8 @@
+.vd-countdown {
+  margin-top: $vd-input-message-margin;
+  font-size: vd-text-size(supplementary);
+
+  &:not(.vd-text--negative) {
+    color: vd-colour(supplementary--text);
+  }
+}