@lightspeed/design-system-css 1.2.0 → 2.0.0

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

@@ -1,7 +1,16 @@
 @keyframes vd-checkbox-checked {
-  0%  { height: 0; width: 0; }
-  25% { height: 0; width: $vd-checkbox-tick-width; }
-  50% { height: $vd-checkbox-tick-height; width: $vd-checkbox-tick-width; }
+  0% {
+    height: 0;
+    width: 0;
+  }
+  25% {
+    height: 0;
+    width: $vd-checkbox-tick-width;
+  }
+  50% {
+    height: $vd-checkbox-tick-height;
+    width: $vd-checkbox-tick-width;
+  }
 }
 
 /* label-only-checkbox is for when only the checkbox and label should respond to onlick. Not the description aswell. */
@@ -11,8 +20,12 @@
   position: relative;
   margin: 0 vd-grid-unit(2);
 
-  &:first-child { margin-left: 0 }
-  &:last-child  { margin-right: 0 }
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
 }
 
 .vd-label-only-checkbox {
@@ -26,10 +39,12 @@
   flex-direction: column;
   cursor: pointer;
 
-  &:last-child  { margin-bottom: 0 }
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
-.vd-label-only-checkbox-container{
+.vd-label-only-checkbox-container {
   display: flex;
 }
 
@@ -46,9 +61,11 @@
   cursor: pointer;
 }
 
-.vd-checkbox-label { margin-left: $vd-checkbox-spacing; }
+.vd-checkbox-label {
+  margin-left: $vd-checkbox-spacing;
+}
 
-.vd-label-only-checkbox-label { 
+.vd-label-only-checkbox-label {
   margin: auto 0 auto $vd-checkbox-spacing;
 }
 
@@ -58,7 +75,9 @@
   margin-left: $vd-checkbox-length + $vd-checkbox-spacing;
 }
 
-.vd-checkbox-input { @extend %vd-invisible-checkbox-input; }
+.vd-checkbox-input {
+  @extend %vd-invisible-checkbox-input;
+}
 
 .vd-checkbox-tick {
   flex-shrink: 0;
@@ -91,7 +110,7 @@
 
 .vd-checkbox-input:hover + .vd-checkbox-tick:after {
   opacity: 1;
- }
+}
 
 // Checked
 .vd-checkbox-input:checked + .vd-checkbox-tick {
@@ -114,7 +133,9 @@
   cursor: not-allowed;
   filter: grayscale(100%);
 
-  &:hover:not(:checked) + .vd-checkbox-tick:after { opacity: 0; }
+  &:hover:not(:checked) + .vd-checkbox-tick:after {
+    opacity: 0;
+  }
 
   ~ .vd-checkbox-label {
     opacity: $vd-opacity;

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

@@ -40,7 +40,7 @@ $vd-datepicker-time-input-border-radius: 0 $vd-border-radius $vd-border-radius 0
 
 // Mixins
 @mixin next-prev-arrow-common {
-  content: " ";
+  content: ' ';
   visibility: visible;
   position: absolute;
   width: $vd-datepicker-next-prev-button-icon-size;
@@ -63,7 +63,7 @@ $vd-datepicker-time-input-border-radius: 0 $vd-border-radius $vd-border-radius 0
 
 @mixin vd-datepicker-select-arrow-common {
   position: absolute;
-  content: " ";
+  content: ' ';
   pointer-events: none;
   visibility: visible;
   width: 0;

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

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 .vd-datepicker-ui {
   display: block;
@@ -77,7 +77,7 @@
   }
 
   .vd-datepicker-ui {
-     margin-top: 22px;
+    margin-top: 22px;
   }
 }
 
@@ -96,7 +96,15 @@
   @include vd-reset;
   font-size: $vd-datepicker-font-size;
 
-  table, caption, tbody, tfoot, thead, tr, th, td, abbr {
+  table,
+  caption,
+  tbody,
+  tfoot,
+  thead,
+  tr,
+  th,
+  td,
+  abbr {
     margin: initial;
     padding: initial;
     border: initial;
@@ -112,7 +120,7 @@
     margin-top: $vd-datepicker-table-spacing * 2;
 
     tbody:before {
-      content: " ";
+      content: ' ';
       display: block;
       margin-top: $vd-datepicker-table-spacing;
     }
@@ -311,14 +319,16 @@
 }
 
 .vd-datepicker-range-no-end {
-  .is-startrange, .is-endrange {
+  .is-startrange,
+  .is-endrange {
     .pika-button {
       border: none;
     }
   }
 
   .vd-datepicker-end-picker {
-    .is-startrange, .is-endrange {
+    .is-startrange,
+    .is-endrange {
       .pika-button {
         background: $vd-datepicker-range-colour;
         color: vd-colour(text);

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

@@ -7,4 +7,6 @@ $vd-dialog-header-divider-width: 40px;
 $vd-dialog-container-min-height: 170px;
 $vd-dialog-container-focus-colour: vd-colour(go);
 $vd-dialog-container-top-offset: vd-grid-unit(15);
-$vd-dialog-container-sizes: ((small 480px) (medium 600px) (standard 720px) (large 800px) (xlarge 1100px));
+$vd-dialog-container-sizes: (
+  (small 480px) (medium 600px) (standard 720px) (large 800px) (xlarge 1100px)
+);

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

@@ -2,13 +2,13 @@
   --vd-dialog-spacing: #{$vd-section-padding-h-med};
 }
 
-@include vd-viewport-media-max (small) {
+@include vd-viewport-media-max(small) {
   :root {
     --vd-dialog-spacing: #{$vd-section-padding-h-sml};
   }
 }
 
-@include vd-viewport-media-max (xsmall) {
+@include vd-viewport-media-max(xsmall) {
   :root {
     --vd-dialog-spacing: #{vd-grid-unit(4)};
   }
@@ -27,13 +27,13 @@
   display: flex;
   align-items: center;
 
-  @include vd-viewport-media-max (small) {
+  @include vd-viewport-media-max(small) {
     left: vd-grid-unit(1);
     right: vd-grid-unit(1);
     align-items: flex-start;
   }
 
-  @include vd-viewport-media-max (xsmall) {
+  @include vd-viewport-media-max(xsmall) {
     left: vd-grid-unit(0);
     right: vd-grid-unit(0);
   }
@@ -51,7 +51,7 @@
       padding: $vd-section-padding-v-med var(--vd-dialog-spacing);
     }
 
-    @include vd-viewport-media-max (xsmall) {
+    @include vd-viewport-media-max(xsmall) {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       flex: 0 1 auto;
@@ -84,13 +84,13 @@
     outline: none;
   }
 
-  @include vd-viewport-media-max (small) {
+  @include vd-viewport-media-max(small) {
     max-width: none;
     width: 100%;
     margin-top: $vd-dialog-container-top-offset;
   }
 
-  @include vd-viewport-media-max (xsmall) {
+  @include vd-viewport-media-max(xsmall) {
     max-height: none;
     height: calc(100% - #{$vd-dialog-container-top-offset});
 
@@ -121,7 +121,7 @@
 .vd-dialog-header--center {
   text-align: center;
 
-  @include vd-viewport-media-max (xsmall) {
+  @include vd-viewport-media-max(xsmall) {
     text-align: left;
   }
 }
@@ -130,7 +130,7 @@
   font-size: vd-text-size(sub-heading);
   padding-left: $vd-dialog-header-sub-padding;
 
-  @include vd-viewport-media-max (xsmall) {
+  @include vd-viewport-media-max(xsmall) {
     display: block;
     padding-left: 0;
     padding-top: $vd-dialog-header-sub-padding;
@@ -170,7 +170,7 @@
     }
   }
 
-  @include vd-viewport-media-max (xsmall) {
+  @include vd-viewport-media-max(xsmall) {
     -webkit-overflow-scrolling: touch;
   }
 }
@@ -185,13 +185,13 @@
     margin-top: var(--vd-dialog-spacing);
   }
 
-  @include vd-viewport-media-max (xsmall) {
+  @include vd-viewport-media-max(xsmall) {
     text-align: center;
   }
 }
 
 // Fallback to base padding if browser doesn't support CSS variables
-@supports ( not (--a: 0)) {
+@supports (not (--a: 0)) {
   .vd-dialog .vd-dialog-banner {
     margin: -(#{$vd-section-padding-h-med});
     margin-bottom: $vd-section-padding-h-med;
@@ -210,7 +210,7 @@
   }
 
   .vd-dialog-content {
-    margin: 0 -(#{$vd-section-padding-h-med});
+    margin: 0 - (#{$vd-section-padding-h-med});
     padding: 0 $vd-section-padding-h-med;
 
     + .vd-dialog-actions {

package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss

@@ -60,7 +60,7 @@
     }
   }
 
-  @include vd-viewport-media-max ($vd-breakpoint-small) {
+  @include vd-viewport-media-max($vd-breakpoint-small) {
     top: -($vd-dialog-close-width + ($vd-dialog-close-button-anchor-padding * 0.5));
     right: $vd-dialog-close-button-anchor-padding * 0.5;
   }
@@ -71,7 +71,7 @@
   top: 10px;
   left: -$vd-dialog-close-width - 10px;
 
-  @include vd-viewport-media-max ($vd-breakpoint-small) {
+  @include vd-viewport-media-max($vd-breakpoint-small) {
     top: 0;
     right: 0;
     left: inherit;

package/src/vend.ui/components/vd-dialog-drawer/vd-dialog-drawer.scss

@@ -2,7 +2,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  bottom:0;
+  bottom: 0;
   box-sizing: border-box;
   width: $vd-dialog-drawer-width;
   background: vd-colour(box);

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

@@ -1,10 +1,12 @@
-@use "sass:math";
+// stylelint-disable selector-type-no-unknown
+@use 'sass:math';
 
 $vd-dott-diameter: 32px;
 $vd-dott-aperture-diameter: 12px;
 $vd-dot-border-width: 2px;
 
-vd-dott, .vd-dott { // stylelint-disable-line selector-type-no-unknown
+vd-dott,
+.vd-dott {
   display: inline-block;
   width: $vd-dott-diameter;
   height: $vd-dott-diameter;
@@ -34,8 +36,7 @@ vd-dott, .vd-dott { // stylelint-disable-line selector-type-no-unknown
   border-top: $vd-dot-border-width solid vd-colour(go);
   border-bottom: $vd-dot-border-width solid vd-colour(success);
   // Second bg-image value, in conjunction with the background-position, ensures the right side border displays correctly
-  background-image:
-    linear-gradient(vd-colour(go), vd-colour(success)),
+  background-image: linear-gradient(vd-colour(go), vd-colour(success)),
     linear-gradient(vd-colour(go), vd-colour(success));
   background-size: $vd-dot-border-width 100%;
   background-position: 0 0, 100% 0;

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

@@ -7,7 +7,7 @@
 }
 
 .vd-dropdown-input-container {
-  @include vd-input-error-selectors () {
+  @include vd-input-error-selectors() {
     .vd-dropdown-input {
       @include vd-input-error-styles();
     }

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

@@ -13,7 +13,6 @@
   &:visited {
     color: vd-colour(supplementary--text) !important;
   }
-
 }
 
 .vd-flag-chevron {
@@ -40,7 +39,7 @@
     color: vd-colour(text-action) !important;
   }
 
-  .vd-flag-chevron{
+  .vd-flag-chevron {
     opacity: 1;
   }
 }

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

@@ -3,19 +3,45 @@
   flex: 1;
 }
 
-.vd-flex--row             { flex-direction: row; }
-.vd-flex--column          { flex-direction: column; }
+.vd-flex--row {
+  flex-direction: row;
+}
+.vd-flex--column {
+  flex-direction: column;
+}
 
-.vd-flex--no-shrink       { flex-shrink: 0; }
+.vd-flex--no-shrink {
+  flex-shrink: 0;
+}
 
-.vd-flex--justify-start   { justify-content: flex-start; }
-.vd-flex--justify-end     { justify-content: flex-end; }
-.vd-flex--justify-between { justify-content: space-between; }
-.vd-flex--justify-around  { justify-content: space-around; }
-.vd-flex--justify-center  { justify-content: center; }
+.vd-flex--justify-start {
+  justify-content: flex-start;
+}
+.vd-flex--justify-end {
+  justify-content: flex-end;
+}
+.vd-flex--justify-between {
+  justify-content: space-between;
+}
+.vd-flex--justify-around {
+  justify-content: space-around;
+}
+.vd-flex--justify-center {
+  justify-content: center;
+}
 
-.vd-flex--align-start     { align-items: flex-start; }
-.vd-flex--align-end       { align-items: flex-end; }
-.vd-flex--align-baseline  { align-items: baseline; }
-.vd-flex--align-center    { align-items: center; }
-.vd-flex--align-stretch   { align-items: stretch; }
+.vd-flex--align-start {
+  align-items: flex-start;
+}
+.vd-flex--align-end {
+  align-items: flex-end;
+}
+.vd-flex--align-baseline {
+  align-items: baseline;
+}
+.vd-flex--align-center {
+  align-items: center;
+}
+.vd-flex--align-stretch {
+  align-items: stretch;
+}

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

@@ -13,13 +13,13 @@ $vd-hero-aux-hr-width: 80px !default;
 $vd-hero-aux-width: 33.33333% !default;
 
 // Hero Auxiliary Headline
-@mixin vd-text-hero-aux-headline () {
+@mixin vd-text-hero-aux-headline() {
   @include vd-text(intro);
   font-weight: $vd-font-weight--bold;
 }
 
 // Hero Headline
-@mixin vd-text-hero-headline () {
+@mixin vd-text-hero-headline() {
   @include vd-heading-reset();
   @include vd-line-height(42, 35);
   @include font-smoothing;

package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss

@@ -11,7 +11,6 @@
 }
 
 .vd-in-page-help-content {
-
   @include vd-viewport-media-min(medium) {
     display: flex;
     flex-flow: row wrap;
@@ -19,7 +18,6 @@
 }
 
 .vd-in-page-help-content-item {
-
   @include vd-viewport-media-min(medium) {
     flex: 1;
   }

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-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;
+  }
 }