@lightspeed/design-system-css 0.1.0

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

@@ -0,0 +1,76 @@
+@mixin vd-active-tab {
+  border-bottom-color: vd-colour(do);
+  color: vd-colour(do);
+}
+
+.vd-tabs {
+  display: block;
+  padding: 0;
+  margin: 0;
+  box-shadow: inset 0 -1px vd-colour(keyline);
+}
+
+.vd-tab {
+  display: inline-block;
+  color: var(--vd-colour--text);
+
+  & + .vd-tab {
+    margin-left: $vd-tab-spacing;
+  }
+
+  &.vd-tab--active .vd-tab-button {
+    @include vd-active-tab();
+  }
+
+  @include vd-hover-when-supported {
+    &:hover:not(.vd-tab--disabled) .vd-tab-button {
+      @include vd-active-tab()
+    }
+
+
+    &:hover:not(.vd-tab--active) .vd-tab-button {
+      cursor: pointer;
+    }
+  }
+
+  &.vd-tab--disabled .vd-tab-button {
+    @include disabled();
+
+    @include vd-hover-when-supported {
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.vd-tab-button {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  height: vd-grid-unit(12);
+  padding: 0;
+  border-bottom: 4px solid transparent;
+  color: inherit;
+  font-family: $vd-font-primary;
+  font-size: $vd-tab-font-size;
+  font-weight: $vd-font-weight--regular;
+  outline: none;
+  transition: background $vd-time-s;
+}
+
+// ========= Component Modifiers ========= //
+.vd-tabs--no-border {
+  box-shadow: none;
+}
+
+.vd-tabs--large {
+  .vd-tab {
+    .vd-tab-button {
+      font-size: $vd-tab-font-size--large;
+      border-bottom-width: 5px;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+.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--intro {
+  @include vd-text-intro;
+}
+
+// used when redering api data, honour line breaks so user entered data looks correct
+.vd-text--honour-line-break {
+  white-space: pre-line;
+}

package/src/vend.ui/components/vd-toast-notification/vd-toast-notification-ns.scss

@@ -0,0 +1,3 @@
+$vd-toast-notification-padding-v: vd-grid-unit(6);
+$vd-toast-notification-padding-h: vd-grid-unit(10);
+$vd-toast-notification-offset: vd-grid-unit(5);

package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss

@@ -0,0 +1,58 @@
+.vd-toast-notification-container {
+  @include vd-reset;
+
+  position: fixed;
+  right: 0;
+  left: 0;
+  top: 0;
+  z-index: $vd-toast-notification-z-index;
+
+  display: block;
+
+  opacity: 0;
+  transform: translateY(-100%);
+  transition: transform ease-in-out $vd-time-m, opacity ease-in-out $vd-time-m;
+  pointer-events: none;
+
+  &.vd-visible {
+    transform: translateY($vd-toast-notification-offset / 2);
+    opacity: 1;
+  }
+}
+
+.vd-toast-notification {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  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-h;
+
+  border-radius: $vd-border-radius;
+  box-sizing: border-box;
+  color: vd-colour(text-action);
+  text-align: center;
+
+  transition: opacity ease-in-out $vd-time-m;
+  pointer-events: auto;
+}
+
+.vd-toast-notification-dismiss {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: $vd-toast-notification-padding-h;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover { cursor: pointer; }
+}
+
+.vd-toast-notification--success  { background-color: vd-colour(success); }
+.vd-toast-notification--negative { background-color: vd-colour(no); }

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

@@ -0,0 +1 @@
+$vd-tooltip-spacing: 8px;

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

@@ -0,0 +1,15 @@
+.vd-popover--tooltip {
+  border-color: vd-colour(framing-inverse);
+  background-color: vd-colour(box-inverse);
+  color: vd-colour(text-inverse);
+
+  .vd-popover-content {
+    background-color: vd-colour(box-inverse);
+    padding: $vd-tooltip-spacing;
+  }
+
+  .vd-popover-beak {
+    background-color: vd-colour(box-inverse);
+    border-color: vd-colour(framing-inverse);
+  }
+}

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

@@ -0,0 +1,10 @@
+$vd-topbar-height: 50px;
+$vd-topbar-background-color: vd-colour(nav-top);
+
+$vd-topbar-font-size: 14px;
+$vd-topbar-font-color: vd-colour(text-nav);
+
+$vd-topbar-item-side-padding: vd-grid-unit(5);
+$vd-topbar-item-label-margin-left: 10px;
+$vd-topbar-item-default-opactiy: 0.5 !default;
+$vd-topbar-item-label-max-width: 150px;

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

@@ -0,0 +1,36 @@
+.vd-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  flex: 1 100%;
+  height: $vd-topbar-height;
+
+  box-sizing: border-box;
+  background-color: $vd-topbar-background-color;
+
+  font-family: $vd-font-primary;
+  font-size: $vd-topbar-font-size;
+  line-height: normal;
+  color: $vd-topbar-font-color;
+
+  .vd-nav-item-action {
+    padding: 0 $vd-topbar-item-side-padding;
+    opacity: $vd-topbar-item-default-opactiy;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .vd-nav-item-icon + .vd-nav-item-label {
+    margin-left: $vd-topbar-item-label-margin-left;
+  }
+
+  .vd-nav-item-label {
+    max-width: $vd-topbar-item-label-max-width;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}

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

@@ -0,0 +1,73 @@
+// Visibility Helpers
+// @todo inline visbility helper classes
+
+// Show all the things
+@mixin responsive-visibility($selector) {
+  #{$selector} {
+    display: block !important;
+  }
+  table#{$selector}  { display: table !important; }
+  tr#{$selector}     { display: table-row !important; }
+  th#{$selector},
+  td#{$selector}     { display: table-cell !important; }
+}
+
+@mixin responsive-invisibility($selector) {
+  #{$selector} {
+    display: none !important;
+  }
+
+  // When using table-layout:fixed with responsive tables where we may hide columns, just using display:none will leave
+  // us with less columns but subsequent expanded rows with colspan will still be referencing the original table column
+  // count. With this solution we set the visibility as collaped but the column count remains intact. Therefore all
+  // subsequent expanded rows will remain at the same table width.
+  th#{$selector},
+  td#{$selector} {
+    display: table-cell !important;
+    white-space: nowrap !important;
+    visibility: collapse !important;
+    width: 0 !important;
+  }
+}
+
+// Responsive Visibile Helpers
+@include vd-viewport-media-max(xsmall) {
+  @include responsive-visibility('.vd-show-mobile');
+}
+
+@include vd-viewport-media-max(small) {
+  @include responsive-visibility('.vd-show-tablet-portrait');
+}
+
+@include vd-viewport-media-max(small) {
+  @include responsive-visibility('.vd-show-tablet-landscape');
+}
+
+@include vd-viewport-media-max(large) {
+  @include responsive-visibility('.vd-show-desktop');
+}
+
+// Responsive Invisibility Helpers
+@include vd-viewport-media-max(xsmall) {
+  @include responsive-invisibility('.vd-hide-mobile');
+}
+
+@include vd-viewport-media-max(small) {
+  @include responsive-invisibility('.vd-hide-tablet-portrait');
+}
+
+@include vd-viewport-media-max(medium) {
+  @include responsive-invisibility('.vd-hide-tablet-landscape');
+}
+
+@include vd-viewport-media-min(large) {
+  @include responsive-invisibility('.vd-hide-desktop');
+}
+
+// Print Helpers
+@include responsive-invisibility('.vd-show-print');
+
+@media print {
+  @include responsive-visibility('.vd-show-print');
+  @include responsive-invisibility('.vd-hide-print');
+}

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

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

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

@@ -0,0 +1,17 @@
+@mixin vd-disabled() {
+  &:disabled,
+  &.disabled,
+  &:disabled:hover,
+  &[disabled] {
+    cursor: default;
+    pointer-events: none;
+
+    @content;
+  }
+}
+
+@mixin vd-enabled() {
+  &:not(:disabled) {
+    @content;
+  }
+}

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

@@ -0,0 +1,102 @@
+// =================================== Responsive Grid =================================== //
+
+// Grid Settings
+$vd-grid-columns: 12 !default;
+$vd-grid-block-max: 8 !default;
+
+// Optional Grid Gutters; see vd-grid.scss
+$vd-grid-row-gutter-large: 24px;
+
+// Generates columns for the grid.
+//
+// @mixin vd-grid-columns
+//
+// @param {String} $breakpoint - the breakpoint size to attach to the column.
+//
+@mixin vd-grid-columns ($breakpoint) {
+  @for $i from 1 through $vd-grid-columns {
+    $_vd-column-width: percentage($i / $vd-grid-columns);
+
+    .vd-g-#{$breakpoint}-#{$i} {
+      flex: 0 0 $_vd-column-width;
+      max-width: $_vd-column-width;
+    }
+  }
+}
+
+// Allow's the size of columns to be defined on the parent row. vd-g-#{$breakpoint}-up-#{$i}, where
+// {breakpoint} can be s, m or l and {i} is the number of columns to display per row.
+//
+// @mixin vd-grid-block-columns
+//
+// @param {String} $breakpoint - the breakpoint size to attach to the column.
+//
+@mixin vd-grid-block-columns ($breakpoint) {
+  @for $i from 1 through $vd-grid-block-max {
+    .vd-g-#{$breakpoint}-up-#{$i} {
+      flex-wrap: wrap;
+
+      > .vd-g-col {
+        $_vd-block-column-width: percentage(1 / $i);
+
+        flex: 0 0 $_vd-block-column-width;
+        max-width: $_vd-block-column-width;
+      }
+    }
+  }
+}
+
+// Shortcut to generate columns and block columns.
+//
+// @mixin vd-build-grid-columns
+//
+// @param {String} $breakpoint - the breakpoint size to attach to the column.
+//
+@mixin vd-build-grid-columns ($breakpoint) {
+  @include vd-grid-columns($breakpoint);
+  @include vd-grid-block-columns($breakpoint);
+}
+
+// Build it and they will come.
+//
+// @mixin vd-build-grid.
+//
+@mixin vd-build-grid () {
+  .vd-g-row {
+    max-width: $vd-section-wrap-max-width;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+
+    // Nested Row's
+    & & {
+      max-width: none;
+    }
+  }
+
+  .vd-g-col {
+    flex: 1 1 0;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+
+  // Build the columns
+  @include vd-build-grid-columns('s');
+
+  @include vd-viewport-media-max(xsmall) {
+    @include vd-build-grid-columns('xs');
+  }
+
+  @include vd-viewport-media-min(medium) {
+    @include vd-build-grid-columns('m');
+  }
+
+  @include vd-viewport-media-min(large) {
+    @include vd-build-grid-columns('l');
+  }
+
+  @include vd-viewport-media-min(xlarge) {
+    @include vd-build-grid-columns('xl');
+  }
+}

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

@@ -0,0 +1,36 @@
+@mixin remove-border-radius-left() {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+@mixin remove-border-radius-right() {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+@mixin vd-shadow() {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    z-index: -2;
+    top: 3em;
+    left: 1em;
+    right: 1em;
+    content: '';
+    bottom: 0;
+    box-shadow: 0 0.1em 4em 0 vd-colour(shadow);
+  }
+}
+
+@mixin disabled() {
+  opacity: $vd-opacity;
+  filter: grayscale(100%);
+}
+
+// Only applies hover styles if the device is capable of doing so. Prevents hover states from sticking on touch only devices
+@mixin vd-hover-when-supported() {
+  @media (hover: hover) {
+    @content;
+  }
+}

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

@@ -0,0 +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) {
+  @return $vd-grid-unit * $times;
+}
+
+@function vd-grid-gutter ($times:1) {
+  @return vd-grid-unit(4) * $times;
+}

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

@@ -0,0 +1,14 @@
+// Borders
+$vd-border-radius: 4px;
+$vd-border-colour: vd-colour(framing);
+$vd-border-types: (keyline, keyline-inverse, framing, framing-inverse);
+
+// Opacity and Shadows
+$vd-opacity: 0.35;
+$vd-shadow-blur: 3px !default;
+$vd-shadow-spread: 2px !default;
+$vd-box-shadow: 0 6px 10px vd-colour(shadow);
+
+// TODO: These shouldn't be in here... They should be declared in vend-nav.
+$vd-top-nav-height: 50px;
+$vd-nav-width: 230px;

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

@@ -0,0 +1,72 @@
+//
+// PLEASE READ THIS COMMENT BEFORE MODIFYING!!!
+// ============================================
+// This file defines the root dependencies for every stylesheet. This file should only include variables, mixins,
+// functions, etc. BUT NO ACTUAL CLASS DECLARATIONS as it may be imported multiple times in the same page. For example,
+// `font-faces` is not included here as it would create duplicated code if included multiple times.
+// ============================================
+//
+@import '../../../images-ui/images-ui-ns';
+
+// Global non-style variables, mixins and functions.
+
+@import 'utils/functions';
+
+@import 'viewport/viewport-data';
+@import 'viewport/viewport-ranges';
+@import 'viewport/viewport-media-mixins';
+
+@import 'colour/colour';
+@import 'effects/effects-ns';
+@import 'text/text';
+@import 'spacing/spacing';
+@import 'spacing/spacing-functions';
+@import 'grid';
+@import 'z-index';
+@import 'layout';
+@import 'base-mixins';
+@import 'button-mixins';
+@import '../../components/vd-btn/vd-btn-mixins';
+@import 'helper-mixins';
+@import 'misc';
+
+// Component non-style variables, mixins and functions.
+@import '../../components/vd-action-bar/vd-action-bar-ns';
+@import '../../components/vd-btn/vd-btn-ns';
+@import '../../components/vd-banner/vd-banner-ns';
+@import '../../components/vd-card/vd-card-ns';
+@import '../../components/vd-checkbox/vd-checkbox-ns';
+@import '../../components/vd-datepicker/vd-datepicker-ns';
+@import '../../components/vd-dialog/vd-dialog-ns';
+@import '../../components/vd-dialog-close/vd-dialog-close-ns';
+@import '../../components/vd-dialog-drawer/vd-dialog-drawer-ns';
+@import '../../components/vd-badges/vd-id-badge/vd-id-badge-ns';
+@import '../../components/vd-avatar/vd-avatar-ns';
+@import '../../components/vd-avatar-multi/vd-avatar-multi-ns';
+@import '../../components/vd-flag/vd-flag-ns';
+@import '../../components/vd-field/vd-field-ns';
+@import '../../components/vd-input/vd-input-ns';
+@import '../../components/vd-popover/vd-popover-ns';
+@import '../../components/vd-overlay/vd-overlay-ns';
+@import '../../components/vd-popover-list/vd-popover-list-ns';
+@import '../../components/vd-radio/vd-radio-ns';
+@import '../../components/vd-scrollable/vd-scrollable-ns';
+@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-drawer/vd-sidebar-drawer-ns';
+@import '../../components/vd-sidebar-tabs/vd-sidebar-tabs-ns';
+@import '../../components/vd-status-icon/vd-status-icon-ns';
+@import '../../components/vd-suggestion/vd-suggestion-list-ns';
+@import '../../components/vd-switch/vd-switch-ns';
+@import '../../components/vd-table/vd-table-ns';
+@import '../../components/vd-tabs/vd-tabs-ns';
+@import '../../components/vd-toast-notification/vd-toast-notification-ns';
+@import '../../components/vd-tooltip/vd-tooltip-ns';
+@import '../../components/vd-topbar/vd-topbar-ns';
+@import '../../components/vd-hero/vd-hero-ns';
+@import '../../components/vd-promo/vd-promo-ns';
+@import '../../components/vd-settings/vd-settings-ns';
+
+// Navi non-style variables and mixins
+@import '../navi/non-styles';

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

@@ -0,0 +1,16 @@
+body {
+  @include vd-reset();
+
+  padding: 0;
+  margin: 0;
+  background-color: vd-colour(background);
+}
+
+a:link {
+  text-decoration: none;
+}
+
+// Enables fast-tap optimisation in iOS Safari when page is zoomed
+a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
+  touch-action: manipulation;
+}

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

@@ -0,0 +1,11 @@
+%vd-invisible-checkbox-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  margin: 0;
+  z-index: $vd-z-index-content-base + 1;
+  cursor: pointer;
+}

package/src/vend.ui/styles/global/_z-index.scss

@@ -0,0 +1,40 @@
+// ===================================     [100] Content     ======================================================== //
+
+// Any content with an explicit position
+$vd-z-index-content-base: 100 !default;
+
+
+
+// ===================================     [200] Navigation     ===================================================== //
+
+// Top navigation, side navigation and level 2 actions (fixed action bars)
+$vd-z-index-navigation-base: $vd-z-index-content-base * 2 !default;
+
+
+
+// ===================================     [300] Popovers     ======================================================= //
+
+// Search results, drop downs, selects, tooltips, date pickers, etc
+$vd-z-index-popover-base: $vd-z-index-content-base * 3 !default;
+
+$vd-popover-z-index: $vd-z-index-popover-base !default;
+
+
+
+// ===================================     [400] Modals     ========================================================= //
+
+// Splashes, dialogs, etc
+$vd-z-index-modal-base: $vd-z-index-content-base * 4 !default;
+
+$vd-modals-z-index: $vd-z-index-modal-base + 10 !default; // 410
+
+$vd-popover-inside-modal-z-index: $vd-modals-z-index + 10 !default; // 420
+
+
+
+// ===================================     [500] Toasts     ========================================================= //
+
+// Toast notifications etc
+$vd-z-index-toast-base: $vd-z-index-content-base * 5 !default;
+
+$vd-toast-notification-z-index: $vd-z-index-toast-base !default;