@lightspeed/design-system-css 0.1.0

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

@@ -0,0 +1,10 @@
+.vd-sidebar {
+  display: flex;
+  position: relative;
+
+  flex-shrink: 0;
+  height: calc(100% - #{$vd-topbar-height});
+  box-sizing: border-box;
+  font-family: $vd-font-primary;
+  line-height: normal;
+}

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

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

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

@@ -0,0 +1,47 @@
+.vd-sidebar-drawer {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: $vd-sidebar-drawer-desktop-width;
+  height: 100%;
+  background-color: $vd-sidebar-drawer-background-color;
+  border-right: 1px solid vd-colour(framing);
+  box-sizing: border-box;
+
+  .vd-nav-item {
+    width: 100%;
+    height: auto;
+    color: vd-colour(text);
+    font-weight: $vd-font-weight--bold;
+
+    &:hover {
+      background: vd-colour(go-highlight);
+    }
+  }
+
+  .vd-nav-item-action {
+    padding: $vd-sidebar-drawer-item-padding-y $vd-sidebar-drawer-item-padding-x;
+  }
+
+  .vd-nav-item--active {
+    color: vd-colour(go);
+  }
+
+  .vd-nav-item--pending {
+    color: vd-colour(supplementary--text);
+  }
+
+  // @todo Make this a mixin for all disabled things.
+  .vd-nav-item--disabled {
+    opacity: 0.35;
+    filter: grayscale(100%);
+
+    &:hover {
+      background-color: inherit;
+    }
+  }
+
+  .vd-nav-item-label {
+    font-size: $vd-sidebar-drawer-item-font-size;
+  }
+}

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

@@ -0,0 +1,15 @@
+$vd-sidebar-tabs-background-color: vd-colour(nav-side-tabs);
+
+$vd-sidebar-tabs-desktop-width: 85px;
+
+$vd-sidebar-tab-height: 75px !default;
+$vd-sidebar-tab-font-colour: vd-colour(text) !default;
+$vd-sidebar-tab-font-size: 12px !default;
+$vd-sidebar-tab-icon-font-size: 20px !default;
+
+$vd-sidebar-tab-active-bg-colour: vd-colour(text) !default;
+$vd-sidebar-tab-active-border-width: 6px !default;
+
+$vd-sidebar-tab-chevron-position-top: 25px;
+$vd-sidebar-tab-chevron-position-right: 8px;
+$vd-sidebar-tab-chevron-opacity: 0.4;

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

@@ -0,0 +1,73 @@
+.vd-sidebar-tabs {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  z-index: $vd-z-index-content-base + 1;
+
+  box-sizing: border-box;
+  width: $vd-sidebar-tabs-desktop-width;
+  height: 100%;
+
+  background-color: $vd-sidebar-tabs-background-color;
+
+  font-size: $vd-sidebar-tab-font-size;
+  color: vd-colour(text);
+
+  .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;
+    }
+
+    &: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);
+  }
+
+  .vd-nav-item--disabled {
+    opacity: 0.35;
+    filter: grayscale(100%);
+
+    &:hover {
+      background-color: inherit;
+    }
+  }
+
+  .vd-nav-item-label {
+    font-weight: $vd-font-weight--bold;
+  }
+
+  .vd-nav-item-icon {
+    font-size: $vd-sidebar-tab-icon-font-size;
+  }
+
+  @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; }
+
+      &.vd-nav-item--active,
+      &.vd-nav-item--pending {
+        border-color: $_vd-nav-colour;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+.vd-splash-fullscreen-container {
+  border: 20px solid $vd-colour-overlay;
+  box-sizing: border-box;
+  display: block;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  @include vd-viewport-media-max(xsmall) {
+    border-width: 10px;
+  }
+}
+
+.vd-splash-fullscreen {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: vd-colour(box);
+  overflow: auto;
+  @include vd-fade-in;
+
+  .vd-dialog-close {
+    top: 10px;
+    right: 20px;
+    z-index: $vd-z-index-content-base;
+  }
+}
+
+.vd-splash-fullscreen-content {
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  padding: vd-grid-unit(5);
+}
+
+.vd-scrollable-container .vd-splash-fullscreen-content {
+  padding: 0;
+  height: 100%;
+}
+
+.vd-splash-fullscreen-content .vd-scrollable-container .vd-scrollable {
+  padding: vd-grid-unit(5); // put the padding on the scrollable container instead
+}

package/src/vend.ui/components/vd-status-icon/vd-status-icon-ns.scss

@@ -0,0 +1 @@
+$vd-status-icon-size: 8px;

package/src/vend.ui/components/vd-status-icon/vd-status-icon.scss

@@ -0,0 +1,12 @@
+.vd-status-icon {
+  border-radius: 50%;
+  background-color: vd-colour(do);
+  width: $vd-status-icon-size;
+  height: $vd-status-icon-size;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.vd-status-icon--negative {
+  background-color: vd-colour(no);
+}

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

@@ -0,0 +1,5 @@
+@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-suggestion/vd-suggestion-list.scss

@@ -0,0 +1,76 @@
+.vd-suggestions-popover {
+  .vd-popover-content {
+    // There is a bug in Safari where max-height is broken when used with flex-direction: column. As a workaround we
+    // set the flex-direction to row and set .vd-suggestion-list-container to width:100%.
+    // See https://github.com/philipwalton/flexbugs/issues/188 for more details.
+    flex-direction: row;
+
+    // Prevent default scroll setting
+    overflow-y: hidden;
+  }
+}
+
+.vd-suggestion-badge {
+  margin-top: -$vd-id-badge-spacing-sm;
+  margin-bottom: -$vd-id-badge-spacing-sm;
+}
+
+.vd-suggestion-list-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .vd-scrollable-goatee {
+    bottom: $vd-suggestion-list-footer-height;
+  }
+
+  .vd-suggestion-list--with-footer {
+    .vd-scrollable {
+      padding-bottom: $vd-suggestion-list-footer-height;
+    }
+  }
+}
+
+.vd-suggestion--footer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: $vd-suggestion-list-footer-height;
+  box-sizing: border-box;
+  background-color: vd-colour(box);
+  border-top: vd-border(framing);
+}
+
+.vd-suggestion-query-container {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.vd-suggestion-query-container--center {
+  justify-content: center;
+}
+
+.vd-suggestion-query {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.vd-suggestion--footer-clear {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.vd-suggestion-clear {
+  margin-right: -$vd-popover-list-item-spacing !important;
+
+  &.vd-suggestion-clear--active {
+    color: vd-colour(text-action);
+    background-color: vd-colour(supplementary-lighter);
+  }
+}

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

@@ -0,0 +1,8 @@
+$trackWidthBig: vd-grid-unit(17);
+$trackHeightBig: vd-grid-unit(9);
+
+$trackWidthSmall: vd-grid-unit(13);
+$trackHeightSmall: vd-grid-unit(7);
+
+$knobWidthBig: $trackHeightBig;
+$knobWidthSmall: $trackHeightSmall;

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

@@ -0,0 +1,117 @@
+.vd-switch {
+  display: inline-block;
+  position: relative;
+}
+
+.vd-switch-input {
+  @extend %vd-invisible-checkbox-input;
+
+  @include vd-btn-disabled();
+
+  &:disabled {
+    opacity: 0;
+  }
+}
+
+.vd-switch-track {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: $trackWidthBig;
+  height: $trackHeightBig;
+  border-radius: vd-grid-unit(9);
+  box-sizing: border-box;
+  border: 2px solid vd-colour(do);
+  background-color: vd-colour(box);
+  transition: background-color $vd-time-m ease-in-out;
+
+  .vd-switch--small & {
+    width: $trackWidthSmall;
+    height: $trackHeightSmall;
+  }
+}
+
+.vd-switch-icon {
+  box-sizing: border-box;
+  display: inline-block;
+  position: absolute;
+  color: vd-colour(text-action);
+  top: 8px;
+  left: 10px;
+  opacity: 0;
+  transition: opacity $vd-time-m ease-in-out;
+
+  .vd-switch--small & {
+    top: 6px;
+    left: 7px;
+    font-size: vd-text-size(supplementary);
+  }
+}
+
+.vd-cross-icon {
+  box-sizing: border-box;
+  display: inline-block;
+  position: absolute;
+  top: 8px;
+  left: 41px;
+  color: vd-colour(do);
+  opacity: 1;
+  transition: opacity 0.54s ease-in-out;
+
+  .vd-switch--small & {
+    top: 6px;
+    left: 31px;
+    font-size: vd-text-size(supplementary);
+  }
+}
+
+.vd-switch-track-knob {
+  float: left;
+  border-radius: inherit;
+  box-sizing: border-box;
+  border: 2px solid vd-colour(do);
+  background-color: vd-colour(box);
+  pointer-events: none;
+  width: $knobWidthBig;
+  height: $knobWidthBig;
+  margin-top: vd-grid-unit(-0.5);
+  margin-left: vd-grid-unit(-0.5);
+  transition: transform $vd-time-m cubic-bezier(0.54, 1.85, 0.5, 1);
+
+  .vd-switch--small & {
+    width: $knobWidthSmall;
+    height: $knobWidthSmall;
+  }
+}
+
+// Checked
+.vd-switch-input:checked + .vd-switch-track {
+  background-color: vd-colour(do);
+
+  .vd-switch-icon {
+    opacity: 1;
+  }
+
+  .vd-cross-icon {
+    opacity: 0;
+  }
+
+  .vd-switch-track-knob {
+    transform: translate3d($trackWidthBig - $knobWidthBig, 0, 0);
+
+    .vd-switch--small & {
+      transform: translate3d($trackWidthSmall - $knobWidthSmall, 0, 0);
+    }
+  }
+}
+
+// Focus
+.vd-switch-input:focus + .vd-switch-track {
+  box-shadow: 0 0 5px 2px vd-colour(go);
+}
+
+// Disabled
+.vd-switch-input:disabled + .vd-switch-track {
+  cursor: not-allowed;
+  @include disabled();
+}

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

@@ -0,0 +1,13 @@
+$vd-colour-table-tr-hover-background: vd-colour(go-highlight);
+$vd-colour-table-tr-error-background: vd-colour(no-highlight);
+$vd-colour-table-expanded-border-left: vd-colour(do);
+
+// Compact tables are deprecated, since subtext size has changed globally
+// we now have a local variable for compact tables until its replaced with normal tables
+// in all projects
+$vd-table-compact-font-size: 13px;
+
+// Expanded tables
+$vd-table-expanded-box-shadow-width: 4px;
+$vd-nested-reporting-table-container-offset: $vd-table-expanded-box-shadow-width - 1px;
+$vd-nested-reporting-table-indent-padding: 40px;

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

@@ -0,0 +1,251 @@
+table { border-collapse: collapse; }
+
+.vd-table {
+  width: 100%;
+  font-size: vd-text-size(body);
+  border: 0;
+
+  thead {
+    @include vd-text(label);
+
+    th {
+      text-align: left;
+      padding: vd-grid-unit(4) vd-grid-unit(10) vd-grid-unit(4);
+    }
+
+    tr { border-color: vd-colour(keyline); }
+  }
+
+  tr {
+    border-bottom: vd-border(framing);
+
+    .vd-clickable {
+      display: block;
+    }
+
+    &.vd-disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    // 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-error {
+      transition: background-color $vd-time-m ease-in-out;
+      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-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); }
+    }
+
+    &.vd-med-pad-b,
+    &.vd-med-pad-v {
+      td { padding-bottom: vd-grid-unit(2); }
+    }
+
+    &.vd-sml-pad-t,
+    &.vd-sml-pad-v {
+      td { padding-top: vd-grid-unit(1); }
+    }
+
+    &.vd-sml-pad-b,
+    &.vd-sml-pad-v {
+      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-expandable {
+      @include vd-hover-when-supported {
+        &:hover:not(.vd-expandable--nt) {
+          cursor: pointer;
+          background-color: $vd-colour-table-tr-hover-background;
+        }
+      }
+
+      & + tr:not(.vd-expandable),
+      &.vd-expandable--expanded {
+        background: vd-colour(box);
+
+        > td:first-child {
+          &::before {
+            content: '';
+            top: -1px;
+            left: 0;
+            width: $vd-table-expanded-box-shadow-width;
+            background-color: $vd-colour-table-expanded-border-left;
+            bottom: 0;
+            z-index: 1;
+            position: absolute;
+          }
+        }
+      }
+
+      & + tr:not(.vd-expandable) { display: none; }
+      &.vd-expandable--expanded + tr { display: table-row; }
+    }
+  }
+
+  td { vertical-align: middle; }
+
+  td, th {
+    padding: vd-grid-unit(5) vd-grid-unit(10);
+    position: relative;
+    white-space: normal;
+    word-break: break-word;
+
+    &.vd-tight {
+      white-space: nowrap;
+      width: 1%;
+    }
+
+    &.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-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); }
+  }
+}
+
+// Compact table
+// Note: Compact tables are deprecated
+.vd-table--compact {
+  thead {
+    th { padding: vd-grid-unit(4) vd-grid-unit(2); }
+  }
+
+  td {
+    padding: vd-grid-unit(4) vd-grid-unit(2);
+    font-size: $vd-table-compact-font-size;
+  }
+}
+
+.vd-table--fixed {
+  table-layout: fixed;
+
+  td {
+    white-space: normal;
+    word-break: break-word;
+  }
+}
+
+// Report table
+
+// Reset the td padding on nested report tables
+// 3px is to offset the expanded highlight bar
+.vd-table .vd-table-nested-report-container {
+  padding: 0 0 0 $vd-nested-reporting-table-container-offset;
+}
+
+// Reset the td padding on nested expanded tables
+// Used for tight alignment of nested tables
+.vd-table .vd-table-expanded-td-reset {
+  padding: 0 0 0 $vd-table-expanded-box-shadow-width;
+}
+
+.vd-table--report {
+  border: vd-border(framing);
+
+  > thead {
+    th {
+      padding: vd-grid-unit(4) vd-grid-unit(4);
+      background-color: vd-colour(box);
+    }
+
+    tr {
+      border: vd-border(framing);
+    }
+  }
+
+  // Limiting the selector to the first level of tr
+  // Doing this so if we have a nested table these styles would not apply
+  > tbody > tr {
+    border-bottom: none;
+
+    &:nth-child(odd) {
+      background-color: vd-colour(background);
+    }
+
+    &:nth-child(even) {
+      background-color: vd-colour(box);
+    }
+
+    > td {
+      padding: vd-grid-unit(4) vd-grid-unit(4);
+    }
+  }
+
+  > tfoot > tr > td {
+    padding: vd-grid-unit(4);
+  }
+
+  // Report table with expandable content
+  &.vd-table--expandable > tbody > tr {
+    &:nth-child(4n+3) {
+      background-color: vd-colour(box);
+    }
+  }
+
+  &.vd-table--report--nested {
+    &.vd-table {
+      margin-bottom: 0;
+    }
+
+    border-left: none;
+    border-right: none;
+
+    > tbody > tr {
+      &:nth-child(odd) {
+        background-color: vd-colour(background);
+      }
+
+      &:nth-child(even) {
+        background-color: vd-colour(box);
+      }
+    }
+
+    > tbody > tr > td:first-child {
+      padding-left: vd-grid-unit(4) - $vd-nested-reporting-table-container-offset;
+    }
+  }
+
+  &.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;
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+$vd-tab-font-size: 15px;
+$vd-tab-font-size--large: 18px;
+$vd-tab-spacing: 30px;