@lightspeed/design-system-css 1.1.2 → 1.3.0

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

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 $vd-input-padding: vd-grid-unit(3) !default;
 $vd-input-icon-padding: 35px;
@@ -11,8 +11,13 @@ $vd-input-message-margin: 8px;
 // 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(math.div($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);
+$vd-textarea-unitless-line-height: to-fixed(
+  math.div($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);
@@ -41,7 +46,7 @@ $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-texta
   }
 }
 
-@mixin vd-input-box-model ($vd-input-width: 100%) {
+@mixin vd-input-box-model($vd-input-width: 100%) {
   width: $vd-input-width;
   margin: 0;
   padding: 11px 14px; // To get a height of 44px
@@ -49,7 +54,7 @@ $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-texta
   outline: none;
 }
 
-@mixin vd-input-states () {
+@mixin vd-input-states() {
   box-shadow: none;
   background-color: vd-colour(box);
   border: vd-border(framing, $vd-input-border-width);
@@ -62,20 +67,21 @@ $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-texta
   @include vd-input-error();
 }
 
-@mixin vd-input-focus () {
-  &:focus, &.vd-focus {
+@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 () {
+@mixin vd-input-error() {
+  @include vd-input-error-selectors() {
     @include vd-input-error-styles();
   }
 }
 
-@mixin vd-input-error-selectors () {
+@mixin vd-input-error-selectors() {
   // @TODO Deprecate `.vd-input--error`.
   &.vd-input--error,
   &.vd-error,
@@ -85,10 +91,11 @@ $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-texta
   }
 }
 
-@mixin vd-input-error-styles () {
+@mixin vd-input-error-styles() {
   border-color: vd-colour(no);
 
-  &:focus, &.vd-focus {
+  &:focus,
+  &.vd-focus {
     box-shadow: 0 0 $vd-shadow-blur vd-colour(no);
   }
 }

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

@@ -13,8 +13,12 @@
   }
 }
 
-.vd-input--icon-left { padding-left: $vd-input-icon-padding; }
-.vd-input--icon-right { padding-right: $vd-input-icon-padding; }
+.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;
@@ -23,8 +27,12 @@
   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-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;

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

@@ -4,13 +4,19 @@
   cursor: pointer;
   transition: color $vd-time-s;
 
-  &:visited { color: vd-colour(go); }
+  &:visited {
+    color: vd-colour(go);
+  }
 
   @include vd-hover-when-supported {
-    &:hover { text-decoration: underline; }
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
-  &:active { text-decoration: underline;}
+  &:active {
+    text-decoration: underline;
+  }
 }
 
 .vd-link--secondary {
@@ -18,6 +24,8 @@
   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
+    &: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

@@ -53,4 +53,4 @@ $vd-i-bg-margin: vd-grid-unit(2);
   margin: auto;
   transform: translate(0, -50%);
   z-index: 0;
- }
+}

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

@@ -1,9 +1,25 @@
 @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); }
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  10%,
+  20% {
+    transform: scale3d(0.9, 0.9, 0.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.
@@ -27,7 +43,7 @@
     }
   }
 
-  .vd-lozenge-group-input  {
+  .vd-lozenge-group-input {
     @include vd-input-text();
     @include vd-input-box-model();
     background-color: transparent;
@@ -35,4 +51,3 @@
     flex-grow: 1;
   }
 }
-

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

@@ -12,7 +12,7 @@ $vd-multiselect-popover-input-icon-padding: vd-grid-unit(6);
     color: vd-colour(text);
   }
 
-  @include vd-input-error-selectors () {
+  @include vd-input-error-selectors() {
     .vd-multiselect-popover-input {
       @include vd-input-error-styles();
     }

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

@@ -0,0 +1,14 @@
+.vd-nav-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 25px;
+
+  &::before {
+    content: '';
+    display: block;
+    height: 1px;
+    width: 20px;
+    background-color: vd-colour(keyline);
+  }
+}

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

@@ -47,7 +47,7 @@
   margin-right: vd-grid-unit(6);
 }
 
-@include vd-viewport-media-max (xsmall) {
+@include vd-viewport-media-max(xsmall) {
   .vd-next-stepper-summary {
     flex-direction: column;
   }

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

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

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

@@ -4,5 +4,7 @@
   margin-top: 0;
   line-height: 1.5;
 
-  &:last-child { margin-bottom: 0; }
+  &:last-child {
+    margin-bottom: 0;
+  }
 }

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

@@ -116,7 +116,9 @@
   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) ~ & {
+  .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top
+    .vd-popover-actions:not(:empty)
+    ~ & {
     background-color: $vd-action-bar-background-colour;
   }
 

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

@@ -1,7 +1,9 @@
 $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) {
+@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;

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

@@ -139,8 +139,7 @@
 
 .vd-popover-list-separator {
   @extend .vd-hr;
-  margin: $vd-popover-list-spacing
-    ($vd-popover-list-spacing + $vd-popover-list-item-spacing);
+  margin: $vd-popover-list-spacing ($vd-popover-list-spacing + $vd-popover-list-item-spacing);
   width: inherit;
 }
 

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

@@ -2,7 +2,7 @@ $vd-promos-spacing: vd-grid-unit(3) !default;
 $vd-promo-image-container-min-height: 100px !default;
 
 // Promo Headline
-@mixin vd-promo-headline () {
+@mixin vd-promo-headline() {
   @include vd-heading-reset();
   @include vd-line-height(30, 24);
   @include font-smoothing;

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

@@ -1,4 +1,3 @@
-
 // Promo
 .vd-promo {
   display: flex;

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

@@ -1,7 +1,13 @@
 @keyframes vd-radio-checked {
-  0%  { transform: scale(0); }
-  33% { transform: scale(1.8); }
-  66% { transform: scale(1); }
+  0% {
+    transform: scale(0);
+  }
+  33% {
+    transform: scale(1.8);
+  }
+  66% {
+    transform: scale(1);
+  }
 }
 
 .vd-radio {
@@ -9,8 +15,12 @@
   position: relative;
   padding: 0 vd-grid-unit(1);
 
-  &:first-child { padding-left: 0 }
-  &:last-child  { padding-right: 0 }
+  &:first-child {
+    padding-left: 0;
+  }
+  &:last-child {
+    padding-right: 0;
+  }
 }
 
 .vd-radio-container {
@@ -20,7 +30,9 @@
   flex-direction: column;
   cursor: pointer;
 
-  &:last-child  { padding-bottom: 0 }
+  &:last-child {
+    padding-bottom: 0;
+  }
 }
 
 .vd-radio-input-container {
@@ -28,7 +40,9 @@
   align-items: center;
 }
 
-.vd-radio-label { padding-left: vd-grid-unit(3); }
+.vd-radio-label {
+  padding-left: vd-grid-unit(3);
+}
 
 .vd-radio-description {
   @include vd-text(supplementary);
@@ -40,7 +54,9 @@
   opacity: $vd-opacity;
 }
 
-.vd-radio-input { @extend %vd-invisible-checkbox-input; }
+.vd-radio-input {
+  @extend %vd-invisible-checkbox-input;
+}
 
 .vd-radio-tick {
   flex-shrink: 0;
@@ -85,7 +101,9 @@
   }
 }
 
-.vd-radio-input:hover + .vd-radio-tick:after { opacity: 1; }
+.vd-radio-input:hover + .vd-radio-tick:after {
+  opacity: 1;
+}
 
 // Checked
 .vd-radio-input:checked + .vd-radio-tick {
@@ -108,7 +126,9 @@
   cursor: not-allowed;
   filter: grayscale(100%);
 
-  &:hover + .vd-radio-tick:after { opacity: 0; }
+  &:hover + .vd-radio-tick:after {
+    opacity: 0;
+  }
   &:hover:checked + .vd-radio-tick:after {
     opacity: 1;
     background-color: vd-colour(box);

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

@@ -1,3 +1,4 @@
+// stylelint-disable selector-type-no-unknown
 :root {
   --vd-section-padding-h: #{$vd-section-padding-h};
   --vd-section-padding-v: #{$vd-section-padding-v};
@@ -17,7 +18,8 @@
   }
 }
 
-vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
+vd-section,
+.vd-section {
   display: block;
   position: relative;
   font-size: vd-text-size(body);
@@ -35,12 +37,13 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
   }
 
   // Nested sections
-  vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
+  vd-section,
+  .vd-section {
     padding: var(--vd-section-padding-v) 0;
   }
 
   // Fallback to base padding if browser doesn't support CSS variables
-  @supports ( not (--a: 0)) {
+  @supports (not (--a: 0)) {
     padding: $vd-section-padding-v $vd-section-padding-h;
 
     .vd-section-container {
@@ -48,25 +51,34 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
       padding: $vd-section-padding-v $vd-section-padding-h;
     }
 
-    vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
+    vd-section,
+    .vd-section {
       padding: $vd-section-padding-v 0;
     }
   }
 }
 
 .vd-section--secondary {
-  &, .vd-section-container { background-color: vd-colour(framing); }
+  &,
+  .vd-section-container {
+    background-color: vd-colour(framing);
+  }
 }
 
-.vd-section--tertiary  {
-  &, .vd-section-container { background-color: vd-colour(box); }
+.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; }
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .vd-section--fixed {
@@ -90,7 +102,10 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
 }
 
 .vd-section--action-bar {
-  &, .vd-section-container { background-color: vd-colour(framing); }
+  &,
+  .vd-section-container {
+    background-color: vd-colour(framing);
+  }
 
   .vd-section-wrap {
     min-height: $vd-section--action-bar-min-height;
@@ -98,7 +113,7 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
     justify-content: space-between;
     align-items: center;
 
-    @include vd-viewport-media-max ($vd-breakpoint-small) {
+    @include vd-viewport-media-max($vd-breakpoint-small) {
       flex-wrap: wrap;
     }
   }
@@ -107,7 +122,7 @@ vd-section, .vd-section { // stylelint-disable-line selector-type-no-unknown
 .vd-section--action-bar-about {
   padding-right: $vd-section--action-bar-spacing;
 
-  @include vd-viewport-media-max ($vd-breakpoint-small) {
+  @include vd-viewport-media-max($vd-breakpoint-small) {
     flex-basis: 100%;
     padding: 0 0 $vd-section--action-bar-spacing 0;
   }

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

@@ -78,5 +78,7 @@
   width: 100%;
   margin-left: vd-grid-unit(5);
 
-  &:first-of-type { margin-left: 0; }
+  &:first-of-type {
+    margin-left: 0;
+  }
 }

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

@@ -3,7 +3,8 @@
   align-items: center;
 
   // @todo remove vd-select-container when vd-select-input is deprecated
-  > .vd-select, .vd-select-container {
+  > .vd-select,
+  .vd-select-container {
     width: auto;
   }
 
@@ -13,7 +14,8 @@
     flex: 1;
   }
 
-  .vd-input, .vd-select {
+  .vd-input,
+  .vd-select {
     position: relative;
 
     &:focus {
@@ -21,7 +23,8 @@
     }
   }
 
-  .vd-input:not(:first-child), .vd-select:not(:first-child) {
+  .vd-input:not(:first-child),
+  .vd-select:not(:first-child) {
     @include remove-border-radius-left();
     margin-left: -$vd-input-border-width;
   }
@@ -34,12 +37,15 @@
     }
   }
 
-  .vd-input:not(:last-child), .vd-select:not(:last-child),
+  .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-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

@@ -2,7 +2,8 @@
   display: inline-block;
   position: relative;
 
-  &::before, &::after {
+  &::before,
+  &::after {
     display: none;
   }
 

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

@@ -22,5 +22,5 @@
   @include vd-select-carets;
 }
 
-@import "vd-select-group";
-@import "vd-select-inline";
+@import 'vd-select-group';
+@import 'vd-select-inline';

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

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

package/src/vend.ui/components/vd-sidebar/tmp-overrides.scss

@@ -0,0 +1,95 @@
+/**
+  Temporary overrides for feature flag `sidebar_new`.
+
+  Those overrides bring back the old sidebar styles unless
+  the class `vd-sidebar--new` is set.
+
+  @REMOVEME: When flag `sidebar_new` is fully rolled out
+*/
+.vd-sidebar:not(.vd-sidebar--new) {
+  .vd-sidebar-tabs {
+    width: 85px;
+    font-size: 12px;
+
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .vd-nav-item {
+      width: 100%;
+      height: 75px;
+    }
+
+    .vd-nav-item--active {
+      &::before {
+        content: none;
+      }
+    }
+
+    .vd-nav-item-action {
+      flex-direction: column;
+      justify-content: center;
+      position: relative;
+    }
+
+    .vd-nav-item-icon {
+      width: auto;
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .vd-nav-item-label {
+      font-size: 12px;
+      font-weight: $vd-font-weight--bold;
+    }
+
+    .vd-nav-divider,
+    .vd-sidebar-expander,
+    .vd-nav-item-icon--new {
+      display: none;
+    }
+  }
+
+  .vd-sidebar-drawer {
+    width: 155px;
+
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .vd-nav-item {
+      font-weight: $vd-font-weight--bold;
+    }
+
+    .vd-nav-item--active {
+      &::before {
+        content: none;
+      }
+    }
+
+    .vd-nav-item-action {
+      padding: 20px 10px;
+    }
+
+    .vd-nav-item-label {
+      font-size: 14px;
+    }
+  }
+}
+
+.nv-topnav-container:not(.vd-sidebar--new) {
+  .vd-logo {
+    padding-left: 34px;
+  }
+}
+
+.vd-sidebar.vd-sidebar--new {
+  .vd-sidebar-tabs {
+    .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
+      display: none;
+    }
+  }
+
+  .vd-sidebar-expander,
+  .vd-nav-item-icon--new {
+    display: block !important;
+  }
+}

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

@@ -0,0 +1,23 @@
+$vd-sidebar-base-z-index: $vd-z-index-navigation-base;
+$vd-sidebar-modal-z-index: $vd-modals-z-index + 1;
+$vd-sidebar-modal-close-base-offset: 10px;
+$vd-sidebar-modal-close-right-offset: -($vd-dialog-close-width + $vd-sidebar-modal-close-base-offset);
+
+$vd-sidebar-content-box-shadow-offset-x: 1px;
+$vd-sidebar-tabs-mobile-width: 85px;
+$vd-sidebar-drawer-mobile-width: 145px;
+
+$vd-sidebar-width: 240px;
+
+@mixin vd-sidebar-active-indicator() {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 4px;
+    background-color: vd-colour(go);
+  }
+}