@lightspeed/design-system-css 34.0.2 → 35.0.0

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

@@ -13,7 +13,6 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-
   font-family: $vd-font-lato;
   text-align: center;
   padding: $vd-hero-paddding-vertical $vd-hero-padding-horizontal;
@@ -42,12 +41,14 @@
 
 .vd-hero-headline {
   @include vd-text-hero-headline;
+
   max-width: $vd-hero-headline-max-width;
   margin-bottom: $vd-hero-items-margin-vertical;
 }
 
 .vd-hero-intro {
   @include vd-text-intro;
+
   margin: 0;
 }
 
@@ -61,12 +62,9 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-
   padding: vd-grid-unit(5);
   box-sizing: border-box;
-
   background-color: hs-color(bg-neutral-inverted-top);
-
   font-family: $vd-font-lato;
   color: hs-color(fg-neutral-inverted-default);
   text-align: center;
@@ -83,6 +81,7 @@
 
 .vd-hero-aux-headline {
   @include vd-text-hero-aux-headline;
+
   margin-left: auto;
   margin-right: auto;
   max-width: $vd-hero-aux-headline-max-width;
@@ -90,12 +89,10 @@
 
 .vd-hero-aux-hr {
   margin: $vd-hero-aux-content-margin auto;
-
-  border-top: 1px solid currentColor;
+  border-top: 1px solid currentcolor;
   border-right: none;
   border-bottom: none;
   border-left: none;
-
   width: $vd-hero-aux-hr-width;
 }
 

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

@@ -37,7 +37,7 @@ $vd-textarea-line-height: vd-px-unit(
   }
 
   &:disabled {
-    @include disabled();
+    @include disabled;
   }
 
   @include vd-viewport-media-max(xsmall) {
@@ -59,12 +59,11 @@ $vd-textarea-line-height: vd-px-unit(
   background-color: hs-color(bg-neutral-top);
   border: $vd-input-border-width solid hs-color(border-neutral-soft);
   border-radius: $vd-border-radius;
-
   transition-duration: $vd-time-s;
   transition-property: border-color, box-shadow;
 
-  @include vd-input-focus();
-  @include vd-input-error();
+  @include vd-input-focus;
+  @include vd-input-error;
 }
 
 @mixin vd-input-focus() {
@@ -76,8 +75,8 @@ $vd-textarea-line-height: vd-px-unit(
 }
 
 @mixin vd-input-error() {
-  @include vd-input-error-selectors() {
-    @include vd-input-error-styles();
+  @include vd-input-error-selectors {
+    @include vd-input-error-styles;
   }
 }
 
@@ -102,7 +101,8 @@ $vd-textarea-line-height: vd-px-unit(
 
 @mixin vd-input {
   cursor: text;
-  @include vd-input-text();
-  @include vd-input-box-model();
-  @include vd-input-states();
+
+  @include vd-input-text;
+  @include vd-input-box-model;
+  @include vd-input-states;
 }

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

@@ -16,6 +16,7 @@
 .vd-input--icon-left {
   padding-left: $vd-input-icon-padding;
 }
+
 .vd-input--icon-right {
   padding-right: $vd-input-icon-padding;
 }
@@ -30,6 +31,7 @@
 .vd-input-icon--left {
   left: $vd-input-icon-position-h;
 }
+
 .vd-input-icon--right {
   right: $vd-input-icon-position-h;
 }
@@ -41,6 +43,7 @@
 .vd-input--text-align-left {
   text-align: left;
 }
+
 .vd-input-symbol {
   line-height: 1;
 }

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

@@ -1,11 +1,11 @@
 @import './vd-link-mixins';
 
 .vd-link {
-  @include vd-link();
+  @include vd-link;
 }
 
 .vd-link--secondary {
-  color: currentColor !important; // required important to override a tag styles set in vd-table
+  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 {

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

@@ -12,6 +12,7 @@ $vd-i-bg-margin: vd-grid-unit(2);
   border-radius: 50%;
   border: $vd-loader-border solid hs-color(fg-go-default);
   border-left-color: transparent;
+
   @include vd-slow-rotate;
 
   &.vd-loader--small {
@@ -20,9 +21,9 @@ $vd-i-bg-margin: vd-grid-unit(2);
   }
 
   .vd-btn & {
-    border-top-color: currentColor;
-    border-right-color: currentColor;
-    border-bottom-color: currentColor;
+    border-top-color: currentcolor;
+    border-right-color: currentcolor;
+    border-bottom-color: currentcolor;
   }
 }
 

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

@@ -25,12 +25,12 @@
 
 .vd-lozenge--interactive {
   color: hs-color(fg-neutral-ondark-default);
-
   background-color: hs-color(bg-supplementary-default);
 }
 
 .vd-lozenge--disabled {
   @include disabled;
+
   pointer-events: none;
 }
 

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

@@ -1,23 +1,27 @@
 @keyframes vd-lozenge-group-already-added {
-  from {
+  0% {
     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 {
+
+  100% {
     transform: scale3d(1, 1, 1);
   }
 }
@@ -29,7 +33,7 @@
   align-items: center;
   cursor: text;
 
-  @include vd-input-states();
+  @include vd-input-states;
 
   &:focus-within {
     border-color: hs-color(border-go-default);
@@ -49,8 +53,9 @@
   }
 
   .vd-lozenge-group-input {
-    @include vd-input-text();
-    @include vd-input-box-model();
+    @include vd-input-text;
+    @include vd-input-box-model;
+
     background-color: transparent;
     border: none;
     flex-grow: 1;

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

@@ -1,5 +1,6 @@
 .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

@@ -12,9 +12,9 @@ $vd-multiselect-popover-input-icon-padding: vd-grid-unit(6);
     color: hs-color(fg-neutral-default);
   }
 
-  @include vd-input-error-selectors() {
+  @include vd-input-error-selectors {
     .vd-multiselect-popover-input {
-      @include vd-input-error-styles();
+      @include vd-input-error-styles;
     }
   }
 }

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

@@ -53,7 +53,7 @@
   }
 
   .vd-next-stepper-header {
-    padding: 0 0 vd-grid-unit(2) 0;
+    padding: 0 0 vd-grid-unit(2);
   }
 
   .vd-next-stepper-why {

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

@@ -11,18 +11,22 @@
   background-color: vd-colour(mars);
   width: calc(1 / 3 * 100%);
 }
+
 .vd-password-strength-meter[data-value='1'] {
   background-color: vd-colour(mars);
   width: calc(1 / 3 * 100%);
 }
+
 .vd-password-strength-meter[data-value='2'] {
   background-color: vd-colour(mars);
   width: calc(1 / 3 * 100%);
 }
+
 .vd-password-strength-meter[data-value='3'] {
   background-color: vd-colour(solar);
   width: calc(2 / 3 * 100%);
 }
+
 .vd-password-strength-meter[data-value='4'] {
   background-color: hs-color(bg-success-default);
   width: calc(3 / 3 * 100%);

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

@@ -25,6 +25,7 @@
 
   &.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);
 
     &.vd-popover-tether-element-attached-center .vd-popover-beak {
@@ -44,6 +45,7 @@
 
   &.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);
 
     &.vd-popover-tether-element-attached-center .vd-popover-beak {
@@ -59,11 +61,13 @@
   &.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%);
     }
 
     &.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%);
     }
   }
@@ -72,12 +76,14 @@
     &.vd-popover-tether-element-attached-right.vd-popover-tether-target-attached-left {
       padding-right: $vd-popover-trigger-spacing;
       margin-top: -$vd-popover-spacing;
+
       @include position-popover-beak(right, $offset: $vd-popover-spacing);
     }
 
     &.vd-popover-tether-element-attached-left.vd-popover-tether-target-attached-right {
       padding-left: $vd-popover-trigger-spacing;
       margin-top: -$vd-popover-spacing;
+
       @include position-popover-beak(left, $offset: $vd-popover-spacing);
     }
   }
@@ -86,6 +92,7 @@
     &.vd-popover-tether-element-attached-right.vd-popover-tether-target-attached-left {
       padding-right: $vd-popover-trigger-spacing;
       margin-top: $vd-popover-spacing;
+
       .vd-popover-beak {
         right: 0;
         bottom: $vd-popover-spacing;
@@ -97,6 +104,7 @@
     &.vd-popover-tether-element-attached-left.vd-popover-tether-target-attached-right {
       padding-left: $vd-popover-trigger-spacing;
       margin-top: $vd-popover-spacing;
+
       .vd-popover-beak {
         left: 0;
         bottom: $vd-popover-spacing;
@@ -164,11 +172,13 @@
     ~ & {
     background-color: $vd-action-bar-background-colour;
   }
+
   .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-left
     .vd-popover-actions:not(:empty)
     ~ & {
     background-color: $vd-action-bar-background-colour;
   }
+
   .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-right
     .vd-popover-actions:not(:empty)
     ~ & {

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

@@ -4,7 +4,7 @@ $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;
+  color: currentcolor;
   text-decoration: none;
   transition-duration: $vd-time-s;
   transition-property: color, background;

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

@@ -40,8 +40,9 @@
 }
 
 .vd-popover-list-group-header {
-  @include vd-popover-list-item();
+  @include vd-popover-list-item;
   @include vd-text(signpost);
+
   position: relative;
 
   &::after {
@@ -58,6 +59,7 @@
 .vd-popover-list-group-divider {
   @include vd-popover-list-item(vd-grid-unit(2) $vd-popover-spacing);
   @include vd-text(signpost);
+
   position: relative;
 
   &::after {
@@ -71,7 +73,8 @@
 }
 
 .vd-popover-list-item {
-  @include vd-popover-list-item();
+  @include vd-popover-list-item;
+
   outline: none;
   cursor: pointer;
 
@@ -85,6 +88,7 @@
 .vd-popover-list-item--disabled {
   cursor: not-allowed;
 }
+
 .vd-popover-list-empty {
   @include vd-popover-list-item($vd-popover-spacing);
 }
@@ -96,11 +100,11 @@
     display: none;
   }
 
-  @include vd-popover-list-item();
+  @include vd-popover-list-item;
 }
 
 .vd-popover-list-footer {
-  @include vd-popover-list-item();
+  @include vd-popover-list-item;
 }
 
 .vd-popover-list-footer--full {
@@ -114,6 +118,7 @@
 
 .vd-popover-list-footer-action {
   @include vd-text(label);
+
   background-color: hs-color(bg-neutral-top);
   border: 0;
   color: hs-color(fg-go-default);
@@ -139,6 +144,7 @@
 
 .vd-popover-list-separator {
   @extend .vd-hr;
+
   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

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

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

@@ -4,7 +4,6 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
   box-sizing: border-box;
   padding: $vd-promos-spacing;
   text-align: center;
@@ -13,6 +12,7 @@
 
 .vd-promo-headline {
   @include vd-promo-headline;
+
   margin: $vd-promos-spacing 0;
 }
 
@@ -30,6 +30,7 @@
 
 .vd-promo-intro {
   @include vd-line-height(25, 15);
+
   font-size: vd-text-size(body);
   margin: 0;
 }
@@ -45,13 +46,11 @@
   flex-basis: 100%;
   justify-content: flex-start;
   flex-direction: row;
-
   text-align: left;
 
   @include vd-viewport-media-max(small) {
     flex-direction: column;
     justify-content: center;
-
     text-align: center;
   }
 

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

@@ -2,9 +2,11 @@
   0% {
     transform: scale(0);
   }
+
   33% {
     transform: scale(1.8);
   }
+
   66% {
     transform: scale(1);
   }
@@ -18,6 +20,7 @@
   &:first-child {
     padding-left: 0;
   }
+
   &:last-child {
     padding-right: 0;
   }
@@ -46,6 +49,7 @@
 
 .vd-radio-description {
   @include vd-text(supplementary);
+
   padding-top: vd-grid-unit(2);
   padding-left: $vd-radio-length + vd-grid-unit(3);
 }
@@ -69,7 +73,7 @@
   border: 2px solid hs-color(border-neutral-strong);
   box-sizing: border-box;
 
-  &:after {
+  &::after {
     content: '';
     display: block;
     position: absolute;
@@ -84,7 +88,7 @@
   }
 }
 
-.vd-radio-input:hover + .vd-radio-tick:after {
+.vd-radio-input:hover + .vd-radio-tick::after {
   opacity: 1;
 }
 
@@ -94,7 +98,7 @@
   background-color: hs-color(bg-go-default);
   border-color: hs-color(bg-go-default);
 
-  &:after {
+  &::after {
     opacity: 1;
     animation: vd-radio-checked $vd-time-l;
     background-color: hs-color(fg-neutral-ondark-default);
@@ -109,10 +113,11 @@
   cursor: not-allowed;
   filter: grayscale(100%);
 
-  &:hover + .vd-radio-tick:after {
+  &:hover + .vd-radio-tick::after {
     opacity: 0;
   }
-  &:hover:checked + .vd-radio-tick:after {
+
+  &:hover:checked + .vd-radio-tick::after {
     opacity: 1;
     background-color: hs-color(bg-neutral-top);
   }

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

@@ -41,21 +41,6 @@ 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)) {
-    padding: $vd-section-padding-v $vd-section-padding-h;
-
-    .vd-section-container {
-      margin: -#{$vd-section-padding-v} -#{$vd-section-padding-h};
-      padding: $vd-section-padding-v $vd-section-padding-h;
-    }
-
-    vd-section,
-    .vd-section {
-      padding: $vd-section-padding-v 0;
-    }
-  }
 }
 
 .vd-section--secondary {
@@ -82,7 +67,7 @@ vd-section,
 }
 
 .vd-section--fixed {
-  @include vd-shadow();
+  @include vd-shadow;
 
   &::after {
     @include vd-fade-in($vd-time-s);
@@ -124,7 +109,7 @@ vd-section,
 
   @include vd-viewport-media-max($vd-breakpoint-small) {
     flex-basis: 100%;
-    padding: 0 0 $vd-section--action-bar-spacing 0;
+    padding: 0 0 $vd-section--action-bar-spacing;
   }
 }
 

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

@@ -61,7 +61,7 @@
   }
 
   &:disabled + .vd-segcontrol-button {
-    @include disabled();
+    @include disabled;
 
     cursor: default;
     pointer-events: none;

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

@@ -25,7 +25,8 @@
 
   .vd-input:not(:first-child),
   .vd-select:not(:first-child) {
-    @include remove-border-radius-left();
+    @include remove-border-radius-left;
+
     margin-left: -$vd-input-border-width;
   }
 
@@ -33,14 +34,14 @@
     margin-left: -$vd-input-border-width;
 
     .vd-select {
-      @include remove-border-radius-left();
+      @include remove-border-radius-left;
     }
   }
 
   .vd-input:not(:last-child),
   .vd-select:not(:last-child),
   .vd-select-container:not(:last-child) .vd-select {
-    @include remove-border-radius-right();
+    @include remove-border-radius-right;
   }
 
   .vd-input,

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

@@ -2,9 +2,10 @@ $vd-select-input-group-focused-zindex: $vd-z-index-content-base + 3;
 $vd-select-input-group-with-error-zindex: $vd-select-input-group-focused-zindex - 1;
 
 @mixin vd-select() {
-  @include vd-input-text();
-  @include vd-input-box-model();
-  @include vd-input-states();
+  @include vd-input-text;
+  @include vd-input-box-model;
+  @include vd-input-states;
+
   appearance: none;
   padding-right: 3 * $vd-input-padding;
 }

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

@@ -10,6 +10,7 @@
   &.vd-error {
     .vd-select {
       border-color: hs-color(border-no-default);
+
       &:focus {
         box-shadow: 0 0 $vd-shadow-blur hs-color(border-no-default);
       }

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

@@ -21,6 +21,7 @@
   align-items: center;
   background: hs-color(bg-neutral-top);
   overflow: auto;
+
   @include vd-fade-in;
 
   .vd-dialog-close {

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

@@ -5,8 +5,7 @@
 
 .vd-switch-input {
   @extend %vd-invisible-checkbox-input;
-
-  @include vd-btn-disabled();
+  @include vd-btn-disabled;
 
   &:disabled {
     opacity: 0;
@@ -123,5 +122,6 @@
 // Disabled
 .vd-switch-input:disabled + .vd-switch-track {
   cursor: not-allowed;
-  @include disabled();
+
+  @include disabled;
 }