@lightspeed/design-system-css 1.1.2 → 1.3.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,102 @@
   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,20 @@
+@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-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-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/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) {

package/src/vend.ui/styles/global/_base-mixins.scss

@@ -1,7 +1,7 @@
 // Base mixins.
 
 // Reset container defaults
-@mixin vd-reset () {
+@mixin vd-reset() {
   @include font-smoothing;
 
   font-family: $vd-font-lato;
@@ -9,4 +9,3 @@
   line-height: normal;
   color: vd-colour(text);
 }
-

package/src/vend.ui/styles/global/_grid.scss

@@ -1,7 +1,7 @@
 // =================================== Responsive Grid =================================== //
 
 // Grid Settings
-@use "sass:math";
+@use 'sass:math';
 
 $vd-grid-columns: 12 !default;
 $vd-grid-block-max: 8 !default;
@@ -15,7 +15,7 @@ $vd-grid-row-gutter-large: 24px;
 //
 // @param {String} $breakpoint - the breakpoint size to attach to the column.
 //
-@mixin vd-grid-columns ($breakpoint) {
+@mixin vd-grid-columns($breakpoint) {
   @for $i from 1 through $vd-grid-columns {
     $_vd-column-width: percentage(math.div($i, $vd-grid-columns));
 
@@ -33,7 +33,7 @@ $vd-grid-row-gutter-large: 24px;
 //
 // @param {String} $breakpoint - the breakpoint size to attach to the column.
 //
-@mixin vd-grid-block-columns ($breakpoint) {
+@mixin vd-grid-block-columns($breakpoint) {
   @for $i from 1 through $vd-grid-block-max {
     .vd-g-#{$breakpoint}-up-#{$i} {
       flex-wrap: wrap;
@@ -54,7 +54,7 @@ $vd-grid-row-gutter-large: 24px;
 //
 // @param {String} $breakpoint - the breakpoint size to attach to the column.
 //
-@mixin vd-build-grid-columns ($breakpoint) {
+@mixin vd-build-grid-columns($breakpoint) {
   @include vd-grid-columns($breakpoint);
   @include vd-grid-block-columns($breakpoint);
 }
@@ -63,7 +63,7 @@ $vd-grid-row-gutter-large: 24px;
 //
 // @mixin vd-build-grid.
 //
-@mixin vd-build-grid () {
+@mixin vd-build-grid() {
   .vd-g-row {
     max-width: $vd-section-wrap-max-width;
     margin-left: auto;

package/src/vend.ui/styles/global/_layout.scss

@@ -1,10 +1,10 @@
 // Layout Spacing; @todo this should be renamed - it has nothing to do with the grid.
 $vd-grid-unit: 4px;
 
-@function vd-grid-unit ($times:1) {
+@function vd-grid-unit($times: 1) {
   @return $vd-grid-unit * $times;
 }
 
-@function vd-grid-gutter ($times:1) {
+@function vd-grid-gutter($times: 1) {
   @return vd-grid-unit(4) * $times;
 }

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