@lightspeed/design-system-css 0.1.0

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

@@ -0,0 +1,332 @@
+.vd-datepicker-ui {
+  display: block;
+}
+
+.vd-datepicker-input {
+  cursor: pointer;
+}
+
+// Spacer is used to offset the height of the no end date checkbox in the end date section
+// That way the datepickers in both start and end date align
+.vd-datepicker-range-no-end-spacer {
+  height: $vd-datepicker-range-no-end-height;
+}
+
+.vd-datepicker-range-no-end-disabled {
+  @include disabled;
+  pointer-events: none;
+}
+
+.vd-datepicker-range-input-container {
+  .vd-datepicker-range-input {
+    cursor: pointer;
+    margin: 0;
+  }
+}
+
+.vd-datepicker-data-inputs {
+  display: flex;
+  width: $vd-datepicker-data-inputs-width;
+
+  .vd-datepicker-date-input {
+    flex: 2;
+
+    &.vd-has-time-input {
+      border-radius: $vd-datepicker-date-input-border-radius;
+    }
+  }
+
+  .vd-datepicker-time-input {
+    flex: 1;
+    border-radius: $vd-datepicker-time-input-border-radius;
+  }
+
+  .vd-datepicker-time-input-containter {
+    width: 100px;
+    margin-left: -2px;
+    .react-datepicker__tab-loop {
+      // Hide ReactDatePicker default time picker, only use the input box to change start/end time.
+      display: none;
+    }
+  }
+}
+
+.vd-datepicker-group {
+  display: flex;
+  justify-content: space-between;
+  margin: -$vd-datepicker-padding;
+
+  @include vd-viewport-media-max(small) {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.vd-datepicker-group-item {
+  padding: $vd-datepicker-padding;
+
+  &:first-child {
+    border-right: $vd-datepicker-border;
+
+    @include vd-viewport-media-max(small) {
+      border-right: none;
+      border-bottom: $vd-datepicker-border;
+    }
+  }
+
+  .vd-datepicker-ui {
+     margin-top: 22px;
+  }
+}
+
+.vd-datepicker-group-footer {
+  padding: ($vd-datepicker-padding / 3) $vd-datepicker-padding;
+}
+
+.vd-datepicker-group-summary {
+  margin: ($vd-datepicker-padding / 3);
+  margin-left: 0;
+}
+
+// Common styles for both range and single date pickers
+.vd-datepicker,
+.vd-datepicker-range {
+  @include vd-reset;
+  font-size: $vd-datepicker-font-size;
+
+  table, caption, tbody, tfoot, thead, tr, th, td, abbr {
+    margin: initial;
+    padding: initial;
+    border: initial;
+    line-height: initial;
+    border-collapse: initial;
+    background: initial;
+    color: initial;
+    font-weight: initial;
+    text-align: initial;
+  }
+
+  .pika-table {
+    margin-top: $vd-datepicker-table-spacing * 2;
+
+    tbody:before {
+      content: " ";
+      display: block;
+      margin-top: $vd-datepicker-table-spacing;
+    }
+
+    td {
+      padding-right: $vd-datepicker-table-spacing / 2;
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    th {
+      padding-right: $vd-datepicker-table-spacing / 2;
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    abbr {
+      font-weight: $vd-font-weight--bold;
+      color: vd-colour(text);
+    }
+  }
+
+  .pika-title {
+    position: relative;
+    text-align: center;
+
+    .pika-label {
+      display: inline-block;
+      visibility: hidden;
+
+      &:nth-child(even) {
+        &:before {
+          @include vd-datepicker-select-arrow-common;
+          border-bottom: $vd-datepicker-select-arrow-border;
+          right: $vd-datepicker-select-icon-position-right-even;
+        }
+
+        &:after {
+          @include vd-datepicker-select-arrow-common;
+          border-top: $vd-datepicker-select-arrow-border;
+          top: $vd-datepicker-select-icon-position-top;
+          right: $vd-datepicker-select-icon-position-right-even;
+        }
+      }
+
+      &:nth-child(odd) {
+        &:before {
+          @include vd-datepicker-select-arrow-common;
+          border-bottom: $vd-datepicker-select-arrow-border;
+          right: $vd-datepicker-select-icon-position-right-odd;
+        }
+
+        &:after {
+          @include vd-datepicker-select-arrow-common;
+          border-top: $vd-datepicker-select-arrow-border;
+          top: $vd-datepicker-select-icon-position-top;
+          right: $vd-datepicker-select-icon-position-right-odd;
+        }
+      }
+    }
+
+    .pika-select {
+      @include vd-select;
+      padding-right: 12px;
+      visibility: visible;
+    }
+
+    .pika-select-month {
+      @include vd-datepicker-select-common;
+      width: 110px;
+      left: $vd-datepicker-select-horizontal-positioning;
+    }
+
+    .pika-select-year {
+      @include vd-datepicker-select-common;
+      width: 72px;
+      right: $vd-datepicker-select-horizontal-positioning;
+    }
+
+    .pika-prev,
+    .pika-next {
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .pika-prev {
+      left: -5px;
+      width: $vd-datepicker-next-prev-button-width;
+      visibility: hidden;
+      cursor: pointer;
+
+      &:before {
+        @include next-prev-arrow-common;
+        transform: rotate(225deg);
+      }
+
+      &.is-disabled {
+        &:before {
+          @include next-prev-arrow-common--disabled;
+        }
+      }
+    }
+
+    .pika-next {
+      right: -5px;
+      width: $vd-datepicker-next-prev-button-width;
+      visibility: hidden;
+      cursor: pointer;
+
+      &:before {
+        @include next-prev-arrow-common;
+        transform: rotate(45deg);
+      }
+
+      &.is-disabled {
+        &:before {
+          @include next-prev-arrow-common--disabled;
+        }
+      }
+    }
+  }
+
+  .is-disabled {
+    pointer-events: none;
+  }
+
+  .is-inrange {
+    background-color: $vd-datepicker-range-colour;
+
+    .pika-button {
+      background-color: $vd-datepicker-range-colour;
+      border-radius: 0;
+
+      &:hover {
+        border-radius: $vd-datepicker-button-radius;
+      }
+    }
+  }
+
+  .is-startrange {
+    background-image: linear-gradient(to right, transparent 50%, $vd-datepicker-range-colour 50%);
+  }
+
+  .is-endrange {
+    background-image: linear-gradient(to right, $vd-datepicker-range-colour 50%, transparent 50%);
+  }
+
+  .is-selected.is-startrange.is-endrange {
+    background-image: none;
+  }
+
+  td.is-disabled {
+    filter: grayscale(100%);
+    opacity: $vd-opacity;
+  }
+
+  .pika-button {
+    font-size: $vd-datepicker-font-size;
+    cursor: pointer;
+    background: $vd-datepicker-background;
+    width: $vd-datepicker-button-size;
+    height: $vd-datepicker-button-size;
+    border: none;
+    border-radius: $vd-datepicker-button-radius;
+    padding: 3px;
+    color: vd-colour(text);
+
+    &:hover {
+      background: vd-rgba(vd-colour(do-rgb), $vd-opacity);
+    }
+  }
+
+  .is-today .pika-button {
+    color: vd-colour(do);
+    font-weight: $vd-font-weight--bold;
+  }
+
+  .is-startrange,
+  .is-endrange {
+    .pika-button {
+      border: 2px solid vd-colour(do);
+      background: $vd-datepicker-range-colour;
+    }
+  }
+
+  .is-selected .pika-button {
+    background: vd-colour(do);
+    color: vd-colour(text-action);
+    font-weight: $vd-font-weight--bold;
+    border: none;
+  }
+}
+
+.vd-datepicker-range-no-end {
+  .is-startrange, .is-endrange {
+    .pika-button {
+      border: none;
+    }
+  }
+
+  .vd-datepicker-end-picker {
+    .is-startrange, .is-endrange {
+      .pika-button {
+        background: $vd-datepicker-range-colour;
+        color: vd-colour(text);
+        font-weight: normal;
+      }
+    }
+  }
+}
+
+// this will only affect the single instance date picker
+.vd-datepicker {
+  padding-top: $vd-datepicker-select-vertical-positioning;
+}

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

@@ -0,0 +1,10 @@
+// Dialog Header
+$vd-dialog-header-margin: 10px;
+$vd-dialog-header-sub-padding: 5px;
+$vd-dialog-header-divider-width: 40px;
+
+// Dialog Container
+$vd-dialog-container-min-height: 170px;
+$vd-dialog-container-focus-colour: vd-colour(go);
+$vd-dialog-container-top-offset: vd-grid-unit(15);
+$vd-dialog-container-sizes: ((small 480px) (medium 600px) (standard 720px) (large 800px) (xlarge 1100px));

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

@@ -0,0 +1,220 @@
+:root {
+  --vd-dialog-spacing: #{$vd-section-padding-h-med};
+}
+
+@include vd-viewport-media-max (small) {
+  :root {
+    --vd-dialog-spacing: #{$vd-section-padding-h-sml};
+  }
+}
+
+@include vd-viewport-media-max (xsmall) {
+  :root {
+    --vd-dialog-spacing: #{vd-grid-unit(4)};
+  }
+}
+
+.vd-dialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  // This element creates an invisible mask to position the dialog modal. Disable click events so they can fall through
+  // to the overlay.
+  pointer-events: none;
+
+  display: flex;
+  align-items: center;
+
+  @include vd-viewport-media-max (small) {
+    left: vd-grid-unit(1);
+    right: vd-grid-unit(1);
+    align-items: flex-start;
+  }
+
+  @include vd-viewport-media-max (xsmall) {
+    left: vd-grid-unit(0);
+    right: vd-grid-unit(0);
+  }
+
+  // *****  Dialog Banner  ***** //
+  .vd-dialog-banner {
+    display: block;
+    margin: calc(var(--vd-dialog-spacing) * -1);
+    margin-bottom: var(--vd-dialog-spacing);
+    border-top-left-radius: $vd-border-radius;
+    border-top-right-radius: $vd-border-radius;
+
+    .vd-banner-wrapper {
+      justify-content: flex-start;
+      padding: $vd-section-padding-v-med var(--vd-dialog-spacing);
+    }
+
+    @include vd-viewport-media-max (xsmall) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      flex: 0 1 auto;
+    }
+  }
+}
+
+// *****  Dialog Container  ***** //
+
+// Container Defaults
+.vd-dialog-container {
+  position: relative;
+  box-sizing: border-box;
+  margin: 0 auto;
+  padding: var(--vd-dialog-spacing);
+
+  background: vd-colour(box);
+  border-radius: $vd-border-radius;
+  display: flex;
+  flex-direction: column;
+
+  min-height: $vd-dialog-container-min-height;
+  max-height: calc(95vh - #{$vd-dialog-container-top-offset});
+
+  width: calc(90% - #{$vd-dialog-close-width});
+  // Enables default click events for the container child elements
+  pointer-events: auto;
+
+  &:focus {
+    outline: none;
+  }
+
+  @include vd-viewport-media-max (small) {
+    max-width: none;
+    width: 100%;
+    margin-top: $vd-dialog-container-top-offset;
+  }
+
+  @include vd-viewport-media-max (xsmall) {
+    max-height: none;
+    height: calc(100% - #{$vd-dialog-container-top-offset});
+
+    border-radius: 0;
+
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+// Dialog Container Size Modifiers
+@each $_vd-dialog-container-size in $vd-dialog-container-sizes {
+  .vd-dialog-container--size-#{nth($_vd-dialog-container-size, 1)} {
+    max-width: nth($_vd-dialog-container-size, 2);
+  }
+}
+
+// *****  Dialog Header  ***** //
+
+.vd-dialog-header {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+
+  margin-bottom: var(--vd-dialog-spacing);
+}
+
+.vd-dialog-header--center {
+  text-align: center;
+
+  @include vd-viewport-media-max (xsmall) {
+    text-align: left;
+  }
+}
+
+.vd-dialog-header-sub {
+  font-size: vd-text-size(sub-heading);
+  padding-left: $vd-dialog-header-sub-padding;
+
+  @include vd-viewport-media-max (xsmall) {
+    display: block;
+    padding-left: 0;
+    padding-top: $vd-dialog-header-sub-padding;
+  }
+}
+
+.vd-dialog-header-meta {
+  font-size: vd-text-size(supplementary);
+  margin-top: $vd-dialog-header-margin;
+  font-weight: normal;
+}
+
+.vd-dialog-header-divider {
+  width: $vd-dialog-header-divider-width;
+  margin: ($vd-dialog-header-margin * 2) auto 0;
+  border: none;
+  border-top: 1px solid vd-colour(keyline);
+}
+
+// *****  Dialog Content  ***** //
+
+.vd-dialog-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  // Push out content so overflow scrollbars are flush against edge but still maintains padding
+  margin: 0 calc(var(--vd-dialog-spacing) * -1);
+  padding: 0 var(--vd-dialog-spacing);
+
+  &.vd-scrollable-container {
+    // Fix Safari 10
+    flex-basis: auto;
+
+    .vd-scrollable {
+      margin: 0 calc(var(--vd-dialog-spacing) * -1);
+      padding: 0 var(--vd-dialog-spacing);
+    }
+  }
+
+  @include vd-viewport-media-max (xsmall) {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+// *****  Dialog Actions (footer)  ***** //
+
+.vd-dialog-actions {
+  text-align: right;
+  flex-shrink: 0;
+
+  .vd-dialog-content + & {
+    margin-top: var(--vd-dialog-spacing);
+  }
+
+  @include vd-viewport-media-max (xsmall) {
+    text-align: center;
+  }
+}
+
+// Fallback to base padding if browser doesn't support CSS variables
+@supports ( not (--a: 0)) {
+  .vd-dialog .vd-dialog-banner {
+    margin: -(#{$vd-section-padding-h-med});
+    margin-bottom: $vd-section-padding-h-med;
+
+    .vd-banner-wrapper {
+      padding: $vd-section-padding-v-med $vd-section-padding-h-med;
+    }
+  }
+
+  .vd-dialog-container {
+    padding: $vd-section-padding-h-med;
+  }
+
+  .vd-dialog-header {
+    margin-bottom: $vd-section-padding-h-med;
+  }
+
+  .vd-dialog-content {
+    margin: 0 -(#{$vd-section-padding-h-med});
+    padding: 0 $vd-section-padding-h-med;
+
+    + .vd-dialog-actions {
+      margin-top: $vd-section-padding-h-med;
+    }
+  }
+}

package/src/vend.ui/components/vd-dialog-close/vd-dialog-close-ns.scss

@@ -0,0 +1,8 @@
+// Dialog Close Button
+$vd-dialog-close-width: 50px;
+$vd-dialog-close-border-radius: 50%;
+$vd-dialog-close-font-size: 20px;
+$vd-dialog-close-focus-border-colour: vd-colour(go);
+$vd-dialog-close-text-font-size: 12px;
+$vd-dialog-close-text-padding: 5px;
+$vd-dialog-close-button-anchor-padding: 10px;

package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss

@@ -0,0 +1,117 @@
+@import '../../../vend.ui/styles/global/non-styles';
+
+// Dialog Close Button Defaults
+.vd-dialog-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: -($vd-dialog-close-width + $vd-dialog-close-button-anchor-padding);
+  cursor: pointer;
+  font-size: $vd-dialog-close-font-size;
+  width: $vd-dialog-close-width;
+  height: $vd-dialog-close-width;
+
+  .vd-dialog-close-button {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: vd-colour(box);
+    border-radius: $vd-dialog-close-border-radius;
+    color: vd-colour(supplementary--text);
+    padding: $vd-dialog-close-button-anchor-padding;
+    text-decoration: none;
+    border: 0;
+    font-size: inherit;
+    appearance: none;
+    cursor: pointer;
+  }
+
+  .vd-dialog-close-icon {
+    opacity: 0.5;
+  }
+
+  &:hover {
+    .vd-dialog-close-icon {
+      opacity: 1;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+    box-shadow: 0 0 3px 1px $vd-dialog-close-focus-border-colour;
+  }
+
+  .vd-modal--size-full-screen & {
+    top: vd-spacer(4);
+    right: vd-spacer(4);
+
+    .vd-dialog-close-button {
+      background-color: vd-colour(supplementary);
+      color: vd-colour(box);
+    }
+
+    .vd-dialog-close-icon {
+      opacity: 1;
+    }
+  }
+
+  @include vd-viewport-media-max ($vd-breakpoint-small) {
+    top: -($vd-dialog-close-width + ($vd-dialog-close-button-anchor-padding / 2));
+    right: $vd-dialog-close-button-anchor-padding / 2;
+  }
+}
+
+// Dialog Close Button 'Drawer' Modifier
+.vd-dialog-close--drawer {
+  top: 10px;
+  left: -$vd-dialog-close-width - 10px;
+
+  @include vd-viewport-media-max ($vd-breakpoint-small) {
+    top: 0;
+    right: 0;
+    left: inherit;
+  }
+}
+
+.vd-dialog-close-label {
+  position: absolute;
+  top: $vd-dialog-close-width;
+  padding: $vd-dialog-close-text-padding 0;
+  margin: 0;
+  width: 100%;
+  left: 0;
+  text-align: center;
+  color: $vd-colour-white;
+  font-size: $vd-dialog-close-text-font-size;
+
+  .vd-modal--size-full-screen & {
+    color: vd-colour(supplementary);
+    font-weight: bold;
+  }
+
+  @include vd-viewport-media-max(small) {
+    display: none;
+  }
+}
+
+// Dialog Close Button 'Inverse' Modifier
+.vd-dialog-close--inverse {
+  .vd-dialog-close-button {
+    background: vd-colour(supplementary);
+    color: vd-colour(text-action);
+  }
+
+  .vd-dialog-close-icon {
+    opacity: 1;
+  }
+
+  .vd-dialog-close-label {
+    color: vd-colour(text);
+    opacity: 0.5;
+  }
+}

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

@@ -0,0 +1 @@
+$vd-dialog-drawer-width: 350px;

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

@@ -0,0 +1,22 @@
+.vd-dialog-drawer-container {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom:0;
+  box-sizing: border-box;
+  width: $vd-dialog-drawer-width;
+  background: vd-colour(box);
+  display: flex;
+  flex-direction: column;
+  // Enables default click events for the container child elements
+  pointer-events: auto;
+
+  &:focus {
+    outline: 1px solid $vd-dialog-container-focus-colour;
+  }
+
+  @include vd-viewport-media-max(xsmall) {
+    width: 100%;
+    min-width: inherit;
+  }
+}