@lightspeed/design-system-css 0.1.0

package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss

@@ -0,0 +1,68 @@
+$vd-autocomplete-filter-select-border-radius: $vd-border-radius 0 0 $vd-border-radius;
+$vd-autocomplete-filter-select-padding: 12px;
+$vd-autocomplete-filter-selector-container-width: 130px;
+$vd-autocomplete-filter-select-padding-left: 34px;
+$vd-autocomplete-filter-input-border-radius: 0 $vd-border-radius $vd-border-radius 0;
+$vd-autocomplete-filter-icon-margin: 14px;
+
+.vd-autocomplete-filter {
+  display: block;
+
+  @include vd-input-error-selectors () {
+    vd-autocomplete-multi { // stylelint-disable-line selector-type-no-unknown
+      @include vd-input-error-styles();
+    }
+  }
+}
+
+.vd-autocomplete-filter-input-container {
+  display: flex;
+  align-items: flex-start;
+
+  .vd-select {
+    padding-left: $vd-autocomplete-filter-select-padding-left;
+    border-radius: $vd-autocomplete-filter-select-border-radius;
+    // Currently the default select / input border is 1px, the aim is to move this to two. At that point the border
+    // right of the select in this component would need to be half that so it would look like it shares a border with
+    // its neighbour.  For now this has no affect as the min measure is 1px. This goes for all of the following border
+    // overrides
+    border-right: vd-border(framing, $vd-input-border-width / 2);
+    transition: none;
+  }
+
+  .vd-lozenge-group {
+    border-radius: $vd-autocomplete-filter-input-border-radius;
+    border-left: vd-border(framing, $vd-input-border-width / 2);
+  }
+
+  vd-autocomplete-multi { // stylelint-disable-line selector-type-no-unknown
+    width: 100%;
+    transition: none;
+  }
+}
+
+.vd-autocomplete-selector-container {
+  flex-basis: $vd-autocomplete-filter-selector-container-width;
+  flex-shrink: 0;
+}
+
+.vd-autocomplete-select-placeholder {
+  @include vd-input-states();
+  border-right: vd-border(framing, $vd-input-border-width / 2);
+  border-radius: $vd-autocomplete-filter-select-border-radius;
+  padding: $vd-autocomplete-filter-select-padding;
+  padding-left: $vd-autocomplete-filter-select-padding-left;
+  text-transform: capitalize;
+}
+
+.vd-autocomplete-filter-icon {
+  position: absolute;
+  z-index: 1;
+  margin-left: $vd-autocomplete-filter-icon-margin;
+  margin-top: $vd-autocomplete-filter-icon-margin;
+  color: vd-colour(supplementary);
+}
+
+.vd-autocomplete-filter-button-label {
+  text-transform: capitalize;
+}

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

@@ -0,0 +1,3 @@
+$vd-avatar-size: 76px;
+$vd-avatar-size-sm: 50px;
+$vd-avatar-size-xsm: 35px;

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

@@ -0,0 +1,78 @@
+.vd-avatar {
+  background-color: vd-colour(framing);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  border-radius: $vd-card-border-radius;
+  width: $vd-avatar-size;
+  height: $vd-avatar-size;
+
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.vd-avatar--small {
+    width: $vd-avatar-size-sm;
+    height: $vd-avatar-size-sm;
+  }
+
+  &.vd-avatar--x-small {
+    width: $vd-avatar-size-xsm;
+    height: $vd-avatar-size-xsm;
+  }
+
+  &.vd-avatar--deleted-image {
+    @include disabled();
+    background-color: vd-colour(no);
+  }
+
+  .deleted-state-icon {
+    color: vd-colour(box);
+  }
+}
+
+.vd-avatar--initials {
+  @include vd-text(heading);
+
+  word-wrap: normal;
+  word-break: normal;
+  color: vd-colour(text-action);
+  text-align: center;
+
+  &.vd-avatar--x-small {
+    @include vd-text(label);
+  }
+
+  &.vd-avatar--small {
+    @include vd-text(sub-heading);
+  }
+
+  &.vd-avatar--initials-1 {
+    background-color: vd-colour(new-york-pink);
+  }
+
+  &.vd-avatar--initials-2 {
+    background-color: vd-colour(tacao);
+  }
+
+  &.vd-avatar--initials-3 {
+    background-color: vd-colour(golden-sand);
+  }
+
+  &.vd-avatar--initials-4 {
+    background-color: vd-colour(gothic);
+  }
+
+  &.vd-avatar--initials-5 {
+    background-color: vd-colour(sinbad);
+  }
+
+  &.vd-avatar--initials-6 {
+    background-color: vd-colour(lavender-purple);
+  }
+
+  &.vd-avatar--initials-7 {
+    background-color: vd-colour(shuttle-gray);
+  }
+}

package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi-ns.scss

@@ -0,0 +1,4 @@
+$vd-avatar-multi-size: 76px;
+$vd-avatar-multi-size-gap: 4px;
+$vd-avatar-multi-tile-size: ($vd-avatar-multi-size / 2) - ($vd-avatar-multi-size-gap / 2);
+$vd-avatar-multi-tile-placeholder-size: 60px;

package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss

@@ -0,0 +1,70 @@
+.vd-avatar-multi {
+  width: $vd-avatar-multi-size;
+  height: $vd-avatar-multi-size;
+}
+
+.vd-avatar-multi-tile {
+  box-sizing: border-box;
+  border-radius: $vd-border-radius;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+  background-color: vd-colour(framing);
+  position: relative;
+
+  // Ensure placeholder backgrounds are the same size regardless of tile size
+  &[vd-lazy-load*="placeholder.svg"] {
+    background-size: $vd-avatar-multi-tile-placeholder-size;
+  }
+}
+
+.vd-avatar-multi-tile--remainder {
+  background-color: vd-colour(keyline);
+}
+
+.vd-avatar-multi-count {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  transform: translateY(-50%);
+}
+
+// Grid
+@supports (display: grid) {
+  .vd-avatar-multi {
+    display: grid;
+    grid-template-columns: repeat(2, $vd-avatar-multi-tile-size);
+    grid-column-gap: $vd-avatar-multi-size-gap;
+    row-gap: $vd-avatar-multi-size-gap;
+  }
+
+  // Only one tile
+  .vd-avatar-multi-tile {
+    &:only-child {
+      grid-area: 2 span / 2 span;
+    }
+
+    // Three tiles
+    &:first-child:nth-last-child(3) {
+      grid-area: 2 span;
+    }
+  }
+}
+
+// Flexbox fallback
+@supports not (display: grid) {
+  .vd-avatar-multi {
+    display: flex;
+    flex-wrap: wrap;
+    width: $vd-avatar-multi-size;
+    height: $vd-avatar-multi-size;
+  }
+
+  .vd-avatar-multi-tile {
+    flex: 1 1 50%;
+    border: ($vd-avatar-multi-size-gap / 2) solid vd-colour(box);
+    border-radius: 5px;
+  }
+}

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

@@ -0,0 +1 @@
+@import "./vd-id-badge/vd-id-badge";

package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge-ns.scss

@@ -0,0 +1,10 @@
+$vd-id-badge-spacing: 16px;
+$vd-id-badge-spacing-sm: 8px;
+$vd-id-badge-spacing-xsm: 8px;
+
+$vd-id-badge-image-size: 76px;
+$vd-id-badge-image-size-sm: 50px;
+$vd-id-badge-image-size-xsm: 35px;
+
+$vd-id-badge-table-margin: -10px;
+$vd-id-badge-desc-margin: 2px;

package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss

@@ -0,0 +1,159 @@
+.vd-badge {
+  display: block;
+}
+
+.vd-id-badge {
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+  text-align: left;
+  overflow: hidden;
+
+  .vd-flag-container {
+    display: inline-block;
+    vertical-align: text-bottom;
+  }
+
+  .vd-id-badge__header-title {
+    display: inline;
+  }
+
+  & + .vd-id-badge {
+    margin-right: $vd-id-badge-spacing;
+    margin-top: $vd-id-badge-spacing;
+  }
+
+  // INTERACTIVE STYLES
+
+  &.vd-id-badge--interactive-selection {
+    @include vd-card();
+    cursor: pointer;
+
+    .vd-id-badge__image {
+      border-radius: 0;
+    }
+
+    &:hover, &:active, &:focus {
+      outline: none;
+      background-color: vd-colour(go-highlight);
+    }
+  }
+
+  &.vd-id-badge--current {
+    border-color: vd-colour(do);
+  }
+
+  &.vd-id-badge--small {
+    .vd-id-badge__content {
+      padding: $vd-id-badge-spacing-sm;
+    }
+
+    .vd-id-badge__image {
+      min-width: $vd-id-badge-image-size-sm;
+      min-height: $vd-id-badge-image-size-sm;
+    }
+  }
+
+  &.vd-id-badge--small:not(.vd-id-badge--interactive-selection) {
+    .vd-id-badge__image {
+      width: $vd-id-badge-image-size-sm;
+      height: $vd-id-badge-image-size-sm;
+      min-width: auto;
+      min-height: auto;
+    }
+  }
+
+  &.vd-id-badge--interactive-action {
+    cursor: pointer;
+
+    .vd-id-badge__header-title {
+      text-decoration: underline;
+    }
+
+    &:hover, &:active, &:focus {
+      outline: none;
+
+      .vd-id-badge__header-title {
+        color: vd-colour(go);
+      }
+    }
+  }
+
+// SIZING ADJUSTMENTS
+
+  &.vd-id-badge--x-small {
+    .vd-id-badge__content {
+      padding: $vd-id-badge-spacing-xsm;
+    }
+
+    .vd-id-badge__image {
+      width: $vd-id-badge-image-size-xsm;
+      height: $vd-id-badge-image-size-xsm;
+      min-width: auto;
+      min-height: auto;
+      margin: $vd-id-badge-spacing-xsm 0;
+    }
+  }
+
+  &.vd-id-badge--avatar-multi {
+    min-width: 0;
+
+    .vd-id-badge__image {
+      width: $vd-id-badge-image-size;
+      height: $vd-id-badge-image-size;
+      min-width: auto;
+      min-height: auto;
+      background: transparent;
+      align-self: center;
+    }
+
+    .vd-id-badge__content {
+      padding-top: 0;
+      padding-bottom: 0;
+      min-width: 0;
+    }
+  }
+}
+
+.vd-table {
+  .vd-id-badge {
+    margin-top: $vd-id-badge-table-margin;
+    margin-bottom: $vd-id-badge-table-margin;
+  }
+}
+
+.vd-id-badge__content {
+  padding: $vd-id-badge-spacing;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  word-break: break-word;
+  color: vd-colour(text);
+  @include vd-text(body);
+}
+
+.vd-id-badge__description {
+  @include vd-text(supplementary);
+}
+
+.vd-id-badge__status {
+  @include vd-text(supplementary);
+}
+
+.vd-id-badge__image {
+  background-color: vd-colour(framing);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  min-width: $vd-id-badge-image-size;
+  min-height: $vd-id-badge-image-size;
+  border-radius: $vd-card-border-radius;
+  flex-shrink: 0;
+  overflow: hidden;
+
+  .vd-avatar {
+    border-radius: 0;
+    height: 100%;
+  }
+}

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

@@ -0,0 +1,16 @@
+@mixin vd-banner($primary-colour, $text-colour: vd-colour(text-action), $anchor-colour: vd-colour(text-action)) {
+  background-color: $primary-colour;
+  color: $text-colour;
+  border: none;
+  border-left: none;
+  border-right: none;
+
+  .vd-link,
+  .vd-link:hover,
+  .vd-link:visited,
+  .vd-btn--link,
+  .vd-btn--link:hover {
+    color: $anchor-colour;
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,89 @@
+.vd-banner-wrapper {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: baseline;
+  max-width: $vd-section-wrap-max-width;
+  margin: 0 auto;
+}
+
+.vd-banner-feedback {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  position: relative;
+  backdrop-filter: brightness(0.9);
+
+  @supports not (backdrop-filter: brightness(0.9)) {
+    &::before {
+      content: '';
+      background: $vd-colour-black;
+      filter: opacity(0.1);
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 0;
+    }
+
+    .vd-feedback-content {
+      z-index: 1;
+    }
+  }
+}
+
+.vd-banner-wrapper,
+.vd-banner-feedback {
+  padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
+
+  // 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-banner-content {
+  display: inline-block;
+}
+
+.vd-banner-icon {
+  margin-right: vd-grid-unit(2);
+}
+
+.vd-banner {
+  display: flex;
+  font-size: vd-text-size(body);
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.vd-banner--dismissed {
+  display: none;
+}
+
+.vd-banner--info,
+.vd-banner--activation {
+  @include vd-banner(vd-colour(supplementary))
+}
+.vd-banner--negative { @include vd-banner(vd-colour(no)) }
+.vd-banner--success  { @include vd-banner(vd-colour(success)) }
+
+@include vd-viewport-media-max(medium) {
+  .vd-banner-wrapper,
+  .vd-banner-feedback {
+    box-sizing: border-box;
+    flex: 1 0 100%;
+  }
+}
+
+// Sticky banner which sticks to the top
+.vd-banner--sticky {
+  position: sticky;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: $vd-z-index-popover-base;
+}

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

@@ -0,0 +1,4 @@
+.vd-bg--upsell {
+  background: vd-colour(background)
+    url("#{$vd-images-cdn-path}backgrounds/dashboard-upsell-bg-v1.svg");
+}

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

@@ -0,0 +1,20 @@
+.vd-body {
+  display: flex;
+  flex-flow: row wrap;
+  // @todo: this should probably be directly on the `body` element
+  height: 100vh;
+}
+
+.vd-body--no-scroll {
+  overflow: hidden;
+}
+
+// Use height 100% on iOS as 100vh is the height of the viewport after you've scrolled down the page enough for the
+// browser chrome to hide itself - this never happens as we've moved the overflow from the window to vd-main-content.
+.vd-is-ios {
+  &,
+  body,
+  .vd-body {
+    height: 100%;
+  }
+}

package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss

@@ -0,0 +1,121 @@
+
+// =================================== Helper Mixins =================================== //
+
+// Helper to apply disabled state styles for buttons.
+//
+// @mixin vd-btn-disabled
+//
+@mixin vd-btn-disabled () {
+  &:disabled,
+  &.disabled {
+    cursor: not-allowed;
+
+    @include disabled();
+  }
+}
+
+// Applies a box shadow in the provided primary colour.
+//
+// @mixin vd-btn-shadow
+//
+// @param {String} $_vd-colour-name - the button colour to use for the outline.
+//
+@mixin vd-btn-shadow ($_vd-colour-name) {
+  box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread vd-rgba(vd-colour(#{$_vd-colour-name}-rgb), $vd-opacity);
+}
+
+// Applies a box shadow with an outline in the provided primary colour.
+//
+// @mixin vd-btn-outline-shadow
+//
+// @param {String} $_vd-colour-name - the button colour to use for the outline.
+//
+@mixin vd-btn-outline-shadow ($_vd-colour-name) {
+  $_vd-requested-color: vd-colour(#{$_vd-colour-name}-rgb);
+
+  box-shadow:
+    0 0 0 $vd-shadow-spread vd-rgba(vd-colour(box-rgb), 0.8),
+    0 0 $vd-shadow-blur #{$vd-shadow-spread+1} vd-rgba($_vd-requested-color, $vd-opacity),
+    0 0 0 #{$vd-shadow-spread+1} vd-rgba($_vd-requested-color, 0.6);
+}
+
+// Helper to apply hover, active and focus state styles for buttons.
+//
+// @mixin vd-btn-states
+//
+// @param {String} $_vd-colour-name - the button colour.
+//
+@mixin vd-btn-states ($_vd-colour-name, $_vd-use-default-hover: false) {
+  @include vd-hover-when-supported {
+    &:hover {
+      color: vd-colour(text-action);
+      @if ($_vd-use-default-hover) {
+        background-color: vd-colour(#{$_vd-colour-name});
+      } @else {
+        background-color: vd-colour(#{$_vd-colour-name}-lighter);
+      }
+    }
+  }
+
+  &:active, &.vd-btn--active {
+    color: vd-colour(text-action);
+    background-color: vd-colour(#{$_vd-colour-name}-darker);
+    @include vd-btn-shadow($_vd-colour-name);
+  }
+
+  &:focus  {
+    @include vd-btn-outline-shadow($_vd-colour-name);
+  }
+}
+
+// =================================== Main Button Mixin =================================== //
+
+// Default buttons that have a solid background.
+//
+// @mixin vd-btn
+//
+// @param {String} $_vd-colour-name - the button colour.
+//
+@mixin vd-btn ($_vd-colour-name) {
+  background-color: vd-colour($_vd-colour-name);
+  color: vd-colour(text-action);
+
+  @include vd-btn-states($_vd-colour-name);
+}
+
+// =================================== Modifier Button Mixins =================================== //
+
+// Buttons which have a transparent background and whose text is the specified primary colour. Their background is
+// filled with the primary colour upon hover.
+//
+// @mixin vd-btn-text
+//
+// @param {String} $_vd-colour-name - the button colour to use.
+//
+@mixin vd-btn-text ($_vd-colour-name) {
+  background-color: transparent;
+  color: vd-colour($_vd-colour-name);
+
+  @include vd-btn-states($_vd-colour-name, true);
+}
+
+// Buttons which have a transparent background and whose text is the specified primary colour. Their background is
+// filled with the primary colour upon hover and have smaller padding to accommodate icons.
+//
+// @mixin vd-btn-icon
+//
+// @param {String} $_vd-colour-name - the button colour to use.
+//
+@mixin vd-btn-icon ($_vd-colour-name) {
+  background-color: transparent;
+  padding: $vd-btn-icon-padding;
+
+  // Button icons with a "go" category have different colour when resting
+  @if ($_vd-colour-name == go) {
+    color: vd-colour($_vd-colour-name);
+  } @else {
+    color: vd-colour(supplementary);
+  }
+
+  @include vd-btn-states($_vd-colour-name, true);
+}

package/src/vend.ui/components/vd-btn/_vd-btn-ns.scss

@@ -0,0 +1,7 @@
+$vd-btn-group-margin: vd-grid-unit(1);
+$vd-btn-stroke-width: 1px !default;
+$vd-btn-categories: (do, supplementary, no, go);
+$vd-btn-icon-font-size: 18px;
+$vd-btn-padding: vd-grid-unit(3) vd-grid-unit(5);
+// @todo icon padding should be updated when 14px is supported by vd-grid-unit
+$vd-btn-icon-padding: 12px 14px;