@lightspeed/design-system-css 0.1.0

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

@@ -0,0 +1,12 @@
+$vd-promos-spacing: vd-grid-unit(3) !default;
+$vd-promo-image-container-min-height: 100px !default;
+
+// Promo Headline
+@mixin vd-promo-headline () {
+  @include vd-heading-reset();
+  @include vd-line-height(30, 24);
+  @include font-smoothing;
+
+  font-family: $vd-font-lato;
+  font-size: vd-text-size(heading);
+}

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

@@ -0,0 +1,86 @@
+
+// Promo
+.vd-promo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  padding: $vd-promos-spacing;
+  text-align: center;
+  font-family: $vd-font-lato;
+}
+
+.vd-promo-headline {
+  @include vd-promo-headline;
+  margin: $vd-promos-spacing 0;
+}
+
+.vd-promo-image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: $vd-promo-image-container-min-height;
+}
+
+.vd-promo-image {
+  max-width: 100%;
+  height: auto;
+}
+
+.vd-promo-intro {
+  @include vd-line-height(25, 15);
+  font-size: vd-text-size(body);
+  margin: 0;
+}
+
+.vd-promo-actions {
+  margin-top: vd-grid-unit(4);
+  display: flex;
+  justify-content: space-between;
+}
+
+// Promo Full Width
+.vd-promo--full {
+  flex-basis: 100%;
+  justify-content: flex-start;
+  flex-direction: row;
+
+  text-align: left;
+
+  @include vd-viewport-media-max(small) {
+    flex-direction: column;
+    justify-content: center;
+
+    text-align: center;
+  }
+
+  .vd-promo-content {
+    padding: 0 vd-grid-unit(5);
+    align-self: center;
+  }
+
+  .vd-promo-headline {
+    margin-top: 0;
+
+    @include vd-viewport-media-max(small) {
+      margin: $vd-promos-spacing 0;
+    }
+  }
+
+  .vd-promo-image-container {
+    flex-shrink: 0;
+  }
+}
+
+// Promo Greyscale
+.vd-promo--disabled {
+  filter: grayscale(100%);
+  opacity: 0.35;
+}
+
+// Promo Image Restrained
+.vd-promo-image--restrained {
+  width: 110px;
+}

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

@@ -0,0 +1,7 @@
+$vd-radio-length: vd-grid-unit(5);
+$vd-radio-tick-length: 6px;
+$vd-radio-tick-position: $vd-radio-tick-length - 1;
+
+$vd-radio-length--large: 26px;
+$vd-radio-tick-length--large: 10px;
+$vd-radio-tick-position--large: 6px;

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

@@ -0,0 +1,130 @@
+@keyframes vd-radio-checked {
+  0%  { transform: scale(0); }
+  33% { transform: scale(1.8); }
+  66% { transform: scale(1); }
+}
+
+.vd-radio {
+  display: inline-block;
+  position: relative;
+  padding: 0 vd-grid-unit(1);
+
+  &:first-child { padding-left: 0 }
+  &:last-child  { padding-right: 0 }
+}
+
+.vd-radio-container {
+  padding-bottom: vd-grid-unit(3);
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  cursor: pointer;
+
+  &:last-child  { padding-bottom: 0 }
+}
+
+.vd-radio-input-container {
+  display: flex;
+  align-items: center;
+}
+
+.vd-radio-label { padding-left: vd-grid-unit(3); }
+
+.vd-radio-description {
+  @include vd-text(supplementary);
+  padding-top: vd-grid-unit(2);
+  padding-left: $vd-radio-length + vd-grid-unit(3);
+}
+
+.vd-radio-description--disabled {
+  opacity: $vd-opacity;
+}
+
+.vd-radio-input { @extend %vd-invisible-checkbox-input; }
+
+.vd-radio-tick {
+  flex-shrink: 0;
+  display: inline-block;
+  position: relative;
+  height: $vd-radio-length;
+  width: $vd-radio-length;
+  border-radius: 50%;
+  background-color: vd-colour(box);
+  border: vd-border(framing, 2px);
+  box-sizing: border-box;
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: $vd-radio-tick-length;
+    width: $vd-radio-tick-length;
+    border-radius: 50%;
+    background-color: vd-colour(framing);
+    opacity: 0;
+    left: $vd-radio-tick-position;
+    top: $vd-radio-tick-position;
+    transition: opacity $vd-time-s;
+  }
+}
+
+.vd-radio--large {
+  .vd-radio-tick {
+    height: $vd-radio-length--large;
+    width: $vd-radio-length--large;
+
+    &:after {
+      height: $vd-radio-tick-length--large;
+      width: $vd-radio-tick-length--large;
+      left: $vd-radio-tick-position--large;
+      top: $vd-radio-tick-position--large;
+    }
+  }
+  .vd-radio-description {
+    padding-left: $vd-radio-length--large + vd-grid-unit(3);
+  }
+}
+
+.vd-radio-input:hover + .vd-radio-tick:after { opacity: 1; }
+
+// Checked
+.vd-radio-input:checked + .vd-radio-tick {
+  transition: background-color $vd-time-l;
+  background-color: vd-colour(do);
+  border-color: vd-colour(do);
+
+  &:after {
+    opacity: 1;
+    animation: vd-radio-checked $vd-time-l;
+    background-color: vd-colour(text-action);
+    box-sizing: content-box;
+    backface-visibility: hidden;
+  }
+}
+
+// Disabled
+.vd-radio.vd-disabled .vd-radio-input,
+.vd-radio-input:disabled {
+  cursor: not-allowed;
+  filter: grayscale(100%);
+
+  &:hover + .vd-radio-tick:after { opacity: 0; }
+  &:hover:checked + .vd-radio-tick:after {
+    opacity: 1;
+    background-color: vd-colour(box);
+  }
+
+  ~ .vd-radio-label {
+    opacity: $vd-opacity;
+  }
+
+  &:checked ~ .vd-radio-tick {
+    filter: grayscale(100%);
+    opacity: $vd-opacity;
+  }
+}
+
+// Focus
+.vd-radio:focus-within {
+  box-shadow: 0 0 5px 2px vd-colour(go);
+}

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

@@ -0,0 +1,4 @@
+.vd-save {
+  display: block;
+  flex-shrink: 0;
+}

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

@@ -0,0 +1,2 @@
+$vd-scrollable-indicator-height: 30px;
+$vd-scrollable-indicator-width: 90%;

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

@@ -0,0 +1,54 @@
+.vd-scrollable-container {
+  // Fixes overflow in a full screen splash modal
+  max-height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  // Fixes up overflow issues in Firefox
+  min-height: 0;
+}
+
+.vd-scrollable {
+  overflow-y: auto;
+  flex: 1;
+}
+
+.vd-scrollable-indicator {
+  opacity: 0;
+  position: absolute;
+  height: $vd-scrollable-indicator-height;
+  width: $vd-scrollable-indicator-width;
+  margin: 0 (-$vd-scrollable-indicator-width / 2);
+  left: 50%;
+  z-index: $vd-z-index-content-base;
+  user-select: none;
+  pointer-events: none;
+  overflow: hidden;
+  transition: opacity 50ms ease 0s;
+
+  &::before {
+    content: '';
+    box-shadow: 0 0 $vd-scrollable-indicator-height vd-colour(shadow);
+    border-radius: 100%;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+}
+
+.vd-scrollable-monobrow {
+  top: 0;
+
+  &::before {
+    transform: translateY(-100%);
+  }
+}
+
+.vd-scrollable-goatee {
+  bottom: 0;
+
+  &::before {
+    transform: translateY(100%);
+  }
+}

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

@@ -0,0 +1,17 @@
+// vd section
+$vd-section-wrap-max-width: 1100px !default;
+
+$vd-section-padding-h: vd-grid-unit(12);
+$vd-section-padding-v: vd-grid-unit(6);
+
+$vd-section-padding-h-med: vd-grid-unit(8);
+$vd-section-padding-v-med: vd-grid-unit(4);
+
+$vd-section-padding-h-sml: vd-grid-unit(6);
+$vd-section-padding-v-sml: vd-grid-unit(4);
+
+$vd-section--panel-margin-h: vd-grid-unit(6);
+
+// Action bars
+$vd-section--action-bar-min-height: 45px;
+$vd-section--action-bar-spacing: vd-grid-unit(6);

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

@@ -0,0 +1,118 @@
+:root {
+  --vd-section-padding-h: #{$vd-section-padding-h};
+  --vd-section-padding-v: #{$vd-section-padding-v};
+}
+
+@include vd-viewport-media-max(medium) {
+  :root {
+    --vd-section-padding-h: #{$vd-section-padding-h-med};
+    --vd-section-padding-v: #{$vd-section-padding-v-med};
+  }
+}
+
+@include vd-viewport-media-max(small) {
+  :root {
+    --vd-section-padding-h: #{$vd-section-padding-h-sml};
+    --vd-section-padding-v: #{$vd-section-padding-v-sml};
+  }
+}
+
+vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
+  display: block;
+  position: relative;
+  font-size: vd-text-size(body);
+  padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
+
+  .vd-section-wrap {
+    display: block;
+    margin: 0 auto;
+    max-width: $vd-section-wrap-max-width;
+  }
+
+  .vd-section-container {
+    margin: calc(var(--vd-section-padding-v) * -1) calc(var(--vd-section-padding-h) * -1);
+    padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
+  }
+
+  // Nested sections
+  vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
+    padding: var(--vd-section-padding-v) 0;
+  }
+
+  // Fallback to base padding if browser doesn't support CSS variables
+  @supports ( not (--a: 0)) {
+    padding: $vd-section-padding-v $vd-section-padding-h;
+
+    .vd-section-container {
+      margin: -#{$vd-section-padding-v} -#{$vd-section-padding-h};
+      padding: $vd-section-padding-v $vd-section-padding-h;
+    }
+
+    vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
+      padding: $vd-section-padding-v 0;
+    }
+  }
+}
+
+.vd-section--secondary {
+  &, .vd-section-container { background-color: vd-colour(framing); }
+}
+
+.vd-section--tertiary  {
+  &, .vd-section-container { background-color: vd-colour(box); }
+}
+
+.vd-section--panel {
+  border-bottom: vd-border(keyline);
+  margin: 0 $vd-section--panel-margin-h;
+
+  &:last-child { border-bottom: none; }
+}
+
+.vd-section--fixed {
+  @include vd-shadow();
+
+  &::after {
+    @include vd-fade-in($vd-time-s);
+
+    bottom: 4px;
+    height: 40px;
+    border-radius: 100%;
+    top: auto;
+    opacity: 0;
+  }
+
+  position: fixed;
+  top: $vd-top-nav-height;
+  right: 0;
+  z-index: $vd-z-index-navigation-base;
+  box-sizing: border-box;
+}
+
+.vd-section--action-bar {
+  &, .vd-section-container { background-color: vd-colour(framing); }
+
+  .vd-section-wrap {
+    min-height: $vd-section--action-bar-min-height;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    @include vd-viewport-media-max ($vd-breakpoint-small) {
+      flex-wrap: wrap;
+    }
+  }
+}
+
+.vd-section--action-bar-about {
+  padding-right: $vd-section--action-bar-spacing;
+
+  @include vd-viewport-media-max ($vd-breakpoint-small) {
+    flex-basis: 100%;
+    padding: 0 0 $vd-section--action-bar-spacing 0;
+  }
+}
+
+.vd-section--action-bar-actions {
+  display: flex;
+}

package/src/vend.ui/components/vd-section-back/vd-section-back-ns.scss

@@ -0,0 +1,3 @@
+$vd-section-back-height: 20px;
+$vd-section-back-width: 20px;
+$vd-section-back-icon-font-size: 24px;

package/src/vend.ui/components/vd-section-back/vd-section-back.scss

@@ -0,0 +1,34 @@
+.vd-section-back {
+  border-radius: $vd-section-back-height / 2;
+  background-color: transparent;
+  cursor: pointer;
+  position: absolute;
+  left: -33px;
+  top: 12px;
+
+  .vd-section-back-icon {
+    display: block;
+    color: vd-colour(keyline);
+    font-size: $vd-section-back-icon-font-size;
+    transition: all $vd-time-s;
+    transition-property: margin-left, padding-right, color;
+  }
+
+  &:hover {
+    .vd-section-back-icon {
+      margin-left: -2px;
+      padding-right: 2px;
+      color: vd-colour(do);
+    }
+  }
+
+  @include vd-viewport-media-max(medium) {
+    position: relative;
+    left: 0;
+
+    .vd-section-back-icon {
+      display: inline-block;
+      vertical-align: text-top;
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+.vd-segcontrol {
+  &:first-of-type .vd-segcontrol-button {
+    border-left: vd-border(framing, $vd-input-border-width);
+    border-radius: $vd-border-radius 0 0 $vd-border-radius;
+  }
+
+  &:last-of-type .vd-segcontrol-button {
+    border-radius: 0 $vd-border-radius $vd-border-radius 0;
+    border-right: vd-border(framing, $vd-input-border-width);
+  }
+
+  position: relative;
+  display: flex;
+  text-align: center;
+  font-weight: normal;
+}
+
+.vd-segcontrol--stretched {
+  width: 100%;
+}
+
+.vd-segcontrol--selected {
+  .vd-segcontrol-button {
+    border-color: vd-colour(do) !important;
+    z-index: 3;
+  }
+}
+
+.vd-segcontrol:not(.vd-segcontrol--selected):not(.vd-segcontrol--disabled):hover {
+  .vd-segcontrol-input:not(:disabled) ~ .vd-segcontrol-button {
+    z-index: 2;
+    border-color: vd-colour(keyline);
+    cursor: pointer;
+  }
+}
+
+.vd-segcontrol + .vd-segcontrol .vd-segcontrol-button {
+  margin-left: -$vd-input-border-width;
+}
+
+.vd-segcontrol-button {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  background-color: vd-colour(box);
+  padding: $vd-input-padding vd-grid-unit(5);
+  border: vd-border(framing, $vd-input-border-width);
+  color: vd-colour(text);
+  width: 100%;
+  transition-duration: $vd-time-s;
+  transition-property: background, border;
+}
+
+.vd-segcontrol-input {
+  visibility: hidden;
+  position: absolute;
+
+  &:checked + .vd-segcontrol-button {
+    color: vd-colour(text);
+  }
+
+  &:disabled + .vd-segcontrol-button {
+    @include disabled();
+
+    cursor: default;
+    pointer-events: none;
+  }
+}
+
+// Putting this at the bottom, so wins specificity wars.
+.vd-segcontrol:active .vd-segcontrol-input + .vd-segcontrol-button {
+  background-color: vd-rgba(vd-colour(box-rgb), 0.2);
+  box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread vd-rgba(vd-colour(box-rgb), $vd-opacity);
+}
+
+.vd-segcontrol--panel {
+  width: 100%;
+  margin-left: vd-grid-unit(5);
+
+  &:first-of-type { margin-left: 0; }
+}

package/src/vend.ui/components/vd-select/vd-select-group.scss

@@ -0,0 +1,47 @@
+.vd-select-group {
+  display: flex;
+  align-items: center;
+
+  // @todo remove vd-select-container when vd-select-input is deprecated
+  > .vd-select, .vd-select-container {
+    width: auto;
+  }
+
+  .vd-input {
+    margin-left: 0;
+    margin-right: 0;
+    flex: 1;
+  }
+
+  .vd-input, .vd-select {
+    position: relative;
+
+    &:focus {
+      z-index: $vd-select-input-group-focused-zindex;
+    }
+  }
+
+  .vd-input:not(:first-child), .vd-select:not(:first-child) {
+    @include remove-border-radius-left();
+    margin-left: -$vd-input-border-width;
+  }
+
+  .vd-select-container:not(:first-child) {
+    margin-left: -$vd-input-border-width;
+
+    .vd-select {
+      @include remove-border-radius-left();
+    }
+  }
+
+  .vd-input:not(:last-child), .vd-select:not(:last-child),
+  .vd-select-container:not(:last-child) .vd-select {
+    @include remove-border-radius-right();
+  }
+
+  .vd-input, .vd-select, .vd-select-container:not(:last-child) {
+    &.vd-error {
+      z-index: $vd-select-input-group-with-error-zindex;
+    }
+  }
+}

package/src/vend.ui/components/vd-select/vd-select-inline.scss

@@ -0,0 +1,40 @@
+.vd-select-container--inline {
+  display: inline-block;
+  position: relative;
+
+  &::before, &::after {
+    display: none;
+  }
+
+  .vd-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    line-height: inherit;
+    opacity: 0;
+    z-index: 1;
+    cursor: pointer;
+  }
+}
+
+.vd-select-inline {
+  display: inline-flex;
+  align-self: baseline;
+}
+
+.vd-select-inline--placeholder {
+  color: vd-colour(supplementary);
+}
+
+.vd-select-inline-text {
+  pointer-events: none;
+  text-decoration: underline;
+}
+
+.vd-select-inline-chevron {
+  font-size: 0.5em;
+  padding-left: 0.1em;
+  align-self: center;
+  pointer-events: none;
+}

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

@@ -0,0 +1,17 @@
+$vd-select-input-group-focused-zindex: $vd-z-index-content-base + 3;
+$vd-select-input-group-with-error-zindex: $vd-select-input-group-focused-zindex - 1;
+
+@mixin vd-select() {
+  @include vd-input-text();
+  @include vd-input-box-model();
+  @include vd-input-states();
+  appearance: none;
+  padding-right: 3 * $vd-input-padding;
+}
+
+@mixin vd-select-carets() {
+  background-repeat: no-repeat;
+  background-size: 10px 23px;
+  background-position: calc(100% - 10px) 10px;
+  background-image: vd-colour(select-arrows-bg);
+}

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

@@ -0,0 +1,26 @@
+// ⚠️ @warning This vd-select-container will be deprecated in an upcoming release. It was originally needed as it
+// allowed us to show select chevrons with pseudo elements, but this is now achieved with inline svgs set on
+// `.vd-select` directly.
+.vd-select-container {
+  display: block;
+  position: relative;
+
+  // @todo This can be removed once we fully deprecate vd-select in favour of vd-select-input, since the vd-error class
+  // can just be added to the input.
+  &.vd-error {
+    .vd-select {
+      border-color: vd-colour(no);
+      &:focus {
+        box-shadow: 0 0 $vd-shadow-blur vd-colour(no);
+      }
+    }
+  }
+}
+
+.vd-select {
+  @include vd-select;
+  @include vd-select-carets;
+}
+
+@import "vd-select-group";
+@import "vd-select-inline";

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

@@ -0,0 +1 @@
+$vd-settings-padding: 40px;

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

@@ -0,0 +1,8 @@
+.vd-grid-settings-item {
+  padding-right: $vd-settings-padding;
+
+  @include vd-viewport-media-max ($vd-breakpoint-small) {
+    padding-right: 0;
+    padding-bottom: $vd-settings-padding;
+  }
+}