@lightspeed/design-system-css 0.1.0

package/src/vend-styles/components/DatePicker/DatePicker.scss

@@ -0,0 +1,232 @@
+@import '../../../vend.ui/styles/global/non-styles';
+@import './DatePicker-ns';
+
+.vd-datepicker-ui {
+  display: block;
+}
+
+.vd-datepicker-input-container {
+  position: relative; // Added relative positioning to eliminate the need to wrap the date picker in a position relative div.
+  .vd-datepicker-input {
+    cursor: pointer;
+    margin: 0;
+  }
+}
+
+.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;
+}
+
+.react-datepicker {
+  @include vd-reset;
+  font-size: $vd-datepicker-font-size;
+  position: relative;
+  margin-top: 8px;
+}
+
+.react-datepicker__current-month {
+  display: none;
+}
+
+.react-datepicker__header {
+  text-align: center;
+}
+
+.react-datepicker__navigation {
+  position: absolute;
+  top: 13px;
+  display: inline-block;
+  visibility: hidden;
+  overflow: hidden;
+  width: $vd-datepicker-next-prev-button-width;
+  cursor: pointer;
+  padding: 3px;
+  border-width: 2px;
+}
+
+// Left arrow
+.react-datepicker__navigation--previous {
+  left: -1px;
+
+  &:before {
+    @include next-prev-arrow-common;
+    transform: rotate(225deg);
+  }
+}
+
+// Right arrow
+.react-datepicker__navigation--next {
+  right: -10px;
+
+  &:before {
+    @include next-prev-arrow-common;
+    transform: rotate(45deg);
+  }
+}
+
+.react-datepicker__month {
+  margin-top: $vd-datepicker-day-spacing;
+}
+
+.react-datepicker__month-dropdown-container,
+.react-datepicker__year-dropdown-container {
+  display: inline-block;
+}
+
+.react-datepicker__month-select,
+.react-datepicker__year-select {
+  @include vd-select;
+  @include vd-select-carets;
+
+  padding-right: 12px;
+}
+
+.react-datepicker__month-select {
+  width: 115px;
+}
+
+.react-datepicker__year-select {
+  width: 85px;
+}
+
+.react-datepicker__month-dropdown-container {
+  margin-right: 5px;
+}
+
+.react-datepicker__day-names {
+  margin-top: $vd-datepicker-day-spacing * 2;
+}
+
+.react-datepicker__day-name {
+  &:last-child {
+    padding-right: 0;
+  }
+
+  display: inline-block;
+  text-align: center;
+  width: $vd-datepicker-button-size;
+  padding-right: $vd-datepicker-day-spacing / 2;
+  text-decoration: underline dotted;
+  font-weight: $vd-font-weight--bold;
+}
+
+/* Day States */
+.vd-datepicker-day-button {
+  box-sizing: border-box;
+  padding: 3px;
+  background: $vd-datepicker-background;
+  width: $vd-datepicker-button-size;
+  height: $vd-datepicker-button-size;
+  border: none;
+  border-radius: $vd-datepicker-button-radius;
+  text-align: center;
+  line-height: 24px;
+}
+
+.react-datepicker__day {
+  display: inline-block;
+  font-size: $vd-datepicker-font-size;
+  padding-right: $vd-datepicker-day-spacing / 2;
+  cursor: pointer;
+}
+
+.react-datepicker__day--range-start,
+.react-datepicker__day--range-end,
+.react-datepicker__day--selected {
+  .vd-datepicker-day-button {
+    background: vd-colour(do);
+    color: vd-colour(box);
+    font-weight: $vd-font-weight--bold;
+    border: none;
+  }
+}
+
+.react-datepicker__day:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
+  .vd-datepicker-day-button:hover {
+    background: vd-rgba(vd-colour(do-rgb), 0.35);
+  }
+}
+
+// Hide dates from previous months
+.react-datepicker__day--outside-month {
+  visibility: hidden;
+}
+
+// Highlight today
+.react-datepicker__day--today {
+  color: vd-colour(do);
+  font-weight: $vd-font-weight--bold;
+}
+
+// Formatting for days other than the start, end or selected dates
+.react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
+  background-color: $vd-datepicker-range-colour;
+
+  .vd-datepicker-day-button {
+    background-color: $vd-datepicker-range-colour;
+    border-radius: 0;
+
+    &:hover {
+      border-radius: $vd-datepicker-button-radius;
+    }
+  }
+}
+
+.react-datepicker__day--disabled {
+  @include disabled;
+  pointer-events: none;
+}
+
+.react-datepicker__day--range-start {
+  background-image: linear-gradient(
+    to right,
+    transparent 50%,
+    $vd-datepicker-range-colour 50%
+  );
+}
+
+.react-datepicker__day--range-end {
+  background-image: linear-gradient(
+    to right,
+    $vd-datepicker-range-colour 50%,
+    transparent 50%
+  );
+}
+
+// If the start and end date are the same, don't show the gradient
+.react-datepicker__day--range-start.react-datepicker__day--range-end {
+  background-image: none;
+}

package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss

@@ -0,0 +1,32 @@
+// Date picker general
+$vd-datepicker-font-size: 15px;
+$vd-datepicker-button-colour: vd-colour(do);
+$vd-datepicker-padding: 24px;
+$vd-datepicker-background: vd-colour(box);
+$vd-datepicker-border: vd-border(framing);
+
+// Grid
+$vd-datepicker-day-spacing: 10px;
+$vd-datepicker-range-colour: vd-colour(do-highlight);
+
+// Button
+$vd-datepicker-button-radius: 50%;
+$vd-datepicker-button-size: 30px;
+
+// Button next / prev
+$vd-datepicker-next-prev-button-width: 26px;
+$vd-datepicker-next-prev-button-icon-size: 7px;
+$vd-datepicker-next-prev-arrow-border-enabled: 3px solid vd-colour(text);
+$vd-datepicker-next-prev-arrow-border-disabled: 3px solid vd-colour(framing);
+
+// Mixins
+@mixin next-prev-arrow-common {
+  content: " ";
+  visibility: visible;
+  position: absolute;
+  width: $vd-datepicker-next-prev-button-icon-size;
+  height: $vd-datepicker-next-prev-button-icon-size;
+  border-right: $vd-datepicker-next-prev-arrow-border-enabled;
+  border-top: $vd-datepicker-next-prev-arrow-border-enabled;
+  box-sizing: initial;
+}

package/src/vend-styles/components/FileUpload/FileUpload.scss

@@ -0,0 +1,8 @@
+.file-upload-hidden-file-input {
+  visibility: 'hidden';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+}

package/src/vend-styles/components/InboundIndicator/InboundIndicator.scss

@@ -0,0 +1,7 @@
+.p-inbound-indicator-popover {
+  min-width: 360px;
+}
+
+.inbound-indicator {
+  transform: scaleX(-1);
+}

package/src/vend-styles/components/InboundItem/InboundItem.scss

@@ -0,0 +1,3 @@
+.vs-inbound-info-text-section {
+  flex-grow: 1;
+}

package/src/vend-styles/components/LineChart/LineChart.scss

@@ -0,0 +1,99 @@
+@import '../../../vend.ui/styles/global/non-styles';
+
+/* stylelint-disable vend/use-colour-function */
+// Should review at some point if it is possible to replace this with a standard colour
+// or if we need to add this to standard colour
+$chart-fill: #009D12;
+$chart-bg: #fafafa;
+/* stylelint-enable vend/use-colour-function */
+
+
+.vd-line-graph-container {
+  .vd-grid.vd-y, .vd-axis.vd-y, .vd-axis.vd-x {
+    .domain {
+      display: none;
+    }
+
+    .tick line {
+      stroke: vd-colour(framing);
+      stroke-width: 1px;
+      fill: transparent;
+    }
+  }
+
+  .vd-grid.vd-grid-filled {
+    stroke-dasharray: 4,2;
+  }
+
+  .vd-grid-background {
+    fill: $chart-bg;
+    stroke: none;
+  }
+
+  .vd-grid-zero-tick {
+    stroke: vd-colour(keyline);
+  }
+
+  .vd-line {
+    fill: transparent;
+    stroke-width: 2px;
+    stroke: vd-colour(keyline);
+  }
+
+  .vd-line-with-fill {
+    fill: transparent;
+    stroke-width: 2px;
+    stroke: $chart-fill;
+  }
+
+  .vd-line-fill {
+    fill: $chart-fill;
+    opacity: 0.1;
+    stroke-width: 0;
+  }
+
+  .vd-plot-point {
+    fill: vd-colour(do);
+    stroke: vd-colour(box);
+    stroke-width: 2px;
+  }
+
+  .vd-plot-point-with-fill {
+    fill: $chart-fill;
+    stroke: $vd-colour-white;
+  }
+
+  .vd-plot-point-hidden {
+    stroke: none;
+    fill: transparent;
+  }
+
+  .vd-line-wrapper-main {
+    .vd-line {
+      stroke: vd-colour(supplementary);
+    }
+  }
+
+  .vd-line-wrapper-secondary {
+    .vd-plot-point {
+      stroke: none;
+      fill: transparent;
+    }
+  }
+
+  .vd-line-label {
+    @include vd-text(mini-signpost);
+    fill: vd-colour(keyline);
+  }
+  .vd-axis {
+    .tick text {
+      @include vd-text(mini-copy);
+      fill: vd-colour(text);
+    }
+  }
+}
+
+.vd-chart-popover {
+  min-width: 120px;
+  pointer-events: none;
+}

package/src/vend-styles/components/Modal/Modal.scss

@@ -0,0 +1,149 @@
+@import '../../../vend.ui/styles/global/non-styles';
+@import './Modal-ns.scss';
+
+.vd-modal-container {
+  position: relative;
+  box-sizing: border-box;
+  margin: 0 auto;
+  padding: 0;
+
+  background: vd-colour(box);
+  border-radius: $vd-border-radius;
+
+  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;
+  }
+}
+
+@each $_vd-modal-mobile-size in $vd-modal-mobile-sizes {
+  .vd-modal--size-#{nth($_vd-modal-mobile-size, 1)} {
+    max-width: nth($_vd-modal-mobile-size, 2);
+  }
+}
+
+@each $_vd-modal-size in $vd-modal-sizes {
+  @include vd-viewport-media-min ($vd-breakpoint-medium) {
+    .vd-modal--size-#{nth($_vd-modal-size, 1)} {
+      max-width: nth($_vd-modal-size, 2);
+    }
+  }
+}
+
+.vd-modal-inner-container {
+  display: flex;
+  flex-direction: column;
+
+  min-height: $vd-dialog-container-min-height;
+  max-height: calc(95vh - #{$vd-dialog-container-top-offset});
+
+  @include vd-viewport-media-max (xsmall) {
+    max-height: 95%;
+  }
+
+  & > .vd-g-row {
+    width: 100%;
+  }
+
+  .vd-breadcrumb, .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & .vd-modal-content, .vd-dialog-actions {
+    margin-left: var(--vd-dialog-spacing);
+    margin-right: var(--vd-dialog-spacing);
+
+    &:first-child {
+      margin-top: var(--vd-dialog-spacing);
+    }
+
+    &:last-child {
+      margin-bottom: var(--vd-dialog-spacing)
+    }
+  }
+
+  .vd-breadcrumb {
+    & + .vd-dialog-header, & + .vd-modal-content, & + .vd-dialog-actions {
+      margin-top: vd-grid-unit(4);
+    }
+  }
+}
+
+.vd-modal-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  & + .vd-dialog-actions {
+    margin-top: var(--vd-dialog-spacing);
+  }
+}
+
+.vd-modal-banner {
+  width: 100%;
+
+  & + .vd-dialog-header, & + .vd-modal-content, & + .vd-dialog-actions {
+    margin-top: var(--vd-dialog-spacing);
+  }
+}
+
+.vd-modal-sidebar {
+  display: none;
+
+  & + .vd-breadcrumb, & + .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & + .vd-modal-content, & + .vd-dialog-actions {
+    margin-top: var(--vd-dialog-spacing);
+  }
+
+  @include vd-viewport-media-min ($vd-breakpoint-medium) {
+    display: block;
+    width: $vd-modal-sidebar-size;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+
+    & ~ .vd-breadcrumb, & ~ .vd-dialog-header, .vd-modal-container:not(.vd-modal--size-full-screen) & ~ .vd-modal-content, & ~ .vd-dialog-actions {
+      margin-left: $vd-modal-sidebar-size;
+      padding-left: var(--vd-dialog-spacing);
+    }
+
+    & ~ .vd-modal-banner {
+      margin-left: $vd-modal-sidebar-size;
+      width: calc(100% - #{$vd-modal-sidebar-size})
+    }
+  }
+}
+
+// Full screen modal
+.vd-modal--size-full-screen {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(100vw - var(--vd-dialog-spacing) * 2);
+  height: calc(100vh - var(--vd-dialog-spacing) * 2);
+  margin: var(--vd-dialog-spacing);
+
+  .vd-modal-inner-container {
+    width: 100%;
+    max-width: $vd-modal-full-screen-inner-max-width;
+  }
+
+  .vd-modal-content {
+    padding: vd-grid-unit(6);
+  }
+}

package/src/vend-styles/components/Modal/_Modal-ns.scss

@@ -0,0 +1,7 @@
+$vd-modal-sizes: ((small 600px) (small-with-sidebar 880px) (medium 720px) (medium-with-sidebar 1000px) (large 1000px));
+
+$vd-modal-mobile-sizes: ((small 600px) (small-with-sidebar 600px) (medium 720px) (medium-with-sidebar 720px) (large 1000px));
+
+$vd-modal-sidebar-size: 280px;
+
+$vd-modal-full-screen-inner-max-width: 1100px;

package/src/vend-styles/components/PageHeader/_PageHeader.scss

@@ -0,0 +1,3 @@
+.vs-page-header {
+  position: relative;
+}

package/src/vend-styles/components/ProgressBar/ProgressBar.scss

@@ -0,0 +1,21 @@
+@import '../../../vend.ui/styles/global/non-styles';
+
+.vs-progress-bar-header {
+  text-align: center;
+  margin: 10px 0;
+}
+
+.vs-progress-bar-container {
+  height: 10px;
+  width: 100%;
+  border-radius: 5px;
+  background-color: vd-colour(framing);
+  overflow: hidden;
+}
+
+.vs-progress-bar {
+  height: 100%;
+  width: 0%;
+  background-color: vd-colour(do);
+  transition: width 0.6s ease;
+}

package/src/vend-styles/components/PromotionModal/PromotionModal.scss

@@ -0,0 +1,44 @@
+@import '../../../vend.ui/styles/global/non-styles';
+
+.pm-promotion-original-price {
+  text-decoration: line-through;
+  @include vd-text(supplementary);
+}
+
+.pm-promotion-modal-content {
+  // @todo this should probably be the default for Modals
+  margin: 0 !important;
+  // Fix Safari 10
+  flex-basis: auto;
+
+  .vd-scrollable {
+    padding: 0 var(--vd-dialog-spacing) var(--vd-dialog-spacing);
+  }
+
+  @include vd-viewport-media-max (xsmall) {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+.pm-products-table-actions {
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+  box-shadow: inset 0 -1px vd-colour(keyline);
+}
+
+.pm-products-search-open {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+}
+
+.pm-products-search-close {
+  display: inline-flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+}
+
+.pm-products-search-cancel {
+  width: 100%;
+}

package/src/vend-styles/components/SearchFilters/SearchFilters.scss

@@ -0,0 +1,6 @@
+.vd-search-filters-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+}