@lightspeed/design-system-css 1.1.2 → 1.3.0

package/dist/index.css

@@ -32,13 +32,13 @@
     --vd-colour--keyline: #37353A;
     --vd-colour--framing-inverse: #E7E5E8;
     --vd-colour--keyline-inverse: #C9C7CA;
-    --vd-colour--golden-sand: #E6B03D;
-    --vd-colour--tacao: #ED6B44;
-    --vd-colour--new-york-pink: #DE3CEC;
-    --vd-colour--gothic: #A02FB6;
-    --vd-colour--lavender-purple: #501897;
-    --vd-colour--sinbad: #6952F6;
-    --vd-colour--shuttle-gray: #5D5D5D;
+    --vd-colour--solar: #E6B03D;
+    --vd-colour--mars: #ED6B44;
+    --vd-colour--farout-pink: #DE3CEC;
+    --vd-colour--galaxy: #A02FB6;
+    --vd-colour--deep-purple: #501897;
+    --vd-colour--neptune: #6952F6;
+    --vd-colour--shuttle-grey: #5D5D5D;
     --vd-colour--nav-top: #0B0B0B;
     --vd-colour--nav-top-rgb: 11, 11, 11;
     --vd-colour--nav-side-tabs: #27252A;
@@ -93,13 +93,13 @@
   --vd-colour--keyline: #C9C7CA;
   --vd-colour--framing-inverse: #27252A;
   --vd-colour--keyline-inverse: #37353A;
-  --vd-colour--golden-sand: #E6B03D;
-  --vd-colour--tacao: #ED6B44;
-  --vd-colour--new-york-pink: #DE3CEC;
-  --vd-colour--gothic: #A02FB6;
-  --vd-colour--lavender-purple: #501897;
-  --vd-colour--sinbad: #6952F6;
-  --vd-colour--shuttle-gray: #5D5D5D;
+  --vd-colour--solar: #E6B03D;
+  --vd-colour--mars: #ED6B44;
+  --vd-colour--farout-pink: #DE3CEC;
+  --vd-colour--galaxy: #A02FB6;
+  --vd-colour--deep-purple: #501897;
+  --vd-colour--neptune: #6952F6;
+  --vd-colour--shuttle-grey: #5D5D5D;
   --vd-colour--nav-top: #0B0B0B;
   --vd-colour--nav-top-rgb: 11, 11, 11;
   --vd-colour--nav-side-tabs: #E7E5E8;
@@ -153,13 +153,13 @@
   --vd-colour--keyline: #37353A;
   --vd-colour--framing-inverse: #E7E5E8;
   --vd-colour--keyline-inverse: #C9C7CA;
-  --vd-colour--golden-sand: #E6B03D;
-  --vd-colour--tacao: #ED6B44;
-  --vd-colour--new-york-pink: #DE3CEC;
-  --vd-colour--gothic: #A02FB6;
-  --vd-colour--lavender-purple: #501897;
-  --vd-colour--sinbad: #6952F6;
-  --vd-colour--shuttle-gray: #5D5D5D;
+  --vd-colour--solar: #E6B03D;
+  --vd-colour--mars: #ED6B44;
+  --vd-colour--farout-pink: #DE3CEC;
+  --vd-colour--galaxy: #A02FB6;
+  --vd-colour--deep-purple: #501897;
+  --vd-colour--neptune: #6952F6;
+  --vd-colour--shuttle-grey: #5D5D5D;
   --vd-colour--nav-top: #0B0B0B;
   --vd-colour--nav-top-rgb: 11, 11, 11;
   --vd-colour--nav-side-tabs: #27252A;
@@ -198,7 +198,14 @@ a:link {
   text-decoration: none;
 }
 
-a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
+a,
+button,
+input,
+textarea,
+select,
+details,
+[ng-click],
+.vd-fast-tap {
   touch-action: manipulation;
 }
 
@@ -417,6 +424,29 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   animation-fill-mode: forwards;
 }
 
+@keyframes vd-blink-highlight {
+  20%, 70% {
+    background-color: var(--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;
+}
+
 #vd-viewport-identifier {
   position: absolute;
   z-index: -1;
@@ -1211,7 +1241,8 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   display: flex;
   align-items: center;
 }
-.vd-select-group > .vd-select, .vd-select-group .vd-select-container {
+.vd-select-group > .vd-select,
+.vd-select-group .vd-select-container {
   width: auto;
 }
 .vd-select-group .vd-input {
@@ -1219,13 +1250,16 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   margin-right: 0;
   flex: 1;
 }
-.vd-select-group .vd-input, .vd-select-group .vd-select {
+.vd-select-group .vd-input,
+.vd-select-group .vd-select {
   position: relative;
 }
-.vd-select-group .vd-input:focus, .vd-select-group .vd-select:focus {
+.vd-select-group .vd-input:focus,
+.vd-select-group .vd-select:focus {
   z-index: 103;
 }
-.vd-select-group .vd-input:not(:first-child), .vd-select-group .vd-select:not(:first-child) {
+.vd-select-group .vd-input:not(:first-child),
+.vd-select-group .vd-select:not(:first-child) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   margin-left: -2px;
@@ -1237,12 +1271,15 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.vd-select-group .vd-input:not(:last-child), .vd-select-group .vd-select:not(:last-child),
+.vd-select-group .vd-input:not(:last-child),
+.vd-select-group .vd-select:not(:last-child),
 .vd-select-group .vd-select-container:not(:last-child) .vd-select {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.vd-select-group .vd-input.vd-error, .vd-select-group .vd-select.vd-error, .vd-select-group .vd-select-container:not(:last-child).vd-error {
+.vd-select-group .vd-input.vd-error,
+.vd-select-group .vd-select.vd-error,
+.vd-select-group .vd-select-container:not(:last-child).vd-error {
   z-index: 102;
 }
 
@@ -1617,25 +1654,25 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   font-weight: 700;
 }
 .vd-avatar--initials.vd-avatar--initials-1 {
-  background-color: var(--vd-colour--new-york-pink);
+  background-color: var(--vd-colour--farout-pink);
 }
 .vd-avatar--initials.vd-avatar--initials-2 {
-  background-color: var(--vd-colour--tacao);
+  background-color: var(--vd-colour--mars);
 }
 .vd-avatar--initials.vd-avatar--initials-3 {
-  background-color: var(--vd-colour--golden-sand);
+  background-color: var(--vd-colour--solar);
 }
 .vd-avatar--initials.vd-avatar--initials-4 {
-  background-color: var(--vd-colour--gothic);
+  background-color: var(--vd-colour--galaxy);
 }
 .vd-avatar--initials.vd-avatar--initials-5 {
-  background-color: var(--vd-colour--sinbad);
+  background-color: var(--vd-colour--neptune);
 }
 .vd-avatar--initials.vd-avatar--initials-6 {
-  background-color: var(--vd-colour--lavender-purple);
+  background-color: var(--vd-colour--deep-purple);
 }
 .vd-avatar--initials.vd-avatar--initials-7 {
-  background-color: var(--vd-colour--shuttle-gray);
+  background-color: var(--vd-colour--shuttle-grey);
 }
 
 .vd-avatar-multi {
@@ -2238,7 +2275,8 @@ a.vd-btn.disabled {
 /* 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:disabled:hover > .vd-btn-hover-assist, .vd-tab-button:disabled:hover > .vd-btn-hover-assist {
+.vd-btn:disabled:hover > .vd-btn-hover-assist,
+.vd-tab-button:disabled:hover > .vd-btn-hover-assist {
   position: absolute;
   top: 0;
   right: 0;
@@ -2651,7 +2689,15 @@ vd-carousel-frame {
   color: var(--vd-colour--text);
   font-size: 15px;
 }
-.vd-datepicker table, .vd-datepicker caption, .vd-datepicker tbody, .vd-datepicker tfoot, .vd-datepicker thead, .vd-datepicker tr, .vd-datepicker th, .vd-datepicker td, .vd-datepicker abbr,
+.vd-datepicker table,
+.vd-datepicker caption,
+.vd-datepicker tbody,
+.vd-datepicker tfoot,
+.vd-datepicker thead,
+.vd-datepicker tr,
+.vd-datepicker th,
+.vd-datepicker td,
+.vd-datepicker abbr,
 .vd-datepicker-range table,
 .vd-datepicker-range caption,
 .vd-datepicker-range tbody,
@@ -2978,10 +3024,12 @@ vd-carousel-frame {
   border: none;
 }
 
-.vd-datepicker-range-no-end .is-startrange .pika-button, .vd-datepicker-range-no-end .is-endrange .pika-button {
+.vd-datepicker-range-no-end .is-startrange .pika-button,
+.vd-datepicker-range-no-end .is-endrange .pika-button {
   border: none;
 }
-.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button, .vd-datepicker-range-no-end .vd-datepicker-end-picker .is-endrange .pika-button {
+.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button,
+.vd-datepicker-range-no-end .vd-datepicker-end-picker .is-endrange .pika-button {
   background: var(--vd-colour--do-highlight);
   color: var(--vd-colour--text);
   font-weight: normal;
@@ -3323,7 +3371,8 @@ vd-carousel-frame {
   }
 }
 
-vd-dott, .vd-dott {
+vd-dott,
+.vd-dott {
   display: inline-block;
   width: 32px;
   height: 32px;
@@ -4096,6 +4145,20 @@ vd-dott, .vd-dott {
   z-index: 410;
 }
 
+.vd-nav-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 25px;
+}
+.vd-nav-divider::before {
+  content: "";
+  display: block;
+  height: 1px;
+  width: 20px;
+  background-color: var(--vd-colour--keyline);
+}
+
 .vd-nav-item {
   box-sizing: border-box;
   height: 100%;
@@ -4854,42 +4917,55 @@ vd-dott, .vd-dott {
     --vd-section-padding-v: 16px;
   }
 }
-vd-section, .vd-section {
+vd-section,
+.vd-section {
   display: block;
   position: relative;
   font-size: 15px;
   padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
 }
-vd-section .vd-section-wrap, .vd-section .vd-section-wrap {
+vd-section .vd-section-wrap,
+.vd-section .vd-section-wrap {
   display: block;
   margin: 0 auto;
   max-width: 1100px;
 }
-vd-section .vd-section-container, .vd-section .vd-section-container {
+vd-section .vd-section-container,
+.vd-section .vd-section-container {
   margin: calc(var(--vd-section-padding-v) * -1) calc(var(--vd-section-padding-h) * -1);
   padding: var(--vd-section-padding-v) var(--vd-section-padding-h);
 }
-vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-section .vd-section {
+vd-section vd-section,
+vd-section .vd-section,
+.vd-section vd-section,
+.vd-section .vd-section {
   padding: var(--vd-section-padding-v) 0;
 }
 @supports not (--a: 0) {
-  vd-section, .vd-section {
+  vd-section,
+.vd-section {
     padding: 24px 48px;
   }
-  vd-section .vd-section-container, .vd-section .vd-section-container {
+  vd-section .vd-section-container,
+.vd-section .vd-section-container {
     margin: -24px -48px;
     padding: 24px 48px;
   }
-  vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-section .vd-section {
+  vd-section vd-section,
+vd-section .vd-section,
+.vd-section vd-section,
+.vd-section .vd-section {
     padding: 24px 0;
   }
 }
 
-.vd-section--secondary, .vd-section--secondary .vd-section-container {
+.vd-section--secondary,
+.vd-section--secondary .vd-section-container {
   background-color: var(--vd-colour--framing);
 }
 
-.vd-section--tertiary, .vd-section--tertiary .vd-section-container {
+.vd-section--tertiary,
+.vd-section--tertiary .vd-section-container {
   background-color: var(--vd-colour--box);
 }
 
@@ -4929,7 +5005,8 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   opacity: 0;
 }
 
-.vd-section--action-bar, .vd-section--action-bar .vd-section-container {
+.vd-section--action-bar,
+.vd-section--action-bar .vd-section-container {
   background-color: var(--vd-colour--framing);
 }
 .vd-section--action-bar .vd-section-wrap {
@@ -5064,6 +5141,10 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   margin-left: 0;
 }
 
+.vd-sidebar:empty {
+  display: none;
+}
+
 .vd-sidebar {
   display: flex;
   position: relative;
@@ -5072,29 +5153,116 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   box-sizing: border-box;
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   line-height: normal;
+  max-width: 240px;
+  transform: translateX(0);
+  transition: transform 0.2s ease-in-out;
+  z-index: 200;
+}
+.vd-sidebar .vd-sidebar-modal-close {
+  display: none;
+  top: 10px;
+  right: -60px;
+}
+.vd-sidebar .vd-sidebar-tabs {
+  height: auto;
+}
+.vd-sidebar .vd-sidebar-drawer {
+  height: auto;
+}
+@media print {
+  .vd-sidebar {
+    display: none;
+  }
+}
+@media only screen and (max-width: 1200px) {
+  .vd-sidebar {
+    z-index: 302;
+  }
+}
+
+.vd-sidebar-content {
+  background: linear-gradient(to right, var(--vd-colour--nav-side-tabs) 0, var(--vd-colour--nav-side-tabs) 64px, var(--vd-colour--nav-side-drawer) 64px, var(--vd-colour--nav-side-drawer) 176px);
+  width: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  display: flex;
+}
+
+.vd-sidebar--pad-drawer {
+  padding-right: 176px;
 }
 
+.nv-display-sidenav-modal .vd-sidebar {
+  z-index: 411;
+}
+.nv-display-sidenav-modal .vd-sidebar .vd-sidebar-modal-close {
+  display: flex;
+}
+
+@media only screen and (max-width: 1200px) {
+  .vd-sidebar {
+    position: absolute;
+    left: 0;
+    height: 100%;
+    transform: translateX(calc(-100% - 1px));
+  }
+
+  .nv-display-sidenav-modal .vd-sidebar {
+    transform: translateX(0);
+  }
+
+  .vd-sidebar--pad-drawer {
+    padding-right: 0;
+  }
+}
+@media only screen and (min-width: 1201px) {
+  .vd-sidebar--no-drawer {
+    width: 64px;
+  }
+
+  .nv-display-sidenav-modal .vd-sidebar--no-drawer .vd-sidebar-content {
+    position: absolute;
+  }
+  .nv-display-sidenav-modal .vd-sidebar--no-drawer .vd-sidebar-modal-close {
+    right: -236px;
+  }
+}
 .vd-sidebar-drawer {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  width: 145px;
+  width: 176px;
   height: 100%;
   background-color: var(--vd-colour--nav-side-drawer);
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--vd-colour--background);
   box-sizing: border-box;
+  padding-top: 15px;
+  padding-bottom: 15px;
 }
 .vd-sidebar-drawer .vd-nav-item {
   width: 100%;
   height: auto;
   color: var(--vd-colour--text);
-  font-weight: 700;
+  font-weight: 400;
 }
 .vd-sidebar-drawer .vd-nav-item:hover {
   background: var(--vd-colour--go-highlight);
 }
 .vd-sidebar-drawer .vd-nav-item-action {
-  padding: 20px 10px;
+  padding: 13px 22px;
+}
+.vd-sidebar-drawer .vd-nav-item--active {
+  position: relative;
+}
+.vd-sidebar-drawer .vd-nav-item--active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 4px;
+  background-color: var(--vd-colour--go);
 }
 .vd-sidebar-drawer .vd-nav-item--active .vd-nav-item-action {
   color: var(--vd-colour--go);
@@ -5110,7 +5278,7 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   background-color: inherit;
 }
 .vd-sidebar-drawer .vd-nav-item-label {
-  font-size: 14px;
+  font-size: 15px;
 }
 
 .vd-sidebar-tabs {
@@ -5119,32 +5287,30 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   flex-shrink: 0;
   z-index: 101;
   box-sizing: border-box;
-  width: 85px;
+  width: 64px;
   height: 100%;
   background-color: var(--vd-colour--nav-side-tabs);
-  font-size: 12px;
+  font-size: 15px;
   color: var(--vd-colour--text);
+  padding-top: 15px;
+  padding-bottom: 15px;
+  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+.vd-sidebar-tabs.vd-sidebar-tabs--expanded {
+  width: 240px;
+}
+.vd-sidebar-tabs.vd-sidebar-tabs--expanded .vd-nav-item-action {
+  justify-content: start;
 }
 .vd-sidebar-tabs .vd-nav-item {
   flex-shrink: 0;
-  height: 75px;
-  width: 100%;
-}
-.vd-sidebar-tabs .vd-nav-item .vd-nav-item-icon.vd-nav-item-icon {
-  color: inherit;
+  height: 44px;
+  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .vd-sidebar-tabs .vd-nav-item:hover {
   background: var(--vd-colour--background);
 }
-.vd-sidebar-tabs .vd-nav-item-action {
-  flex-direction: column;
-  justify-content: center;
-  position: relative;
-}
-.vd-sidebar-tabs .vd-nav-item--active {
-  color: var(--vd-colour--do);
-  background: var(--vd-colour--box);
-}
 .vd-sidebar-tabs .vd-nav-item--pending {
   background: var(--vd-colour--background);
 }
@@ -5155,71 +5321,112 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
 .vd-sidebar-tabs .vd-nav-item--disabled:hover {
   background-color: inherit;
 }
-.vd-sidebar-tabs .vd-nav-item-label {
-  font-weight: 700;
+.vd-sidebar-tabs .vd-nav-item--active {
+  color: var(--vd-colour--do);
+  background: var(--vd-colour--box);
 }
-.vd-sidebar-tabs .vd-nav-item-icon {
-  font-size: 20px;
+.vd-sidebar-tabs .vd-nav-item--active.vd-nav-item--no-children {
+  position: relative;
 }
-.vd-sidebar-tabs .vd-nav-item--carnation .vd-nav-item-icon {
-  color: #f5765f;
+.vd-sidebar-tabs .vd-nav-item--active.vd-nav-item--no-children::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 4px;
+  background-color: var(--vd-colour--go);
 }
-.vd-sidebar-tabs .vd-nav-item--carnation.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--carnation.vd-nav-item--pending {
-  border-color: #f5765f;
+.vd-sidebar-tabs .vd-nav-item-action {
+  flex-direction: row;
+  position: relative;
+  justify-content: start;
 }
-.vd-sidebar-tabs .vd-nav-item--ocean-green .vd-nav-item-icon {
-  color: #44b773;
+.vd-sidebar-tabs .vd-nav-item-label {
+  white-space: nowrap;
 }
-.vd-sidebar-tabs .vd-nav-item--ocean-green.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--ocean-green.vd-nav-item--pending {
-  border-color: #44b773;
+.vd-sidebar-tabs .vd-nav-item-icon {
+  flex-shrink: 0;
+  text-align: center;
+  font-size: 20px;
+  min-width: 20px;
+  padding-left: 22px;
+  padding-right: 22px;
+  transition: padding-right 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.vd-sidebar-tabs .vd-nav-item--rajah .vd-nav-item-icon {
-  color: #f3c276;
+.vd-sidebar-tabs .vd-nav-divider {
+  padding-left: 22px;
+  justify-content: flex-start;
 }
-.vd-sidebar-tabs .vd-nav-item--rajah.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--rajah.vd-nav-item--pending {
-  border-color: #f3c276;
+
+/**
+  Temporary overrides for feature flag `sidebar_new`.
+
+  Those overrides bring back the old sidebar styles unless
+  the class `vd-sidebar--new` is set.
+
+  @REMOVEME: When flag `sidebar_new` is fully rolled out
+*/
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs {
+  width: 85px;
+  font-size: 12px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
-.vd-sidebar-tabs .vd-nav-item--shakespeare .vd-nav-item-icon {
-  color: #56bad6;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item {
+  width: 100%;
+  height: 75px;
 }
-.vd-sidebar-tabs .vd-nav-item--shakespeare.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--shakespeare.vd-nav-item--pending {
-  border-color: #56bad6;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item--active::before {
+  content: none;
 }
-.vd-sidebar-tabs .vd-nav-item--downy .vd-nav-item-icon {
-  color: #70b8d3;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-action {
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
 }
-.vd-sidebar-tabs .vd-nav-item--downy.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--downy.vd-nav-item--pending {
-  border-color: #70b8d3;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon {
+  width: auto;
+  padding-left: 0;
+  padding-right: 0;
 }
-.vd-sidebar-tabs .vd-nav-item--fern .vd-nav-item-icon {
-  color: #65b479;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-label {
+  font-size: 12px;
+  font-weight: 700;
 }
-.vd-sidebar-tabs .vd-nav-item--fern.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--fern.vd-nav-item--pending {
-  border-color: #65b479;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-divider,
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-sidebar-expander,
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon--new {
+  display: none;
 }
-.vd-sidebar-tabs .vd-nav-item--fiord .vd-nav-item-icon {
-  color: #4b576e;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer {
+  width: 155px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
-.vd-sidebar-tabs .vd-nav-item--fiord.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--fiord.vd-nav-item--pending {
-  border-color: #4b576e;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item {
+  font-weight: 700;
 }
-.vd-sidebar-tabs .vd-nav-item--rob-roy .vd-nav-item-icon {
-  color: #ebc381;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item--active::before {
+  content: none;
 }
-.vd-sidebar-tabs .vd-nav-item--rob-roy.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--rob-roy.vd-nav-item--pending {
-  border-color: #ebc381;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item-action {
+  padding: 20px 10px;
 }
-.vd-sidebar-tabs .vd-nav-item--terracotta .vd-nav-item-icon {
-  color: #e57d66;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item-label {
+  font-size: 14px;
 }
-.vd-sidebar-tabs .vd-nav-item--terracotta.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--terracotta.vd-nav-item--pending {
-  border-color: #e57d66;
+
+.nv-topnav-container:not(.vd-sidebar--new) .vd-logo {
+  padding-left: 34px;
 }
-.vd-sidebar-tabs .vd-nav-item--wistera .vd-nav-item-icon {
-  color: #965fb0;
+
+.vd-sidebar.vd-sidebar--new .vd-sidebar-tabs .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
+  display: none;
 }
-.vd-sidebar-tabs .vd-nav-item--wistera.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--wistera.vd-nav-item--pending {
-  border-color: #965fb0;
+.vd-sidebar.vd-sidebar--new .vd-sidebar-expander,
+.vd-sidebar.vd-sidebar--new .vd-nav-item-icon--new {
+  display: block !important;
 }
 
 .vd-splash-fullscreen-container {
@@ -5632,46 +5839,66 @@ table {
 .vd-table td {
   vertical-align: middle;
 }
-.vd-table td, .vd-table th {
+.vd-table td,
+.vd-table th {
   padding: 20px 40px;
   position: relative;
   white-space: normal;
   word-break: break-word;
 }
-.vd-table td.vd-tight, .vd-table th.vd-tight {
+.vd-table td.vd-tight,
+.vd-table th.vd-tight {
   white-space: nowrap;
   width: 1%;
 }
-.vd-table td.vd-truncate, .vd-table td.vd-truncate *, .vd-table th.vd-truncate, .vd-table th.vd-truncate * {
+.vd-table td.vd-truncate,
+.vd-table td.vd-truncate *,
+.vd-table th.vd-truncate,
+.vd-table th.vd-truncate * {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
-.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-l, .vd-table th.vd-sml-pad-h, .vd-table th.vd-sml-pad-l {
+.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-l,
+.vd-table th.vd-sml-pad-h,
+.vd-table th.vd-sml-pad-l {
   padding-left: 8px;
 }
-.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-r, .vd-table th.vd-sml-pad-h, .vd-table th.vd-sml-pad-r {
+.vd-table td.vd-sml-pad-h, .vd-table td.vd-sml-pad-r,
+.vd-table th.vd-sml-pad-h,
+.vd-table th.vd-sml-pad-r {
   padding-right: 8px;
 }
-.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-l, .vd-table th.vd-no-pad-h, .vd-table th.vd-no-pad-l {
+.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-l,
+.vd-table th.vd-no-pad-h,
+.vd-table th.vd-no-pad-l {
   padding-left: 0;
 }
-.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-r, .vd-table th.vd-no-pad-h, .vd-table th.vd-no-pad-r {
+.vd-table td.vd-no-pad-h, .vd-table td.vd-no-pad-r,
+.vd-table th.vd-no-pad-h,
+.vd-table th.vd-no-pad-r {
   padding-right: 0;
 }
-.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-b, .vd-table th.vd-no-pad-v, .vd-table th.vd-no-pad-b {
+.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-b,
+.vd-table th.vd-no-pad-v,
+.vd-table th.vd-no-pad-b {
   padding-bottom: 0;
 }
-.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-t, .vd-table th.vd-no-pad-v, .vd-table th.vd-no-pad-t {
+.vd-table td.vd-no-pad-v, .vd-table td.vd-no-pad-t,
+.vd-table th.vd-no-pad-v,
+.vd-table th.vd-no-pad-t {
   padding-top: 0;
 }
-.vd-table td.vd-valign-t, .vd-table th.vd-valign-t {
+.vd-table td.vd-valign-t,
+.vd-table th.vd-valign-t {
   vertical-align: top;
 }
-.vd-table td.vd-valign-m, .vd-table th.vd-valign-m {
+.vd-table td.vd-valign-m,
+.vd-table th.vd-valign-m {
   vertical-align: middle;
 }
-.vd-table td.vd-valign-b, .vd-table th.vd-valign-b {
+.vd-table td.vd-valign-b,
+.vd-table th.vd-valign-b {
   vertical-align: bottom;
 }
 .vd-table.vd-table--data {
@@ -5900,7 +6127,7 @@ table {
   height: 100%;
 }
 .vd-topbar .vd-logo {
-  padding-left: 34px;
+  padding-left: 23px;
 }
 
 @media only screen and (max-width: 480px) {
@@ -6882,105 +7109,6 @@ td.vd-hide-print {
     display: none;
   }
 }
-.vd-sidebar:empty {
-  display: none;
-}
-
-.nv-sidenav {
-  transform: translateX(0);
-  transition: transform 0.2s ease-in-out;
-  display: block;
-  height: calc(100% - 50px);
-  z-index: 200;
-}
-.nv-sidenav .nv-sidenav-modal-close {
-  display: none;
-  top: 10px;
-  right: -60px;
-}
-.nv-sidenav .vd-sidebar-tabs {
-  box-shadow: none;
-  height: auto;
-}
-.nv-sidenav .vd-sidebar-drawer {
-  border-right: none;
-  height: auto;
-}
-@media print {
-  .nv-sidenav {
-    display: none;
-  }
-}
-@supports (height: min-content) {
-  .nv-sidenav .vd-sidebar-tabs,
-.nv-sidenav .vd-sidebar-drawer {
-    height: min-content;
-  }
-}
-@media only screen and (max-width: 1200px) {
-  .nv-sidenav {
-    z-index: 302;
-  }
-}
-
-.nv-sidenav-content {
-  background: linear-gradient(to right, var(--vd-colour--nav-side-tabs) 0, var(--vd-colour--nav-side-tabs) 85px, var(--vd-colour--nav-side-drawer) 85px, var(--vd-colour--nav-side-drawer) 145px);
-  width: auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-  display: flex;
-  box-shadow: 1px 0 0 0 var(--vd-colour--framing);
-}
-
-.nv-sidenav--pad-drawer {
-  padding-right: 145px;
-}
-
-.nv-display-sidenav-modal .nv-sidenav {
-  z-index: 411;
-}
-.nv-display-sidenav-modal .nv-sidenav .nv-sidenav-modal-close {
-  display: flex;
-}
-
-@media only screen and (max-width: 1200px) {
-  .nv-sidenav {
-    position: absolute;
-    left: 0;
-    height: 100%;
-    transform: translateX(calc(-100% - 1px));
-  }
-  .nv-sidenav .nv-sidenav-content {
-    background: linear-gradient(to right, var(--vd-colour--nav-side-tabs) 0, var(--vd-colour--nav-side-tabs) 85px, var(--vd-colour--nav-side-drawer) 85px, var(--vd-colour--nav-side-drawer) 145px);
-  }
-  .nv-sidenav .vd-sidebar-tabs {
-    width: 85px;
-  }
-  .nv-sidenav .vd-sidebar-drawer {
-    width: 145px;
-  }
-
-  .nv-display-sidenav-modal .nv-sidenav {
-    transform: translateX(0);
-  }
-
-  .nv-sidenav--pad-drawer {
-    padding-right: 0;
-  }
-}
-@media only screen and (min-width: 1201px) {
-  .nv-sidenav--no-drawer {
-    width: 85px;
-  }
-
-  .nv-display-sidenav-modal .nv-sidenav--no-drawer .nv-sidenav-content {
-    position: absolute;
-  }
-  .nv-display-sidenav-modal .nv-sidenav--no-drawer .nv-sidenav-modal-close {
-    right: -205px;
-  }
-}
 .nv-account-banner {
   display: block;
 }
@@ -7264,21 +7392,21 @@ td.vd-hide-print {
 }
 .vd-bar-chart-container .y.axis text {
   font-size: 14px;
-  fill: #76A27B;
+  fill: #76a27b;
 }
 .vd-bar-chart-container .bar {
-  fill: #009D12;
+  fill: #009d12;
   opacity: 0.15;
 }
 .vd-bar-chart-container .top {
-  fill: #009D12;
+  fill: #009d12;
 }
 .vd-bar-chart-container .bar-label {
   font-size: 13px;
   fill: #959595;
 }
 .vd-bar-chart-container .bar-chart-background {
-  fill: #F2F2F2;
+  fill: #f2f2f2;
 }
 
 .vd-currency-input-container {
@@ -7613,10 +7741,14 @@ td.vd-hide-print {
 
 /* stylelint-disable vend/use-colour-function */
 /* stylelint-enable vend/use-colour-function */
-.vd-line-graph-container .vd-grid.vd-y .domain, .vd-line-graph-container .vd-axis.vd-y .domain, .vd-line-graph-container .vd-axis.vd-x .domain {
+.vd-line-graph-container .vd-grid.vd-y .domain,
+.vd-line-graph-container .vd-axis.vd-y .domain,
+.vd-line-graph-container .vd-axis.vd-x .domain {
   display: none;
 }
-.vd-line-graph-container .vd-grid.vd-y .tick line, .vd-line-graph-container .vd-axis.vd-y .tick line, .vd-line-graph-container .vd-axis.vd-x .tick line {
+.vd-line-graph-container .vd-grid.vd-y .tick line,
+.vd-line-graph-container .vd-axis.vd-y .tick line,
+.vd-line-graph-container .vd-axis.vd-x .tick line {
   stroke: var(--vd-colour--framing);
   stroke-width: 1px;
   fill: transparent;
@@ -7639,10 +7771,10 @@ td.vd-hide-print {
 .vd-line-graph-container .vd-line-with-fill {
   fill: transparent;
   stroke-width: 2px;
-  stroke: #009D12;
+  stroke: #009d12;
 }
 .vd-line-graph-container .vd-line-fill {
-  fill: #009D12;
+  fill: #009d12;
   opacity: 0.1;
   stroke-width: 0;
 }
@@ -7652,7 +7784,7 @@ td.vd-hide-print {
   stroke-width: 2px;
 }
 .vd-line-graph-container .vd-plot-point-with-fill {
-  fill: #009D12;
+  fill: #009d12;
   stroke: #fff;
 }
 .vd-line-graph-container .vd-plot-point-hidden {
@@ -7786,14 +7918,20 @@ td.vd-hide-print {
 .vd-modal-inner-container > .vd-g-row {
   width: 100%;
 }
-.vd-modal-inner-container .vd-breadcrumb, .vd-modal-inner-container .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content, .vd-modal-inner-container .vd-dialog-actions {
+.vd-modal-inner-container .vd-breadcrumb,
+.vd-modal-inner-container .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content,
+.vd-modal-inner-container .vd-dialog-actions {
   margin-left: var(--vd-dialog-spacing);
   margin-right: var(--vd-dialog-spacing);
 }
-.vd-modal-inner-container .vd-breadcrumb:first-child, .vd-modal-inner-container .vd-dialog-header:first-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:first-child, .vd-modal-inner-container .vd-dialog-actions:first-child {
+.vd-modal-inner-container .vd-breadcrumb:first-child,
+.vd-modal-inner-container .vd-dialog-header:first-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:first-child,
+.vd-modal-inner-container .vd-dialog-actions:first-child {
   margin-top: var(--vd-dialog-spacing);
 }
-.vd-modal-inner-container .vd-breadcrumb:last-child, .vd-modal-inner-container .vd-dialog-header:last-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:last-child, .vd-modal-inner-container .vd-dialog-actions:last-child {
+.vd-modal-inner-container .vd-breadcrumb:last-child,
+.vd-modal-inner-container .vd-dialog-header:last-child, .vd-modal-container:not(.vd-modal--size-full-screen) .vd-modal-inner-container .vd-modal-content:last-child,
+.vd-modal-inner-container .vd-dialog-actions:last-child {
   margin-bottom: var(--vd-dialog-spacing);
 }
 .vd-modal-inner-container .vd-breadcrumb + .vd-dialog-header, .vd-modal-inner-container .vd-breadcrumb + .vd-modal-content, .vd-modal-inner-container .vd-breadcrumb + .vd-dialog-actions {
@@ -7927,7 +8065,8 @@ td.vd-hide-print {
   padding-right: 0;
   padding-left: 6px;
 }
-.vd-table-list-cell--toggle + .vd-table-list-cell, .vd-table-list-cell--toggle + .vd-table-list-head-cell {
+.vd-table-list-cell--toggle + .vd-table-list-cell,
+.vd-table-list-cell--toggle + .vd-table-list-head-cell {
   padding-left: 0;
 }
 .vd-table-list-cell--toggle .vd-table-list-toggle-icon {
@@ -7989,6 +8128,9 @@ td.vd-hide-print {
 .vd-table-list-row {
   border-bottom: 1px solid var(--vd-colour--framing);
 }
+.vd-table-list-row.vd-table-list-row--active {
+  background-color: var(--vd-colour--go-highlight);
+}
 
 .vd-table-list-row--expandable:hover {
   cursor: pointer;