@lightspeed/design-system-css 0.1.0

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

@@ -0,0 +1,291 @@
+@import '../../../vend.ui/styles/global/non-styles';
+@import './TableList-ns';
+
+// LIST TABLES
+// -----------------------------------------------------------------
+
+// TABLE LIST INFO BAR - APPEARS ABOVE THE TABLE
+// -----------------------------------------------------------------
+.vd-table-list-info-bar {
+  box-sizing: border-box;
+  display: flex;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid vd-colour(keyline);
+  justify-content: space-between;
+  align-items: center;
+  min-height: 60px;
+}
+
+.vd-table-list-info-bar-actions {
+  flex-shrink: 0;
+}
+
+// LIST TABLE
+// -----------------------------------------------------------------
+.vd-table-list {
+  width: 100%;
+  border: 0;
+  border-collapse: collapse;
+
+  // @todo remove once we have box sizing set to border box by default
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// LIST TABLE - FIXED LAYOUT
+// -----------------------------------------------------------------
+.vd-table-list--fixed {
+  table-layout: fixed;
+}
+
+// TABLE CELLS - DEFAULT
+// -----------------------------------------------------------------
+.vd-table-list-cell {
+  position: relative;
+  vertical-align: baseline;
+  text-align: left;
+  padding: 22px vd-grid-unit(2) vd-grid-unit(4);
+
+  &:first-child:not(.vd-table-list-cell--toggle):not(.vd-table-list-cell--info) {
+    padding-left: 0;
+  }
+}
+
+// TABLE CELLS - HEADER
+// -----------------------------------------------------------------
+.vd-table-list-head-cell {
+  position: relative;
+  height: 56px;
+  padding: vd-grid-unit(4) vd-grid-unit(2);
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:first-child:not(.vd-table-list-cell--toggle):not(.vd-table-list-cell--info) {
+    padding-left: 0;
+  }
+
+  .vd-table-list-row--header-compact & {
+    height: auto;
+    padding-top: 0;
+  }
+}
+
+// TABLE CELLS - EXPANDED ROW TOGGLE (A FIRST CHILD CELL)
+// -----------------------------------------------------------------
+.vd-table-list-cell--toggle {
+  width: 24px;
+  padding-right: 0;
+  padding-left: 6px;
+
+  // Adjacent cell always has the same spacing
+  + .vd-table-list-cell, + .vd-table-list-head-cell {
+    padding-left: 0;
+  }
+
+  .vd-table-list-toggle-icon {
+    position: absolute;
+    top: 22px;
+  }
+}
+
+.vd-table-list-toggle-icon {
+  color: vd-colour(supplementary);
+  transition: transform 50ms ease-in-out 0s;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.vd-table-list-toggle-icon--toggled {
+  transform: rotate(90deg);
+}
+
+// TABLE CELLS - BULK SELECT (A FIRST CHILD CELL)
+// -----------------------------------------------------------------
+.vd-table-list-cell--bulk-select {
+  width: 32px;
+
+  &:not(.vd-table-list-head-cell) > .vd-checkbox {
+    position: absolute;
+    top: 19px;
+  }
+}
+
+// TABLE CELLS - PRIMARY ACTION (A LAST CHILD CELL)
+// -----------------------------------------------------------------
+.vd-table-list-cell--action {
+  width: 50px;
+  padding: 6px vd-grid-unit(1) 6px vd-grid-unit(2);
+}
+
+// TABLE CELLS - INFO ROW
+// -----------------------------------------------------------------
+.vd-table-list-cell--info {
+  padding: vd-grid-unit(5) vd-grid-unit(6);
+}
+
+// TABLE CELLS - BULK ACTION (TRIGGERS POPOVER)
+// -----------------------------------------------------------------
+.vd-table-list-cell--bulk-action {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+// TABLE CELLS - SORTABLE
+// -----------------------------------------------------------------
+.vd-table-list-cell--sortable {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+// TABLE CELLS - COMPACT (FOR ACCOMMODATING BADGES)
+// -----------------------------------------------------------------
+.vd-table-list-cell--compact {
+  padding: 14px vd-grid-unit(3) vd-grid-unit(3);
+  vertical-align: top;
+}
+
+// TABLE CELLS - INPUT
+// -----------------------------------------------------------------
+.vd-table-list-cell--input {
+  padding: vd-grid-unit(2);
+  vertical-align: top;
+}
+
+// TABLE ROWS
+// -----------------------------------------------------------------
+
+// TABLE ROWS - DEFAULT
+// -----------------------------------------------------------------
+.vd-table-list-row {
+  border-bottom: vd-border(framing);
+}
+
+// TABLE ROWS - EXPANDABLE ROW
+// -----------------------------------------------------------------
+.vd-table-list-row--expandable {
+  &:hover {
+    cursor: pointer;
+    background-color: vd-colour(go-highlight);
+  }
+}
+
+// TABLE ROWS - EXPANDED ROW
+// -----------------------------------------------------------------
+.vd-table-list-row--expanded {
+  background: vd-colour(box);
+  box-shadow: $vd-table-list-expanded-shadow;
+
+  .vd-table-list-cell:first-child {
+    @include vd-table-row-expanded-indicator();
+  }
+
+  // @todo Perhaps not required
+  + .vd-table-list-row--expanded-content {
+    display: table-row;
+  }
+}
+
+// TABLE ROWS - ACTIONS ROW (FOR THINGS SUCH AS HIGHLIGHTING ITEMS SELECTED)
+// -----------------------------------------------------------------
+.vd-table-list-row--actions {
+  background-color: vd-colour(framing);
+  border-bottom: 1px solid vd-colour(keyline);
+}
+
+// TABLE ROWS - EXPANDED ROW CONTENT
+// -----------------------------------------------------------------
+.vd-table-list-row--expanded-content {
+  display: none; // @todo Perhaps not required
+
+  > .vd-table-list-cell {
+    background: vd-colour(box);
+    padding: 0;
+
+    &:first-child {
+      @include vd-table-row-expanded-indicator();
+
+      &::after {
+        content: '';
+        pointer-events: none;
+        box-shadow: $vd-table-list-expanded-shadow;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+      }
+    }
+  }
+}
+
+// TABLE ROWS - HEADER ROW
+// -----------------------------------------------------------------
+.vd-table-list-row--header {
+  border-bottom-color: vd-colour(keyline);
+}
+
+// TABLE ROWS - EXPANDED ROW INNARDS
+// -----------------------------------------------------------------
+.vd-table-list-expanded-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+// TABLE ROWS - EXPANDED ROW ADDITIONAL CONTENT
+// -----------------------------------------------------------------
+.vd-table-list-expanded-content {
+  flex: 1;
+  padding: vd-grid-unit(6) vd-grid-unit(3) vd-grid-unit(6) vd-grid-unit(6);
+
+  @include vd-viewport-media-max(medium) {
+    padding: vd-grid-unit(6) vd-grid-unit(6) vd-grid-unit(3) vd-grid-unit(6);
+  }
+}
+
+// TABLE ROWS - EXPANDED ROW ACTIONS
+// -----------------------------------------------------------------
+.vd-table-list-expanded-actions {
+  flex-basis: 232px;
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  padding: vd-grid-unit(6) vd-grid-unit(6) vd-grid-unit(6) vd-grid-unit(3);
+
+  @include vd-viewport-media-max(medium) {
+    flex-basis: 100%;
+    padding: vd-grid-unit(3) vd-grid-unit(6) vd-grid-unit(3) vd-grid-unit(6);
+  }
+}
+
+.vd-table-list-expanded-actions-btn {
+  display: flex;
+  text-align: left;
+  align-items: baseline;
+  margin-right: auto;
+  margin-bottom: vd-grid-unit(3);
+}
+
+.vd-table-list-expanded-actions-btn--primary {
+  margin-bottom: vd-grid-unit(11);
+}
+
+// TABLE ROWS - HELPERS
+// -----------------------------------------------------------------
+// Todo: can be removed once the Customers table is using the Table component
+.vd-table-list-vcenter {
+  max-height: $vd-table-list-max-height-for-vcentering;
+  position: absolute;
+  top: vd-grid-unit(4);
+  bottom: vd-grid-unit(4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}

package/src/vend-styles/components/TableList/_TableList-ns.scss

@@ -0,0 +1,15 @@
+@mixin vd-table-row-expanded-indicator() {
+  &::before {
+    content: '';
+    top: -1px;
+    left: 0;
+    width: $vd-table-expanded-box-shadow-width;
+    background-color: $vd-colour-table-expanded-border-left;
+    bottom: 0;
+    z-index: 1;
+    position: absolute;
+  }
+}
+
+$vd-table-list-expanded-shadow: 0 10px 12px -2px vd-colour(shadow);
+$vd-table-list-max-height-for-vcentering: 50px;

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

@@ -0,0 +1,53 @@
+@import './UpsellPrimary-ns';
+
+// If there is only a primary upsell and no secondary, then make the upsell primary fill the
+// page with a white background.
+.vd-upsell-primary:only-child {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: vd-colour(box);
+}
+
+.vd-upsell-primary-background {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  color: vd-colour(box);
+  background: vd-colour(box)
+    linear-gradient(
+      to left,
+      vd-colour(box) 50%,
+      $vd-upsell-background-colour 50%
+    )
+    no-repeat;
+}
+
+.vd-upsell-primary-background-inner {
+  display: block;
+  height: 100%;
+  margin: 0 auto;
+  position: relative;
+  max-width: $vd-upsell-background-inner-max-width;
+  background: $vd-upsell-background-colour;
+}
+
+.vd-upsell-primary-upper {
+  position: relative;
+}
+
+.vd-upsell-primary-background svg {
+  position: absolute;
+  height: 100%;
+  right: 0;
+}
+
+.vd-upsell-primary-content {
+  padding: $vd-upsell-content-padding;
+}
+
+.vd-upsell-primary-image {
+  @include vd-upsell-image-alignment();
+}

package/src/vend-styles/components/UpsellPrimary/_UpsellPrimary-ns.scss

@@ -0,0 +1,12 @@
+$vd-upsell-content-padding: vd-grid-unit(11) 0;
+
+// @TODO this is yet to be added to our official colours, for now this is being hardcoded until a name
+// and dark mode variant are decided on.
+$vd-upsell-background-colour: #e9f6e8; // stylelint-disable-line vend/use-colour-function
+$vd-upsell-background-inner-max-width: 1100px;
+
+@mixin vd-upsell-image-alignment() {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}

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

@@ -0,0 +1,30 @@
+@import '../UpsellPrimary/UpsellPrimary-ns';
+
+.vd-upsell-secondary-content {
+  padding: $vd-upsell-content-padding;
+}
+
+.vd-upsell-secondary-features {
+  padding: 0;
+  margin: 0;
+  width: 300px;
+  list-style: none;
+
+  // Horizontally aligns the ✓ icon with the text
+  li {
+    display: flex;
+  }
+
+  li:not(:first-child) {
+    margin-top: vd-grid-unit(4);
+  }
+}
+
+// Vertically aligns the ✓ icon with the text
+.vd-upsell-secondary-feature-icon {
+  margin-top: 2px;
+}
+
+.vd-upsell-secondary-image {
+  @include vd-upsell-image-alignment();
+}

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

@@ -0,0 +1,48 @@
+@import '../../../vend.ui/styles/global/non-styles';
+
+.vd-video-thumbnail-container {
+  position: relative;
+  height: 100%;
+  .vd-video-play-button-container {
+    position: absolute;
+    z-index: 3;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    .vd-video-play-button {
+      background-color: vd-colour(background);
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      i {
+        transform: translateX(3px);
+      }
+    }
+    .vd-video-play-button:hover {
+      background-color: vd-colour(supplementary);
+    }
+    .vd-video-play-button:active {
+      background-color: vd-colour(supplementary);
+    }
+  }
+  .vd-video-thumbnail-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+}
+
+.vd-video-wrapper {
+  width: 100%;
+  iframe {
+    width: 100%;
+  }
+}
+.vd-flex-grow-1 {
+  flex-grow: 1;
+}

package/src/vend-styles/utilities/position.scss

@@ -0,0 +1,3 @@
+.vd-util-pos-relative {
+  position: relative;
+}

package/src/vend-styles/utilities/text.scss

@@ -0,0 +1,9 @@
+.vd-util-text-overflow-break-word {
+  word-break: break-word; // Deprecated.
+  overflow-wrap: break-word;
+}
+
+.vd-util-text-overflow-normal {
+  word-break: normal; // Deprecated.
+  overflow-wrap: normal;
+}

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

@@ -0,0 +1,39 @@
+// @todo Implement https://github.com/vend/rfcs/blob/ap-use-itcss/2020-09-07%20Trading%20-%20Use%20ITCSS.md
+
+@import '../fonts-ui/fonts-ns';
+
+// Necessary to access vend.ui variables/mixins
+@import '../vend.ui/styles/global/non-styles';
+
+// Vend.ui
+@import '../vend.ui/styles/vend-ui';
+
+//
+// Deprecated VEND.UI Styles still in use within Monocle
+//
+// - `vd-flex--row` is used in `Accounting`, `Integrations`, `Products` and `Sales`
+// - `vd-flex--fieldset-row` is used in `Integrations`
+@import '../vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex';
+
+// ITCSS Layer: Components
+@import './components//BarChart/BarChart.scss';
+@import './components/CurrencyInput/CurrencyInput';
+@import './components/DatePicker/DatePicker';
+@import './components/FileUpload/FileUpload.scss';
+@import './components/ProgressBar/ProgressBar';
+@import './components/InboundItem/InboundItem';
+@import './components/LineChart/LineChart';
+@import './components/Modal/Modal';
+@import './components/InboundIndicator/InboundIndicator';
+@import './components/PageHeader/PageHeader';
+@import './components/TableList/TableList';
+@import './components/SearchFilters/SearchFilters';
+@import './components/UpsellPrimary/UpsellPrimary';
+@import './components/UpsellSecondary/UpsellSecondary';
+@import './components/CodeInput/CodeInput';
+@import './components/PromotionModal/PromotionModal';
+@import './components/Carousel/Carousel';
+@import './components/VendVideo/VendVideo';
+// ITCSS Layer: Utilities
+@import './utilities/position.scss';
+@import './utilities/text.scss';

package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex-ns.scss

@@ -0,0 +1,2 @@
+$vd-settings-explanation-width: 240px;
+$vd-settings-explanation-margin-r: 40px;

package/src/vend.ui/_deprecated/v38.0.0/styles/vd-flex/vd-flex.scss

@@ -0,0 +1,47 @@
+@import "../../../../styles/global/_non-styles";
+@import "./vd-flex-ns";
+
+.vd-flex--settings-explanation {
+  min-width: $vd-settings-explanation-width;
+  padding-right: 40px;
+}
+
+@include vd-viewport-media-max(small) {
+  .vd-p {
+    .vd-flex--settings-explanation & {
+      // Removing the margin bottom of the explanation paragraph, as the field will be covering the vertical spacing.
+      margin-bottom: 0;
+    }
+  }
+}
+
+.vd-flex--settings-expanded-content {
+  margin-left: 85px !important;
+}
+
+.vd-flex--container       { flex: 0 0 auto; }
+.vd-flex--fieldset-row    { flex-direction: row; }
+
+@include vd-viewport-media-max(small) {
+  .vd-flex--responsive-column {
+    flex-basis: auto;
+    margin: 0 0 $vd-section-padding-v 0;
+
+    &:last-child { margin-bottom: 0; }
+  }
+
+  .vd-flex--settings-explanation {
+    flex: initial;
+    display: block;
+    padding-right: 0;
+  }
+
+  .vd-flex--settings,
+  .vd-flex--row { flex-direction: column; }
+}
+
+@include vd-viewport-media-max(xsmall) {
+  .vd-flex--fieldset-row  {
+    flex-direction: column;
+  }
+}

package/src/vend.ui/behaviours/vd-align/vd-align.scss

@@ -0,0 +1,3 @@
+.vd-align-left   { text-align: left !important;   }
+.vd-align-center { text-align: center !important; }
+.vd-align-right  { text-align: right !important;  }

package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss

@@ -0,0 +1,3 @@
+$vd-action-bar-background-colour: vd-colour(framing);
+$vd-action-bar--inline-padding: vd-grid-unit(2) vd-grid-unit(6);
+$vd-action-bar--min-height: 45px;

package/src/vend.ui/components/vd-action-bar/vd-action-bar.scss

@@ -0,0 +1,33 @@
+.vd-action-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: $vd-action-bar--min-height;
+  background-color: $vd-action-bar-background-colour;
+
+  @include vd-viewport-media-max($vd-breakpoint-small) {
+    flex-wrap: wrap;
+  }
+}
+
+.vd-action-bar-message {
+  flex-basis: 100%;
+}
+
+.vd-action-bar-actions {
+  flex-shrink: 0;
+
+  .vd-action-bar-message + & {
+    padding-left: vd-grid-unit(3);
+
+    @include vd-viewport-media-max($vd-breakpoint-small) {
+      flex-shrink: 1;
+      padding-top: vd-grid-unit(3);
+      padding-left: 0;
+    }
+  }
+}
+
+.vd-action-bar--inline {
+  padding: $vd-action-bar--inline-padding;
+}

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

@@ -0,0 +1,36 @@
+.vd-autocomplete-input-container {
+  position: relative;
+  display: flex;
+
+  @include vd-input-error-selectors() {
+    .vd-autocomplete-input {
+      @include vd-input-error-styles();
+    }
+  }
+}
+
+.vd-autocomplete-input-typeahead {
+  @include vd-input-box-model($vd-input-width: auto);
+  @include vd-input-text();
+
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  opacity: 1;
+  color: vd-colour(supplementary--text);
+  pointer-events: none;
+  user-select: none;
+  text-align: left;
+
+  // Prevent long names from wrapping onto another line
+  overflow: hidden;
+  white-space: nowrap;
+
+  .vd-input--icon-left + & {
+    padding-left: $vd-input-icon-padding;
+  }
+}
+
+.vd-autocomplete-input-typeahead-match {
+  visibility: hidden;
+}