@lightspeed/design-system-css 1.1.0 → 1.2.0

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

@@ -1,3 +1,18 @@
+@mixin vd-sidebar-faux-column-bg($tabs-width, $drawer-width) {
+  background: linear-gradient(
+    to right,
+    $vd-sidebar-tabs-background-color 0,
+    $vd-sidebar-tabs-background-color $tabs-width,
+    $vd-sidebar-drawer-background-color $tabs-width,
+    $vd-sidebar-drawer-background-color $drawer-width
+  );
+}
+
+// The sidebar contents can be hidden, if so we shouldn't show the sidebar
+.vd-sidebar:empty {
+  display: none;
+}
+
 .vd-sidebar {
   display: flex;
   position: relative;
@@ -7,4 +22,105 @@
   box-sizing: border-box;
   font-family: $vd-font-primary;
   line-height: normal;
+  max-width: $vd-sidebar-width;
+
+  transform: translateX(0);
+  transition: transform 0.2s ease-in-out;
+  z-index: $vd-sidebar-base-z-index;
+
+  .vd-sidebar-modal-close {
+    display: none;
+    top: $vd-sidebar-modal-close-base-offset;
+    right: $vd-sidebar-modal-close-right-offset;
+  }
+
+  .vd-sidebar-tabs {
+    height: auto;
+  }
+
+  .vd-sidebar-drawer {
+    height: auto;
+  }
+
+  @media print {
+    display: none;
+  }
+
+  // Required so banner does not appear over the top of the sidenav when its toggled
+  // on smaller devices
+  @include vd-viewport-media-max($vd-breakpoint-large) {
+    z-index: $vd-z-index-popover-base + 2;
+  }
+}
+
+.vd-sidebar-content {
+  @include vd-sidebar-faux-column-bg(
+    $vd-sidebar-tabs-desktop-width,
+    $vd-sidebar-drawer-desktop-width
+  );
+  width: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  display: flex;
+}
+
+.vd-sidebar--pad-drawer {
+  padding-right: $vd-sidebar-drawer-desktop-width;
+}
+
+// ========= Body Class Sidenav Modal State ========= //
+
+.nv-display-sidenav-modal {
+  .vd-sidebar {
+    z-index: $vd-sidebar-modal-z-index;
+
+    .vd-sidebar-modal-close {
+      display: flex;
+    }
+  }
+}
+
+// ========= Responsive Breakpoint Styles ========= //
+
+@include vd-viewport-media-max($vd-breakpoint-large) {
+  .vd-sidebar {
+    position: absolute;
+    left: 0;
+    height: 100%;
+    transform: translateX(
+      calc(-100% - #{$vd-sidebar-content-box-shadow-offset-x})
+    );
+  }
+
+  .nv-display-sidenav-modal {
+    .vd-sidebar {
+      transform: translateX(0);
+    }
+  }
+
+  .vd-sidebar--pad-drawer {
+    padding-right: 0;
+  }
+}
+
+@include vd-viewport-media-min($vd-breakpoint-xlarge-min) {
+  // The following styles are required to allow the sidenav modal overlay page content when no drawer is displayed
+  // This only applies to the nav at large desktop size
+  .vd-sidebar--no-drawer {
+    width: $vd-sidebar-tabs-desktop-width;
+  }
+
+  .nv-display-sidenav-modal {
+    .vd-sidebar--no-drawer {
+      .vd-sidebar-content {
+        position: absolute;
+      }
+
+      .vd-sidebar-modal-close {
+        right: $vd-sidebar-modal-close-right-offset -
+          $vd-sidebar-drawer-desktop-width;
+      }
+    }
+  }
 }

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

@@ -1,6 +1,6 @@
 $vd-sidebar-drawer-background-color: vd-colour(nav-side-drawer);
-$vd-sidebar-drawer-desktop-width: 145px;
+$vd-sidebar-drawer-desktop-width: 176px;
 
-$vd-sidebar-drawer-item-font-size: 14px;
-$vd-sidebar-drawer-item-padding-x: 10px;
-$vd-sidebar-drawer-item-padding-y: 20px;
+$vd-sidebar-drawer-item-font-size: 15px;
+$vd-sidebar-drawer-item-padding-x: 22px;
+$vd-sidebar-drawer-item-padding-y: 13px;

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

@@ -5,14 +5,16 @@
   width: $vd-sidebar-drawer-desktop-width;
   height: 100%;
   background-color: $vd-sidebar-drawer-background-color;
-  border-right: 1px solid vd-colour(framing);
+  border-right: 1px solid vd-colour(background);
   box-sizing: border-box;
+  padding-top: $vd-sidebar-drawer-item-font-size;
+  padding-bottom: $vd-sidebar-drawer-item-font-size;
 
   .vd-nav-item {
     width: 100%;
     height: auto;
     color: vd-colour(text);
-    font-weight: $vd-font-weight--bold;
+    font-weight: $vd-font-weight--regular;
 
     &:hover {
       background: vd-colour(go-highlight);
@@ -24,6 +26,7 @@
   }
 
   .vd-nav-item--active {
+    @include vd-sidebar-active-indicator();
     .vd-nav-item-action {
       color: vd-colour(go);
     }

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

@@ -1,11 +1,17 @@
+@use "sass:math";
+
+$vd-sidebar-tabs-animation-duration: 200ms;
+
 $vd-sidebar-tabs-background-color: vd-colour(nav-side-tabs);
 
-$vd-sidebar-tabs-desktop-width: 85px;
+$vd-sidebar-tabs-desktop-width: 64px;
+$vd-sidebar-tabs-expanded-width: 240px;
 
-$vd-sidebar-tab-height: 75px !default;
+$vd-sidebar-tab-height: 44px !default;
 $vd-sidebar-tab-font-colour: vd-colour(text) !default;
-$vd-sidebar-tab-font-size: 12px !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-active-bg-colour: vd-colour(text) !default;
 $vd-sidebar-tab-active-border-width: 6px !default;

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

@@ -13,32 +13,31 @@
   font-size: $vd-sidebar-tab-font-size;
   color: vd-colour(text);
 
+  padding-top: $vd-sidebar-drawer-item-font-size;
+  padding-bottom: $vd-sidebar-drawer-item-font-size;
+
+  transition: width $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
+
+  overflow: hidden;
+
+  &.vd-sidebar-tabs--expanded {
+    width: $vd-sidebar-tabs-expanded-width;
+
+    .vd-nav-item-action {
+      justify-content: start;
+    }
+  }
+
   .vd-nav-item {
     flex-shrink: 0;
     height: $vd-sidebar-tab-height;
-    width: 100%;
-
-    // Increase specificity to override colour specific selectors
-    .vd-nav-item-icon.vd-nav-item-icon {
-      color: inherit;
-    }
+    transition: width $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
 
     &:hover {
       background: vd-colour(background);
     }
   }
 
-  .vd-nav-item-action {
-    flex-direction: column;
-    justify-content: center;
-    position: relative;
-  }
-
-  .vd-nav-item--active {
-    color: vd-colour(do);
-    background: vd-colour(box);
-  }
-
   .vd-nav-item--pending {
     background: vd-colour(background);
   }
@@ -52,22 +51,38 @@
     }
   }
 
+  .vd-nav-item--active {
+    color: vd-colour(do);
+    background: vd-colour(box);
+
+    &.vd-nav-item--no-children {
+      @include vd-sidebar-active-indicator();
+    }
+  }
+
+  .vd-nav-item-action {
+    flex-direction: row;
+    position: relative;
+    justify-content: start;
+  }
+
   .vd-nav-item-label {
-    font-weight: $vd-font-weight--bold;
+    white-space: nowrap;
   }
 
   .vd-nav-item-icon {
+    flex-shrink: 0;
+    text-align: center;
     font-size: $vd-sidebar-tab-icon-font-size;
-  }
+    min-width: $vd-sidebar-tab-icon-font-size;
+    padding-left: $vd-sidebar-tab-padding-x;
+    padding-right: $vd-sidebar-tab-padding-x;
 
-  @each $_vd-nav-colour-name, $_vd-nav-colour in $vd-nav-item-colours {
-    .vd-nav-item--#{$_vd-nav-colour-name} {
-      .vd-nav-item-icon { color: $_vd-nav-colour; }
+    transition: padding-right $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
+  }
 
-      &.vd-nav-item--active,
-      &.vd-nav-item--pending {
-        border-color: $_vd-nav-colour;
-      }
-    }
+  .vd-nav-divider {
+    padding-left: $vd-sidebar-tab-padding-x;
+    justify-content: flex-start;
   }
 }

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

@@ -24,7 +24,7 @@
   position: relative;
 
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   justify-content: center;
 
   width: calc(100% - #{$vd-toast-notification-offset});
@@ -52,8 +52,15 @@
   align-items: center;
   justify-content: center;
 
-  &:hover { cursor: pointer; }
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.vd-toast-notification--success {
+  background-color: vd-colour(success);
 }
 
-.vd-toast-notification--success  { background-color: vd-colour(success); }
-.vd-toast-notification--negative { background-color: vd-colour(no); }
+.vd-toast-notification--negative {
+  background-color: vd-colour(no);
+}

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

@@ -20,7 +20,7 @@
 
     &:hover {
       opacity: 1;
-    }  
+    }
   }
 
   .vd-nav-item-icon + .vd-nav-item-label {
@@ -40,6 +40,6 @@
   }
 
   .vd-logo {
-    padding-left: 34px;
+    padding-left: 23px;
   }
 }

package/src/vend.ui/styles/global/_non-styles.scss

@@ -54,6 +54,7 @@
 @import '../../components/vd-section/vd-section-ns';
 @import '../../components/vd-select/vd-select-ns';
 @import '../../components/vd-section-back/vd-section-back-ns';
+@import '../../components/vd-sidebar/vd-sidebar-ns';
 @import '../../components/vd-sidebar-drawer/vd-sidebar-drawer-ns';
 @import '../../components/vd-sidebar-tabs/vd-sidebar-tabs-ns';
 @import '../../components/vd-status-icon/vd-status-icon-ns';

package/src/vend.ui/styles/global/effects/_effects.scss

@@ -20,3 +20,38 @@
   animation-name: vd-flash;
   animation-fill-mode:forwards;
 }
+
+@keyframes vd-blink-highlight {
+  20%, 
+  70% {
+      background-color: vd-colour(go-highlight);
+  }
+}
+
+
+@keyframes vd-shake {
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+
+.vd-shake-highlight {
+  animation: vd-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both, vd-blink-highlight 1.2s;
+}

package/src/vend.ui/styles/navi/_nv-topnav.scss

@@ -9,6 +9,7 @@
 .nv-topnav {
   position: relative;
   width: 100%;
+  z-index: 1;
 
   @media print {
     display: none;

package/src/vend.ui/styles/navi/navi.scss

@@ -1,7 +1,6 @@
 // Modules
 @import "nv-topnav";
 @import "nv-topnav-title";
-@import "nv-sidenav";
 @import "nv-account-banner";
 @import "nv-notifications-item";
 @import "nv-user-sale-data";

package/src/vend.ui/styles/navi/non-styles/_variables.scss

@@ -4,17 +4,6 @@ $nv-header-font-size: 15px;
 $nv-header-logo-font-size: 42px;
 $nv-header-logo-font-size--mobile: 24px;
 
-// Side Navigation
-
-$nv-sidenav-base-z-index: $vd-z-index-navigation-base;
-$nv-sidenav-modal-z-index: $vd-modals-z-index + 1;
-$nv-sidenav-modal-close-base-offset: 10px;
-$nv-sidenav-modal-close-right-offset: -($vd-dialog-close-width + $nv-sidenav-modal-close-base-offset);
-
-$nv-sidenav-content-box-shadow-offset-x: 1px;
-$nv-sidenav-tabs-mobile-width: 85px;
-$nv-sidenav-drawer-mobile-width: 145px;
-
 // Notifications Side Drawer
 
 $nv-notifications-list-spacing: 20px;

package/src/vend.ui/styles/vend-ui.scss

@@ -58,6 +58,7 @@
 @import '../components/vd-loader/vd-loader';
 @import '../components/vd-main-content/vd-main-content';
 @import '../components/vd-modals-container/vd-modals-container';
+@import '../components/vd-nav-divider/vd-nav-divider';
 @import '../components/vd-nav-item/vd-nav-item';
 @import '../components/vd-overlay/vd-overlay';
 @import '../components/vd-p/vd-p';
@@ -74,6 +75,7 @@
 @import '../components/vd-sidebar/vd-sidebar';
 @import '../components/vd-sidebar-drawer/vd-sidebar-drawer';
 @import '../components/vd-sidebar-tabs/vd-sidebar-tabs';
+@import '../components/vd-sidebar/tmp-overrides'; // @REMOVEME: When flag `sidebar_new` is fully rolled out
 @import '../components/vd-splash/vd-splash';
 @import '../components/vd-status-icon/vd-status-icon';
 @import '../components/vd-suggestion/vd-suggestion-list';

package/src/vend.ui/styles/navi/_nv-sidenav.scss

@@ -1,143 +0,0 @@
-@mixin nv-sidenav-faux-column-bg($tabs-width, $drawer-width) {
-  background: linear-gradient(
-    to right,
-    $vd-sidebar-tabs-background-color 0,
-    $vd-sidebar-tabs-background-color $tabs-width,
-    $vd-sidebar-drawer-background-color $tabs-width,
-    $vd-sidebar-drawer-background-color $drawer-width
-  );
-}
-
-// The sidebar contents can be hidden, if so we shouldn't show the sidebar
-.vd-sidebar:empty {
-  display: none;
-}
-
-.nv-sidenav {
-  transform: translateX(0);
-  transition: transform 0.2s ease-in-out;
-  display: block;
-  height: calc(100% - #{$vd-topbar-height});
-  z-index: $nv-sidenav-base-z-index;
-
-  .nv-sidenav-modal-close {
-    display: none;
-    top: $nv-sidenav-modal-close-base-offset;
-    right: $nv-sidenav-modal-close-right-offset;
-  }
-
-  .vd-sidebar-tabs {
-    box-shadow: none;
-    height: auto;
-  }
-
-  .vd-sidebar-drawer {
-    border-right: none;
-    height: auto;
-  }
-
-  @media print {
-    display: none;
-  }
-
-  @supports (height: min-content) {
-    .vd-sidebar-tabs,
-    .vd-sidebar-drawer {
-      height: min-content;
-    }
-  }
-
-  // Required so banner does not appear over the top of the sidenav when its toggled
-  // on smaller devices
-  @include vd-viewport-media-max($vd-breakpoint-large) {
-    z-index: $vd-z-index-popover-base + 2;
-  }
-}
-
-.nv-sidenav-content {
-  @include nv-sidenav-faux-column-bg(
-    $vd-sidebar-tabs-desktop-width,
-    $vd-sidebar-drawer-desktop-width
-  );
-  width: auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-  display: flex;
-  box-shadow: $nv-sidenav-content-box-shadow-offset-x 0 0 0 vd-colour(framing);
-}
-
-.nv-sidenav--pad-drawer {
-  padding-right: $vd-sidebar-drawer-desktop-width;
-}
-
-// ========= Body Class Sidenav Modal State ========= //
-
-.nv-display-sidenav-modal {
-  .nv-sidenav {
-    z-index: $nv-sidenav-modal-z-index;
-
-    .nv-sidenav-modal-close {
-      display: flex;
-    }
-  }
-}
-
-// ========= Responsive Breakpoint Styles ========= //
-
-@include vd-viewport-media-max($vd-breakpoint-large) {
-  .nv-sidenav {
-    position: absolute;
-    left: 0;
-    height: 100%;
-    transform: translateX(
-      calc(-100% - #{$nv-sidenav-content-box-shadow-offset-x})
-    );
-
-    .nv-sidenav-content {
-      @include nv-sidenav-faux-column-bg(
-        $nv-sidenav-tabs-mobile-width,
-        $nv-sidenav-drawer-mobile-width
-      );
-    }
-
-    .vd-sidebar-tabs {
-      width: $nv-sidenav-tabs-mobile-width;
-    }
-
-    .vd-sidebar-drawer {
-      width: $nv-sidenav-drawer-mobile-width;
-    }
-  }
-
-  .nv-display-sidenav-modal {
-    .nv-sidenav {
-      transform: translateX(0);
-    }
-  }
-
-  .nv-sidenav--pad-drawer {
-    padding-right: 0;
-  }
-}
-
-@include vd-viewport-media-min($vd-breakpoint-xlarge-min) {
-  // The following styles are required to allow the sidenav modal overlay page content when no drawer is displayed
-  // This only applies to the nav at large desktop size
-  .nv-sidenav--no-drawer {
-    width: $vd-sidebar-tabs-desktop-width;
-  }
-
-  .nv-display-sidenav-modal {
-    .nv-sidenav--no-drawer {
-      .nv-sidenav-content {
-        position: absolute;
-      }
-
-      .nv-sidenav-modal-close {
-        right: $nv-sidenav-modal-close-right-offset -
-          $vd-sidebar-drawer-desktop-width;
-      }
-    }
-  }
-}