@lightspeed/design-system-css 4.0.0 → 5.1.0

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

@@ -1,121 +0,0 @@
-.nv-topnav-container {
-  width: 100%;
-}
-
-.nv-topnav-container--hidden {
-  display: none;
-}
-
-.nv-topnav {
-  position: relative;
-  width: 100%;
-  z-index: 1;
-
-  @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

@@ -1,14 +0,0 @@
-.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

@@ -1,44 +0,0 @@
-.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

@@ -1,85 +0,0 @@
-.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 * 0.5;
-    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

@@ -1,44 +0,0 @@
-$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

@@ -1,11 +0,0 @@
-// Modules
-@import 'nv-topnav';
-@import 'nv-topnav-title';
-@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

@@ -1,50 +0,0 @@
-//
-// 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

@@ -1,15 +0,0 @@
-// Top Navigation
-
-$nv-header-font-size: 15px;
-$nv-header-logo-font-size: 42px;
-$nv-header-logo-font-size--mobile: 24px;
-
-// 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;