@lightspeed/design-system-css 0.1.0

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

@@ -0,0 +1,23 @@
+.vd-link {
+  color: vd-colour(go);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color $vd-time-s;
+
+  &:visited { color: vd-colour(go); }
+
+  @include vd-hover-when-supported {
+    &:hover { text-decoration: underline; }
+  }
+
+  &:active { text-decoration: underline;}
+}
+
+.vd-link--secondary {
+  color: currentColor !important; // required important to override a tag styles set in vd-table
+  text-decoration: underline !important; // required to override base a:link
+
+  @include vd-hover-when-supported {
+    &:hover { color: vd-colour(go) !important; } // required important to override a tag styles set in vd-table
+  }
+}

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

@@ -0,0 +1,56 @@
+$vd-loader-m: 20px;
+$vd-loader-s: 16px;
+$vd-loader-border: 2px;
+$vd-icon-height: 15px;
+$vd-i-bg-margin: vd-grid-unit(2);
+
+.vd-loader {
+  display: inline-block;
+  align-self: center;
+  width: $vd-loader-m;
+  height: $vd-loader-m;
+  border-radius: 50%;
+  border: $vd-loader-border solid vd-colour(do);
+  border-left-color: transparent;
+  @include vd-slow-rotate;
+
+  &.vd-loader--small {
+    width: $vd-loader-s;
+    height: $vd-loader-s;
+  }
+
+  .vd-btn & {
+    border-top-color: currentColor;
+    border-right-color: currentColor;
+    border-bottom-color: currentColor;
+  }
+}
+
+.vd-btn {
+  .vd-loader--small {
+    margin: -3px 0 -3px 6px;
+    vertical-align: middle;
+  }
+}
+
+.vd-loader--input {
+  position: absolute;
+  top: 50%;
+  right: $vd-i-bg-margin;
+  z-index: 0;
+  margin-top: -(($vd-loader-m / 2) + $vd-loader-border);
+
+  &.vd-loader--small {
+    margin-top: -(($vd-loader-s / 2) + $vd-loader-border);
+  }
+}
+
+// Defaults to right
+.vd-i-bg {
+  position: absolute;
+  top: 50%;
+  right: $vd-i-bg-margin;
+  margin: auto;
+  transform: translate(0, -50%);
+  z-index: 0;
+ }

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

@@ -0,0 +1,40 @@
+.vd-lozenge {
+  @include vd-text(body);
+
+  padding: 6px 10px;
+  color: vd-colour(supplementary--text);
+  background-color: vd-colour(framing);
+  border-radius: $vd-border-radius;
+  display: inline-block;
+  margin-right: vd-grid-unit(1);
+  margin-bottom: vd-grid-unit(1);
+
+  .vd-lozenge-label {
+    text-transform: capitalize;
+  }
+
+  .vd-lozenge-value {
+    font-weight: $vd-font-weight--bold;
+  }
+
+  .vd-lozenge-delete {
+    margin-left: 6px;
+    cursor: pointer;
+  }
+}
+
+.vd-lozenge--interactive {
+  color: vd-colour(text-action);
+
+  background-color: vd-colour(supplementary);
+}
+
+.vd-lozenge--disabled {
+  @include disabled;
+  pointer-events: none;
+}
+
+.vd-lozenge--marked {
+  background-color: vd-colour(no);
+  color: vd-colour(text-action);
+}

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

@@ -0,0 +1,38 @@
+@keyframes vd-lozenge-group-already-added {
+  from               { transform: scale3d(1, 1, 1); }
+  10%, 20%           { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
+  30%, 50%, 70%, 90% { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg); }
+  40%, 60%, 80%      { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg); }
+  to                 { transform: scale3d(1, 1, 1); }
+}
+
+// Common styles for an input and selected lozenge group. See vd-tag-input and vd-autocomplete-multi.
+.vd-lozenge-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  cursor: text;
+
+  @include vd-input-states();
+
+  .vd-lozenge {
+    margin-left: vd-grid-unit(1);
+    margin-top: vd-grid-unit(1);
+    margin-right: 0;
+
+    &.vd-lozenge-group-already-added {
+      animation-name: vd-lozenge-group-already-added;
+      animation-duration: 1s;
+      animation-fill-mode: both;
+    }
+  }
+
+  .vd-lozenge-group-input  {
+    @include vd-input-text();
+    @include vd-input-box-model();
+    background-color: transparent;
+    border: none;
+    flex-grow: 1;
+  }
+}
+

package/src/vend.ui/components/vd-main-content/vd-main-content.scss

@@ -0,0 +1,39 @@
+.vd-main-content-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
+  // The content container needs a defined basis size of >1px so it will wrap under the top bar
+  flex-basis: 1px;
+  height: calc(100% - #{$vd-topbar-height});
+
+  &.vd-nav-rest-of-page {
+    height: 100%;
+  }
+}
+
+// Adjust the height when the main content is embedded in iOS
+.vd-main-content-container--wrapped {
+  height: 100%;
+}
+
+.vd-main-content-inner-container {
+  flex-grow: 1;
+  flex-basis: 0;
+  position: relative;
+}
+
+.vd-main-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  // Ensures that we can always scroll overflow on iOS even when the content that is overflow is an iframe
+  -webkit-overflow-scrolling: touch;
+
+  @media print {
+    overflow: visible;
+  }
+}

package/src/vend.ui/components/vd-modals-container/vd-modals-container.scss

@@ -0,0 +1,5 @@
+.vd-modals-container {
+  @include vd-reset;
+  position: absolute;
+  z-index: $vd-modals-z-index;
+}

package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss

@@ -0,0 +1,32 @@
+$vd-multiselect-popover-input-icon-padding: vd-grid-unit(6);
+
+.vd-multiselect-popover-input {
+  cursor: pointer;
+}
+
+.vd-multiselect-popover-container {
+  display: block;
+
+  .vd-input-icon {
+    padding-right: $vd-multiselect-popover-input-icon-padding;
+    color: vd-colour(text);
+  }
+
+  @include vd-input-error-selectors () {
+    .vd-multiselect-popover-input {
+      @include vd-input-error-styles();
+    }
+  }
+}
+
+.vd-multiselect-popover-content-container {
+  max-width: $vd-field-short-max-width;
+
+  .vd-checkbox-input-container {
+    align-items: flex-start;
+  }
+
+  .vd-popover-list-item {
+    cursor: pointer;
+  }
+}

package/src/vend.ui/components/vd-nav-item/vd-nav-item.scss

@@ -0,0 +1,30 @@
+.vd-nav-item {
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.vd-nav-item-action {
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  color: inherit;
+
+  // Overrides any base anchor styles
+  &:active,
+  &:focus,
+  &:hover {
+    color: inherit;
+  }
+}
+
+.vd-nav-item--disabled {
+  cursor: not-allowed;
+
+  .vd-nav-item-action {
+    pointer-events: none;
+  }
+}

package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss

@@ -0,0 +1,62 @@
+.vd-next-stepper {
+  display: block;
+  padding: vd-grid-unit(6);
+  background-color: vd-colour(box);
+  border: vd-border(framing);
+
+  &.vd-next-stepper--on-box {
+    background-color: vd-colour(background);
+    border-color: transparent;
+  }
+}
+
+.vd-next-stepper-label {
+  white-space: nowrap;
+  font-weight: bold;
+  margin-right: vd-grid-unit(1);
+}
+
+.vd-next-stepper-summary {
+  display: flex;
+  justify-content: space-between;
+}
+
+.vd-next-stepper-header {
+  flex-basis: 100%;
+  padding-right: vd-grid-unit(2);
+}
+
+.vd-next-stepper-details {
+  display: flex;
+  flex-direction: column;
+  border-top: vd-border(keyline);
+  margin-top: vd-grid-unit(2);
+  padding-top: vd-grid-unit(2);
+}
+
+.vd-next-stepper-confirm {
+  margin: vd-grid-unit(2) 0 0;
+  align-self: flex-end;
+}
+
+.vd-next-stepper-why {
+  white-space: nowrap;
+}
+
+.vd-next-stepper-dott {
+  margin-right: vd-grid-unit(6);
+}
+
+@include vd-viewport-media-max (xsmall) {
+  .vd-next-stepper-summary {
+    flex-direction: column;
+  }
+
+  .vd-next-stepper-header {
+    padding: 0 0 vd-grid-unit(2) 0;
+  }
+
+  .vd-next-stepper-why {
+    align-self: flex-end;
+  }
+}

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

@@ -0,0 +1 @@
+$vd-colour-overlay:     vd-colour(overlay);

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

@@ -0,0 +1,19 @@
+.vd-overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  visibility: hidden;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in;
+  transition-property: background-color, visibility;
+  background-color: transparent;
+  pointer-events: none;
+}
+
+.vd-overlay--visible {
+  visibility: visible;
+  background-color: $vd-colour-overlay;
+  pointer-events: auto;
+}

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

@@ -0,0 +1,8 @@
+.vd-p {
+  display: block;
+  margin-bottom: vd-grid-unit(5);
+  margin-top: 0;
+  line-height: 1.5;
+
+  &:last-child { margin-bottom: 0; }
+}

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

@@ -0,0 +1,9 @@
+.vd-panel {
+  display: block;
+  background-color: vd-colour(box);
+  margin: 0 #{-$vd-section--panel-margin-h};
+}
+
+.vd-panel--dark {
+  background-color: vd-colour(background);
+}

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

@@ -0,0 +1,5 @@
+$vd-popover-trigger-spacing: 12px;
+$vd-popover-spacing: 24px;
+
+$vd-popover-border-radius: 5px;
+$vd-popover-beak-size: 12px;

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

@@ -0,0 +1,180 @@
+// Position the popover beak appropriately on the specified edge
+@mixin position-popover-beak($edge: top, $offset: 50%, $box-shadow: none) {
+  $edge-index: index((top, right, bottom, left), $edge);
+  $opposite-edge: nth((bottom, left, top, right), $edge-index);
+  $next-edge: nth((right, bottom, left, top), $edge-index);
+  $direction: nth((left, top, left, top), $edge-index);
+
+  .vd-popover-beak {
+    #{$edge}: 0;
+    #{$direction}: $offset;
+    margin-#{$edge}: -$vd-popover-beak-size / 2;
+    margin-#{$direction}: -$vd-popover-beak-size / 2;
+    border-#{$next-edge}-color: transparent;
+    border-#{$opposite-edge}-color: transparent;
+    box-shadow: $box-shadow;
+  }
+}
+
+.vd-popover-container {
+  @include vd-reset;
+
+  display: none;
+  position: relative;
+  z-index: $vd-popover-z-index;
+  outline: none;
+
+  &.vd-popover-tether-enabled {
+    display: inline-block;
+  }
+
+  &.vd-popover-tether-element-attached-top.vd-popover-tether-target-attached-bottom {
+    padding-top: $vd-popover-trigger-spacing;
+    @include position-popover-beak(top, $offset: $vd-popover-spacing, $box-shadow: none);
+
+    &.vd-popover-tether-element-attached-center .vd-popover-beak {
+      left: 50%;
+    }
+
+    &.vd-popover-tether-element-attached-right .vd-popover-beak {
+      left: auto;
+      right: $vd-popover-spacing;
+    }
+  }
+
+  &.vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top {
+    padding-bottom: $vd-popover-trigger-spacing;
+    @include position-popover-beak(bottom, $offset: $vd-popover-spacing, $box-shadow: 3px 3px 5px vd-colour(shadow));
+
+    &.vd-popover-tether-element-attached-center .vd-popover-beak {
+      left: 50%;
+    }
+
+    &.vd-popover-tether-element-attached-right .vd-popover-beak {
+      left: auto;
+      right: $vd-popover-spacing;
+    }
+  }
+
+  &.vd-popover-tether-element-attached-middle.vd-popover-tether-target-attached-middle {
+    &.vd-popover-tether-element-attached-right.vd-popover-tether-target-attached-left {
+      padding-right: $vd-popover-trigger-spacing;
+      @include position-popover-beak(right, $offset: 50%, $box-shadow: 3px 0 5px vd-colour(shadow));
+    }
+
+    &.vd-popover-tether-element-attached-left.vd-popover-tether-target-attached-right {
+      padding-left: $vd-popover-trigger-spacing;
+      @include position-popover-beak(left, $offset: 50%, $box-shadow: 3px 3px 5px vd-colour(shadow));
+    }
+  }
+}
+
+.vd-popover-container--inside-modal {
+  z-index: $vd-popover-inside-modal-z-index;
+}
+
+.vd-popover {
+  position: relative;
+  border: 1px solid vd-colour(framing);
+  border-radius: $vd-popover-border-radius;
+  box-shadow: $vd-box-shadow;
+  background-color: vd-colour(box);
+
+  .vd-popover-tether-pinned-bottom & {
+    margin-bottom: $vd-popover-beak-size;
+  }
+
+  .vd-popover-tether-pinned-top & {
+    margin-top: $vd-popover-beak-size;
+  }
+}
+
+.vd-popover-content {
+  position: relative;
+  box-sizing: border-box;
+  border-radius: $vd-popover-border-radius;
+  background-color: vd-colour(box);
+  z-index: 1;
+  padding: $vd-popover-spacing;
+
+  // The 40px is the approximate distance between the middle of the triggering component and the start of the list
+  max-height: calc(50vh - 40px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.vd-popover-actions {
+  .vd-action-bar {
+    position: relative;
+    z-index: 1;
+    border-radius: 0 0 $vd-popover-border-radius $vd-popover-border-radius;
+    border: 1px solid transparent;
+    padding-left: $vd-popover-spacing;
+    padding-right: $vd-popover-spacing;
+  }
+}
+
+.vd-popover-beak {
+  box-sizing: border-box;
+  position: absolute;
+  height: $vd-popover-beak-size;
+  width: $vd-popover-beak-size;
+  background-color: vd-colour(box);
+  border: 1px solid vd-colour(framing);
+  transform: rotate(45deg);
+
+  // If there is a vd-action-bar present and the beak is at the bottom it should be the same colour as the action bar
+  .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top .vd-popover-actions:not(:empty) ~ & {
+    background-color: $vd-action-bar-background-colour;
+  }
+
+  // Don't display the beak if the popover has been pinned to the edge of the scroll container as we can't guarantee
+  // the position of the trigger element and may end up pointing the beak at the wrong element.
+  .vd-popover-tether-pinned & {
+    display: none;
+  }
+}
+
+.vd-popover-container--modal {
+  display: block;
+
+  .vd-popover {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+    border: none;
+    box-shadow: none;
+  }
+
+  .vd-dialog-container {
+    padding: 0;
+  }
+
+  .vd-dialog-content {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.vd-dialog-popover-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $vd-popover-inside-modal-z-index;
+}
+
+.vd-popover-resize-detector {
+  position: absolute;
+  left: 0;
+  top: -100%;
+  width: 100%;
+  height: 100%;
+  margin: 1px 0 0;
+  border: none;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}

package/src/vend.ui/components/vd-popover-list/vd-popover-list-ns.scss

@@ -0,0 +1,16 @@
+$vd-popover-list-spacing: vd-grid-unit(2);
+$vd-popover-list-item-spacing: vd-grid-unit(4);
+
+@mixin vd-popover-list-item ($_vd-popover-item-padding: $vd-popover-list-item-spacing $vd-popover-spacing) {
+  color: currentColor;
+  text-decoration: none;
+  transition-duration: $vd-time-s;
+  transition-property: color, background;
+  display: block;
+  padding: $_vd-popover-item-padding;
+  word-break: break-word;
+
+  &:hover {
+    text-decoration: none;
+  }
+}

package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss

@@ -0,0 +1,128 @@
+.vd-popover--with-list {
+  .vd-popover-content {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // @note It is important that the gap at the top/bottom of the list is implemented using padding as the implementation
+  // of overflow, scrolling, etc for autocomplete suggestions list relies on this
+  //
+  // If margin is used instead of padding, the incorrect height is calculated for the dropdown and it
+  // causes the dropdown to "flicker" direction
+  &.vd-popover-tether-element-attached-top.vd-popover-tether-target-attached-bottom {
+    .vd-popover-content {
+      padding-top: $vd-popover-list-spacing;
+    }
+
+    .vd-popover-list-empty,
+    .vd-popover-list-header {
+      padding-top: -$vd-popover-list-spacing;
+    }
+  }
+
+  &.vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top {
+    .vd-popover-content {
+      padding-bottom: $vd-popover-list-spacing;
+    }
+
+    .vd-popover-list-empty {
+      padding-bottom: -$vd-popover-list-spacing;
+    }
+  }
+}
+
+.vd-popover-list {
+  box-sizing: border-box;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.vd-popover-list-group-header {
+  @include vd-popover-list-item();
+  @include vd-text(signpost);
+  position: relative;
+
+  &::after {
+    content: '';
+    border-bottom: vd-border(framing, 2px);
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: $vd-popover-spacing;
+    left: $vd-popover-spacing;
+  }
+}
+
+.vd-popover-list-item {
+  @include vd-popover-list-item();
+  outline: none;
+  cursor: pointer;
+
+  &.vd-popover-list-item--active,
+  &:hover,
+  &:focus {
+    background-color: vd-colour(go-highlight);
+  }
+}
+
+.vd-popover-list-item--disabled {
+  cursor: not-allowed;
+}
+.vd-popover-list-empty {
+  @include vd-popover-list-item($vd-popover-spacing);
+}
+
+.vd-popover-list-header {
+  position: relative;
+
+  &:empty {
+    display: none;
+  }
+
+  @include vd-popover-list-item();
+}
+
+.vd-popover-list-footer {
+  @include vd-popover-list-item();
+}
+
+.vd-popover-list-footer--full {
+  background-color: vd-colour(box);
+  border-top: vd-border(framing);
+  display: flex;
+  flex-direction: column;
+  min-height: 60px;
+  padding: 0;
+}
+
+.vd-popover-list-footer-action {
+  @include vd-text(label);
+  background-color: vd-colour(box);
+  border: 0;
+  color: vd-colour(do);
+  cursor: pointer;
+  flex: 1 0 100%;
+  font-family: $vd-font-lato;
+  outline: none;
+  padding: vd-spacer(2) $vd-popover-spacing;
+  text-align: left;
+  width: 100%;
+
+  @include vd-hover-when-supported {
+    &:hover {
+      background-color: vd-colour(go-highlight);
+    }
+  }
+
+  &:active, &:focus {
+    background-color: vd-colour(go-highlight);
+  }
+}
+
+.vd-popover-list-separator {
+  @extend .vd-hr;
+  margin: $vd-popover-list-spacing ($vd-popover-list-spacing + $vd-popover-list-item-spacing);
+  width: inherit;
+}