@lightspeed/design-system-css 1.2.0 → 2.0.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

@@ -42,7 +42,9 @@
       font-weight: $vd-font-weight--bold;
     }
 
-    .vd-nav-divider, .vd-sidebar-expander, .vd-nav-item-icon--new {
+    .vd-nav-divider,
+    .vd-sidebar-expander,
+    .vd-nav-item-icon--new {
       display: none;
     }
   }
@@ -86,7 +88,8 @@
     }
   }
 
-  .vd-sidebar-expander, .vd-nav-item-icon--new {
+  .vd-sidebar-expander,
+  .vd-nav-item-icon--new {
     display: block !important;
   }
 }

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

@@ -88,9 +88,7 @@
     position: absolute;
     left: 0;
     height: 100%;
-    transform: translateX(
-      calc(-100% - #{$vd-sidebar-content-box-shadow-offset-x})
-    );
+    transform: translateX(calc(-100% - #{$vd-sidebar-content-box-shadow-offset-x}));
   }
 
   .nv-display-sidenav-modal {
@@ -118,8 +116,7 @@
       }
 
       .vd-sidebar-modal-close {
-        right: $vd-sidebar-modal-close-right-offset -
-          $vd-sidebar-drawer-desktop-width;
+        right: $vd-sidebar-modal-close-right-offset - $vd-sidebar-drawer-desktop-width;
       }
     }
   }

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

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 $vd-sidebar-tabs-animation-duration: 200ms;
 
@@ -11,7 +11,10 @@ $vd-sidebar-tab-height: 44px !default;
 $vd-sidebar-tab-font-colour: vd-colour(text) !default;
 $vd-sidebar-tab-font-size: 15px !default;
 $vd-sidebar-tab-icon-font-size: 20px !default;
-$vd-sidebar-tab-padding-x: math.div($vd-sidebar-tabs-desktop-width - $vd-sidebar-tab-icon-font-size, 2);
+$vd-sidebar-tab-padding-x: math.div(
+  $vd-sidebar-tabs-desktop-width - $vd-sidebar-tab-icon-font-size,
+  2
+);
 
 $vd-sidebar-tab-active-bg-colour: vd-colour(text) !default;
 $vd-sidebar-tab-active-border-width: 6px !default;

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

@@ -1,5 +1,5 @@
-@import "../vd-popover/vd-popover-ns";
-@import "../vd-popover-list/vd-popover-list-ns";
+@import '../vd-popover/vd-popover-ns';
+@import '../vd-popover-list/vd-popover-list-ns';
 
 $vd-suggestion-list-footer-height: 60px;
 $vd-suggestion-list-footer-shadow-height: 5px;

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

@@ -1,4 +1,6 @@
-table { border-collapse: collapse; }
+table {
+  border-collapse: collapse;
+}
 
 .vd-table {
   width: 100%;
@@ -13,7 +15,9 @@ table { border-collapse: collapse; }
       padding: vd-grid-unit(4) vd-grid-unit(10) vd-grid-unit(4);
     }
 
-    tr { border-color: vd-colour(keyline); }
+    tr {
+      border-color: vd-colour(keyline);
+    }
   }
 
   tr {
@@ -30,7 +34,9 @@ table { border-collapse: collapse; }
 
     // Can be used for row's which display loading spinners, or 'no results' type content.
     @include vd-hover-when-supported {
-      &.vd-inactive:hover { background-color: inherit; }
+      &.vd-inactive:hover {
+        background-color: inherit;
+      }
     }
 
     &.vd-error {
@@ -38,37 +44,63 @@ table { border-collapse: collapse; }
       background-color: $vd-colour-table-tr-error-background;
     }
 
-    &.vd-no-border-b { border-bottom: none; }
-    &.vd-no-border-t { border-top: none; }
-    &.vd-no-border-l { border-left: none; }
-    &.vd-no-border-r { border-right: none; }
+    &.vd-no-border-b {
+      border-bottom: none;
+    }
+    &.vd-no-border-t {
+      border-top: none;
+    }
+    &.vd-no-border-l {
+      border-left: none;
+    }
+    &.vd-no-border-r {
+      border-right: none;
+    }
 
-    &.vd-border-t { border-top: vd-border(framing); }
-    &.vd-border-b { border-bottom: vd-border(framing); }
+    &.vd-border-t {
+      border-top: vd-border(framing);
+    }
+    &.vd-border-b {
+      border-bottom: vd-border(framing);
+    }
 
     &.vd-med-pad-t,
     &.vd-med-pad-v {
-      td { padding-top: vd-grid-unit(2); }
+      td {
+        padding-top: vd-grid-unit(2);
+      }
     }
 
     &.vd-med-pad-b,
     &.vd-med-pad-v {
-      td { padding-bottom: vd-grid-unit(2); }
+      td {
+        padding-bottom: vd-grid-unit(2);
+      }
     }
 
     &.vd-sml-pad-t,
     &.vd-sml-pad-v {
-      td { padding-top: vd-grid-unit(1); }
+      td {
+        padding-top: vd-grid-unit(1);
+      }
     }
 
     &.vd-sml-pad-b,
     &.vd-sml-pad-v {
-      td { padding-bottom: vd-grid-unit(1); }
+      td {
+        padding-bottom: vd-grid-unit(1);
+      }
     }
 
-    &.vd-valign-t td { vertical-align: top; }
-    &.vd-valign-m td { vertical-align: middle; }
-    &.vd-valign-b td { vertical-align: bottom; }
+    &.vd-valign-t td {
+      vertical-align: top;
+    }
+    &.vd-valign-m td {
+      vertical-align: middle;
+    }
+    &.vd-valign-b td {
+      vertical-align: bottom;
+    }
 
     &.vd-expandable {
       @include vd-hover-when-supported {
@@ -96,14 +128,21 @@ table { border-collapse: collapse; }
         }
       }
 
-      & + tr:not(.vd-expandable) { display: none; }
-      &.vd-expandable--expanded + tr { display: table-row; }
+      & + tr:not(.vd-expandable) {
+        display: none;
+      }
+      &.vd-expandable--expanded + tr {
+        display: table-row;
+      }
     }
   }
 
-  td { vertical-align: middle; }
+  td {
+    vertical-align: middle;
+  }
 
-  td, th {
+  td,
+  th {
     padding: vd-grid-unit(5) vd-grid-unit(10);
     position: relative;
     white-space: normal;
@@ -116,28 +155,55 @@ table { border-collapse: collapse; }
 
     &.vd-truncate {
       // Star selector is required for truncating text inside a cell wrapped in another tag: a, strong, span, etc...
-      &, * {
+      &,
+      * {
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
       }
     }
 
-    &.vd-sml-pad-h, &.vd-sml-pad-l { padding-left: vd-grid-unit(2); }
-    &.vd-sml-pad-h, &.vd-sml-pad-r { padding-right: vd-grid-unit(2); }
-    &.vd-no-pad-h,  &.vd-no-pad-l  { padding-left: 0; }
-    &.vd-no-pad-h,  &.vd-no-pad-r  { padding-right: 0; }
-    &.vd-no-pad-v,  &.vd-no-pad-b  { padding-bottom: 0; }
-    &.vd-no-pad-v,  &.vd-no-pad-t  { padding-top: 0; }
+    &.vd-sml-pad-h,
+    &.vd-sml-pad-l {
+      padding-left: vd-grid-unit(2);
+    }
+    &.vd-sml-pad-h,
+    &.vd-sml-pad-r {
+      padding-right: vd-grid-unit(2);
+    }
+    &.vd-no-pad-h,
+    &.vd-no-pad-l {
+      padding-left: 0;
+    }
+    &.vd-no-pad-h,
+    &.vd-no-pad-r {
+      padding-right: 0;
+    }
+    &.vd-no-pad-v,
+    &.vd-no-pad-b {
+      padding-bottom: 0;
+    }
+    &.vd-no-pad-v,
+    &.vd-no-pad-t {
+      padding-top: 0;
+    }
 
-    &.vd-valign-t { vertical-align: top; }
-    &.vd-valign-m { vertical-align: middle; }
-    &.vd-valign-b { vertical-align: bottom; }
+    &.vd-valign-t {
+      vertical-align: top;
+    }
+    &.vd-valign-m {
+      vertical-align: middle;
+    }
+    &.vd-valign-b {
+      vertical-align: bottom;
+    }
   }
 
   &.vd-table--data {
     border: vd-border(framing);
-    tr { background-color: vd-colour(box); }
+    tr {
+      background-color: vd-colour(box);
+    }
   }
 }
 
@@ -145,7 +211,9 @@ table { border-collapse: collapse; }
 // Note: Compact tables are deprecated
 .vd-table--compact {
   thead {
-    th { padding: vd-grid-unit(4) vd-grid-unit(2); }
+    th {
+      padding: vd-grid-unit(4) vd-grid-unit(2);
+    }
   }
 
   td {
@@ -238,7 +306,8 @@ table { border-collapse: collapse; }
 
   &.vd-table--report--nested--indented {
     > tbody > tr > td:first-child {
-      padding-left: (vd-grid-unit(4) - $vd-nested-reporting-table-container-offset) + $vd-nested-reporting-table-indent-padding;
+      padding-left: (vd-grid-unit(4) - $vd-nested-reporting-table-container-offset) +
+        $vd-nested-reporting-table-indent-padding;
     }
   }
 }

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

@@ -24,10 +24,9 @@
 
   @include vd-hover-when-supported {
     &:hover:not(.vd-tab--disabled) .vd-tab-button {
-      @include vd-active-tab()
+      @include vd-active-tab();
     }
 
-
     &:hover:not(.vd-tab--active) .vd-tab-button {
       cursor: pointer;
     }

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

@@ -1,12 +1,20 @@
-.vd-text--secondary { color: vd-colour(supplementary--text); }
-.vd-text--success   { color: vd-colour(do); }
-.vd-text--negative  { color: vd-colour(no); }
-.vd-text--disabled  {
+.vd-text--secondary {
+  color: vd-colour(supplementary--text);
+}
+.vd-text--success {
+  color: vd-colour(do);
+}
+.vd-text--negative {
+  color: vd-colour(no);
+}
+.vd-text--disabled {
   color: vd-colour(text);
   opacity: 0.35;
 }
 
-.vd-text--sub { font-size: vd-text-size(supplementary); }
+.vd-text--sub {
+  font-size: vd-text-size(supplementary);
+}
 
 .vd-text--intro {
   @include vd-text-intro;

package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss

@@ -30,7 +30,8 @@
   width: calc(100% - #{$vd-toast-notification-offset});
   max-width: vd-grid-unit(170);
   margin: 0 auto;
-  padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-r $vd-toast-notification-padding-v $vd-toast-notification-padding-l;
+  padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-r
+    $vd-toast-notification-padding-v $vd-toast-notification-padding-l;
 
   border-radius: $vd-border-radius;
   box-sizing: border-box;

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

@@ -6,10 +6,16 @@
   #{$selector} {
     display: block !important;
   }
-  table#{$selector}  { display: table !important; }
-  tr#{$selector}     { display: table-row !important; }
+  table#{$selector} {
+    display: table !important;
+  }
+  tr#{$selector} {
+    display: table-row !important;
+  }
   th#{$selector},
-  td#{$selector}     { display: table-cell !important; }
+  td#{$selector} {
+    display: table-cell !important;
+  }
 }
 
 @mixin responsive-invisibility($selector) {