@lightspeed/design-system-css 0.1.0

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

@@ -0,0 +1,112 @@
+.nv-topnav {
+  position: relative;
+  width: 100%;
+
+  @media print {
+    display: none;
+  }
+}
+
+.nv-topnav-title--banner {
+  justify-content: center;
+  flex: 1;
+
+  @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
+    flex: initial;
+  }
+}
+
+.nv-topnav-header {
+  min-width: 0;
+  flex: 1;
+
+  @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
+    &.nv-topnav-header--mobile {
+      flex: initial;
+    }
+  }
+
+  .vd-nav-item-label {
+    font-size: $nv-header-font-size;
+    font-weight: $vd-font-weight--bold;
+    max-width: none;
+  }
+
+  .vd-nav-item-action {
+    display: inline-flex;
+    width: auto;
+    max-width: 100%;
+  }
+
+  .vd-nav-item-icon {
+    font-size: $nv-header-logo-font-size;
+  }
+
+  // Disabled states for main header
+  &.vd-nav-item--disabled {
+    .vd-nav-item-action {
+      opacity: 1;
+    }
+
+    .vd-nav-item-icon {
+      opacity: $vd-topbar-item-default-opactiy;
+    }
+  }
+
+  &.nv-topnav-header--mobile {
+    display: none;
+  }
+}
+
+.nv-topnav-content {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  align-self: flex-end;
+  margin-left: auto;
+  flex: 1;
+
+  @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
+    flex: initial;
+  }
+}
+
+// ========= Disabled States ========= //
+
+.nv-topnav--offline {
+  @include nv-striped-background($nv-topnav-offline-colour);
+}
+
+.nv-topnav--training {
+  @include nv-striped-background($nv-topnav-training-colour);
+}
+
+// ========= Responsive Breakpoint Styles ========= //
+
+@include vd-viewport-media-max ($vd-breakpoint-large) {
+  .nv-topnav-header {
+    display: none;
+
+    &.nv-topnav-header--mobile {
+      display: flex;
+      position: relative;
+
+      @include nv-topnav-status-icon(vd-colour(no)) {
+        left: 33px;
+        top: 10px;
+      }
+
+      // Highlight an error within the current sidebar drawer
+      &.nv-topnav-header--nav-error {
+        &::after {
+          transform: scale(1);
+        }
+      }
+
+      .vd-nav-item-icon {
+        font-size: $nv-header-logo-font-size--mobile;
+      }
+    }
+  }
+}

package/src/vend.ui/styles/navi/_nv-user-sale-data.scss

@@ -0,0 +1,14 @@
+.nv-user-sale-data-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.nv-user-sale-data-heading {
+  font-weight: $vd-font-weight--bold;
+}
+
+.nv-user-sale-data-total {
+  font-size: vd-text-size(sub-heading);
+  font-weight: vd-text-weight(sub-heading);
+  text-align: right;
+}

package/src/vend.ui/styles/navi/dialogs/_nv-dialog-drawer.scss

@@ -0,0 +1,44 @@
+.nv-dialog-drawer-top-banner {
+  background: $vd-topbar-background-color;
+  height: $vd-topbar-height;
+  padding: 0;
+  color: $vd-topbar-font-color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  font-family: $vd-font-lato;
+  font-size: vd-text-size(sub-heading);
+}
+
+.nv-dialog-drawer-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  font-family: $vd-font-lato;
+}
+
+.nv-dialog-drawer-highlight-icon {
+  color: vd-colour(supplementary--text);
+  text-align: center;
+  font-size: 32px;
+  display: block;
+}
+
+.nv-dialog-drawer-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: auto;
+}
+
+.nv-dialog-drawer-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.nv-dialog-drawer-footer {
+  background: vd-colour(background);
+}

package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss

@@ -0,0 +1,85 @@
+.nv-notifications--retrieving {
+  text-align: center;
+  margin-top: $nv-notifications-list-spacing;
+}
+
+.nv-notifications-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: calc(100vh - #{$vd-topbar-height})
+}
+
+.nv-notifications-list-item {
+  padding: $nv-notifications-list-spacing;
+  padding-left: $nv-notifications-list-spacing * 2;
+  font-size: vd-text-size(body);
+  border-bottom: vd-border(framing);
+  line-height: $nv-notifications-item-line-height;
+  flex-shrink: 0;
+
+  &.nv-notifications-list-item--read {
+    background-color: vd-colour(box);
+  }
+
+  &.nv-notifications-list-item--unread {
+    background-color: vd-colour(background);
+  }
+}
+
+.nv-notifications-list-item-about {
+  position: relative;
+  word-wrap: break-word;
+
+  &:before {
+    content:'';
+    width: 8px;
+    height: 8px;
+    box-sizing: content-box;
+
+    color: vd-colour(keyline);
+
+    border: 1px solid currentColor;
+    background-color: currentColor;
+    border-radius: 50%;
+
+    display: block;
+
+    position: absolute;
+    top: $nv-notifications-list-spacing / 2;
+    left: -$nv-notifications-list-spacing;
+
+    .nv-notifications-list-item--read & {
+      background-color: transparent;
+    }
+
+    .nv-notifications-list-item--unread & {
+      color: vd-colour(do);
+    }
+  }
+}
+
+.nv-notifications-list-item-action {
+  font-size: vd-text-size(body);
+  margin-top: 20px;
+  display: inline-block;
+}
+
+.nv-notifications-message-header {
+  font-size: vd-text-size(sub-heading);
+}
+
+.nv-notifications-message-img {
+  max-width: 100%;
+}
+
+.nv-dialog-drawer-content--empty {
+  padding: $nv-notifications-list-spacing;
+  justify-content: center;
+  align-items: center;
+
+  // Reset the justification at a set max height so content can be fully scrolled
+  @media only screen and (max-height: $nv-notifications-content-empty-flex-start-height) {
+    justify-content: flex-start;
+  }
+}

package/src/vend.ui/styles/navi/dialogs/_nv-user-dialog.scss

@@ -0,0 +1,44 @@
+$nv-user-dialog-section-border: vd-border(keyline);
+
+.nv-user-switch-button {
+  width: 100%;
+  margin: 0;
+  transform: translateY(-50%);
+}
+
+.nv-user-dialog-current-user {
+  background: vd-colour(background);
+  color: vd-colour(text);
+  border-bottom: $nv-user-dialog-section-border;
+  line-height: initial;
+}
+
+.nv-user-dialog-current-user--with-switch-user-button {
+  padding-top: 0;
+}
+
+.nv-user-display-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.nv-user-account-type {
+  text-transform: capitalize;
+  margin-right: 10px;
+  font-weight: $vd-font-weight--bold;
+}
+
+.nv-user-account-email {
+  word-wrap: break-word;
+  overflow: hidden;
+  color: vd-colour(text);
+}
+
+.nv-user-dialog-outlet-info {
+  font-weight: $vd-font-weight--bold;
+}
+
+.nv-user-dialog-content-section {
+  border-bottom: $nv-user-dialog-section-border;
+}

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

@@ -0,0 +1,12 @@
+// Modules
+@import "nv-topnav";
+@import "nv-topnav-title";
+@import "nv-sidenav";
+@import "nv-account-banner";
+@import "nv-notifications-item";
+@import "nv-user-sale-data";
+
+// Dialogs
+@import "dialogs/nv-dialog-drawer";
+@import "dialogs/nv-notifications-dialog";
+@import "dialogs/nv-user-dialog";

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

@@ -0,0 +1,48 @@
+//
+// Generates a striped background with the stripes slanted at 60 deg and alternating between the given color and a
+// darkened equivalent. Stripes are 15px wide.
+//
+@mixin nv-striped-background ($color) {
+  background: repeating-linear-gradient(-60deg,
+    darken($color, 3),
+    darken($color, 3) 15px,
+    $color 15px,
+    $color 30px);
+}
+
+@mixin nv-topnav-status-icon ($_vd-icon-color: vd-colour(do)) {
+  &::after {
+    content: '';
+    transform: scale(0);
+    opacity: 1;
+
+    position: absolute;
+    height: 10px;
+    width: 10px;
+
+    box-sizing: content-box;
+    background-color: $_vd-icon-color;
+    border: 3px solid $vd-topbar-background-color;
+    border-radius: 50%;
+
+    transition: transform 0.2s ease 0s;
+
+    pointer-events: none;
+
+    @content;
+  }
+
+  // When either offline or training mode is triggered, the border of the status icon needs to match the new
+  // backround color
+  .nv-topnav--offline & {
+    &::after {
+      border-color: $nv-topnav-offline-colour;
+    }
+  }
+
+  .nv-topnav--training & {
+    &::after {
+      border-color: $nv-topnav-training-colour;
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+// Top Navigation
+
+$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;
+$nv-notifications-item-line-height: 18px;
+$nv-notifications-content-empty-flex-start-height: 500px;
+
+// Navigation Colours
+$nv-topnav-offline-colour: $vd-colour-charcoal-60;
+$nv-topnav-training-colour: $vd-colour-blue-60;

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

@@ -0,0 +1,98 @@
+// Non styles
+@import 'global/non-styles';
+
+// Base styles
+@import 'global/colour/themes/css-var-theme-generator';
+@import 'global/normalise';
+@import 'global/text/text-helpers';
+@import 'global/colour/colour-helpers';
+@import 'global/placeholders';
+@import 'global/effects/effects';
+
+// Viewport Identifier
+@import 'global/viewport/viewport-identifier';
+
+// Responsive Grid
+@import '../components/vd-grid/vd-grid';
+
+// Behaviours
+@import '../behaviours/vd-align/vd-align';
+
+// Common Components
+@import '../components/vd-select/vd-select';
+@import '../components/vd-input/vd-input';
+
+// Components
+@import '../components/vd-autocomplete/vd-autocomplete';
+@import '../components/vd-autocomplete-filter/vd-autocomplete-filter';
+@import '../components/vd-action-bar/vd-action-bar';
+@import '../components/vd-avatar/vd-avatar';
+@import '../components/vd-avatar-multi/vd-avatar-multi';
+@import '../components/vd-banner/vd-banner';
+@import '../components/vd-bg/vd-bg';
+@import '../components/vd-body/vd-body';
+@import '../components/vd-btn/vd-btn';
+@import '../components/vd-card/vd-card';
+@import '../components/vd-carousel/vd-carousel';
+@import '../components/vd-checkbox/vd-checkbox';
+@import '../components/vd-datepicker/vd-datepicker';
+@import '../components/vd-dialog/vd-dialog';
+@import '../components/vd-dialog-close/vd-dialog-close';
+@import '../components/vd-dialog-drawer/vd-dialog-drawer';
+@import '../components/vd-dott/vd-dott';
+@import '../components/vd-dropdown/vd-dropdown';
+@import '../components/vd-expandable/vd-expandable';
+@import '../components/vd-feedback/vd-feedback';
+@import '../components/vd-field/vd-field';
+@import '../components/vd-fieldset/vd-fieldset';
+@import '../components/vd-flag/vd-flag';
+@import '../components/vd-flex/vd-flex';
+@import '../components/vd-header/vd-header';
+@import '../components/vd-hero/vd-hero';
+@import '../components/vd-hr/vd-hr';
+@import '../components/vd-input-char-limit/vd-input-char-limit';
+@import '../components/vd-in-page-help/vd-in-page-help';
+@import '../components/vd-link/vd-link';
+@import '../components/vd-lozenge/vd-lozenge';
+@import '../components/vd-lozenge-group/vd-lozenge-group';
+@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-item/vd-nav-item';
+@import '../components/vd-overlay/vd-overlay';
+@import '../components/vd-p/vd-p';
+@import '../components/vd-panel/vd-panel';
+@import '../components/vd-popover/vd-popover';
+@import '../components/vd-multiselect-popover/vd-multiselect-popover';
+@import '../components/vd-popover-list/vd-popover-list';
+@import '../components/vd-promo/vd-promo';
+@import '../components/vd-radio/vd-radio';
+@import '../components/vd-scrollable/vd-scrollable';
+@import '../components/vd-section/vd-section';
+@import '../components/vd-section-back/vd-section-back';
+@import '../components/vd-segcontrol/vd-segcontrol';
+@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-splash/vd-splash';
+@import '../components/vd-status-icon/vd-status-icon';
+@import '../components/vd-suggestion/vd-suggestion-list';
+@import '../components/vd-switch/vd-switch';
+@import '../components/vd-tabs/vd-tabs';
+@import '../components/vd-table/vd-table';
+@import '../components/vd-text/vd-text';
+@import '../components/vd-toast-notification/vd-toast-notification';
+@import '../components/vd-tooltip/vd-tooltip';
+@import '../components/vd-topbar/vd-topbar';
+@import '../components/vd-visibility/vd-visibility';
+@import '../components/vd-next-stepper/vd-next-stepper';
+@import '../components/vd-settings/vd-settings';
+@import '../components/vd-save/vd-save';
+@import '../components/vd-badges/vd-badges';
+
+// Must be last items in the style sheet
+@import 'global/spacing/spacing-helpers';
+
+// Navi styles
+// !! NOTE: Please keep @import navi styles AT THE BOTTOM to avoid nav UI issue
+@import 'navi/navi';