@lightspeed/design-system-css 1.1.2 → 1.3.0

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

@@ -1,11 +1,10 @@
-
 // =================================== Helper Mixins =================================== //
 
 // Helper to apply disabled state styles for buttons.
 //
 // @mixin vd-btn-disabled
 //
-@mixin vd-btn-disabled () {
+@mixin vd-btn-disabled() {
   &:disabled,
   &.disabled {
     cursor: not-allowed;
@@ -20,8 +19,9 @@
 //
 // @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);
+@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.
@@ -30,13 +30,12 @@
 //
 // @param {String} $_vd-colour-name - the button colour to use for the outline.
 //
-@mixin vd-btn-outline-shadow ($_vd-colour-name) {
+@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);
+  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.
@@ -45,7 +44,7 @@
 //
 // @param {String} $_vd-colour-name - the button colour.
 //
-@mixin vd-btn-states ($_vd-colour-name, $_vd-use-default-hover: false) {
+@mixin vd-btn-states($_vd-colour-name, $_vd-use-default-hover: false) {
   @include vd-hover-when-supported {
     &:hover {
       color: vd-colour(text-action);
@@ -57,13 +56,14 @@
     }
   }
 
-  &:active, &.vd-btn--active {
+  &: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  {
+  &:focus {
     @include vd-btn-outline-shadow($_vd-colour-name);
   }
 }
@@ -76,7 +76,7 @@
 //
 // @param {String} $_vd-colour-name - the button colour.
 //
-@mixin vd-btn ($_vd-colour-name) {
+@mixin vd-btn($_vd-colour-name) {
   background-color: vd-colour($_vd-colour-name);
   color: vd-colour(text-action);
 
@@ -92,7 +92,7 @@
 //
 // @param {String} $_vd-colour-name - the button colour to use.
 //
-@mixin vd-btn-text ($_vd-colour-name) {
+@mixin vd-btn-text($_vd-colour-name) {
   background-color: transparent;
   color: vd-colour($_vd-colour-name);
 
@@ -106,7 +106,7 @@
 //
 // @param {String} $_vd-colour-name - the button colour to use.
 //
-@mixin vd-btn-icon ($_vd-colour-name) {
+@mixin vd-btn-icon($_vd-colour-name) {
   background-color: transparent;
   padding: $vd-btn-icon-padding;
 

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

@@ -28,12 +28,12 @@
 
   @include vd-btn-disabled();
 
-  &:focus  {
+  &:focus {
     border-color: vd-colour(go);
     @include vd-btn-shadow(go);
   }
 
-  &:hover  {
+  &:hover {
     border-color: vd-colour(go-lighter);
     @include vd-btn-shadow(go);
   }
@@ -48,7 +48,8 @@
 .vd-btn-panel--selected {
   border-color: vd-colour(do);
 
-  &:focus, &:hover  {
+  &:focus,
+  &:hover {
     border-color: vd-colour(do-lighter);
     @include vd-btn-shadow(do);
   }

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

@@ -59,7 +59,8 @@ a.vd-btn {
   text-align: left;
   text-decoration: underline;
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     color: vd-colour(go);
   }
 }
@@ -101,12 +102,13 @@ a.vd-btn {
 /* When buttons are disabled they don't trigger onMouseOver / onMouseOut events but the event will bubble
   up from child elements. `vd-btn-hover-assist` occupies all of the space within the button so mouse events are
   consistently triggered. */
-  .vd-btn, .vd-tab-button {
-    &:disabled:hover > .vd-btn-hover-assist {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
+.vd-btn,
+.vd-tab-button {
+  &:disabled:hover > .vd-btn-hover-assist {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
   }
+}

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

@@ -1,4 +1,5 @@
-vd-carousel { // stylelint-disable-line selector-type-no-unknown
+// stylelint-disable selector-type-no-unknown
+vd-carousel {
   display: flex;
   flex-direction: column;
 }
@@ -36,7 +37,7 @@ vd-carousel { // stylelint-disable-line selector-type-no-unknown
   }
 }
 
-vd-carousel-frame { // stylelint-disable-line selector-type-no-unknown
+vd-carousel-frame {
   display: flex;
   flex: 1 0 100%;
   order: 2;

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