@lightspeed/design-system-css 0.1.0

package/src/vend.ui/components/vd-btn/vd-btn-panel.scss

@@ -0,0 +1,74 @@
+// =================================== Panel Buttons =================================== //
+
+.vd-btn-panel {
+  @include vd-text(label);
+
+  align-items: center;
+  background-color: vd-colour(box);
+  border-radius: $vd-border-radius;
+  border: vd-border(framing, 2px);
+  box-sizing: border-box;
+  color: vd-colour(text);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  font-family: $vd-font-lato;
+  justify-content: center;
+  margin-bottom: vd-grid-unit(2);
+  min-height: vd-grid-unit(30);
+  min-width: vd-grid-unit(30);
+  outline: none;
+  padding: vd-grid-unit(3) vd-grid-unit(5);
+  position: relative;
+  text-align: center;
+
+  transition-property: background, color, border, box-shadow;
+  transition: all $vd-time-s;
+
+  @include vd-btn-disabled();
+
+  &:focus  {
+    border-color: vd-colour(go);
+    @include vd-btn-shadow(go);
+  }
+
+  &:hover  {
+    border-color: vd-colour(go-lighter);
+    @include vd-btn-shadow(go);
+  }
+
+  &:active {
+    background-color: vd-rgba(vd-colour(box-rgb), 0.2);
+  }
+}
+
+// =================================== Selected Modifier =================================== //
+
+.vd-btn-panel--selected {
+  border-color: vd-colour(do);
+
+  &:focus, &:hover  {
+    border-color: vd-colour(do-lighter);
+    @include vd-btn-shadow(do);
+  }
+
+  &:active {
+    border-color: vd-colour(do-darker);
+  }
+}
+
+// =================================== Panel Button Groups =================================== //
+
+.vd-btn-panel-group {
+  flex-wrap: wrap;
+  display: flex;
+
+  > .vd-btn-panel {
+    margin: $vd-btn-group-margin;
+  }
+
+  @include vd-viewport-media-max(xsmall) {
+    min-width: 100%;
+  }
+}

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

@@ -0,0 +1,112 @@
+// =================================== Base Button =================================== //
+
+.vd-btn {
+  @include vd-text(button);
+
+  border-radius: $vd-border-radius;
+  border: $vd-btn-stroke-width solid transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: $vd-font-lato;
+  padding: $vd-btn-padding;
+  position: relative;
+  text-align: center;
+
+  transition-property: background, color, border, box-shadow;
+  transition: all $vd-time-s;
+
+  &:not(.vd-btn--link) {
+    outline: none;
+  }
+
+  @include vd-btn-disabled();
+}
+
+// Disable click events for anchors using button classes
+a.vd-btn {
+  &.disabled {
+    pointer-events: none;
+  }
+}
+
+// =================================== Button Categories and Modifiers =================================== //
+
+@each $name in $vd-btn-categories {
+  .vd-btn--#{$name} {
+    @include vd-btn($name);
+  }
+
+  .vd-btn--icon-#{$name} {
+    @include vd-btn-icon($name);
+  }
+
+  .vd-btn--text-#{$name} {
+    @include vd-btn-text($name);
+  }
+}
+
+// =================================== Link Buttons =================================== //
+
+.vd-btn--link {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  display: inline;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0;
+  text-align: left;
+  text-decoration: underline;
+
+  &:hover, &:focus {
+    color: vd-colour(go);
+  }
+}
+
+// =================================== Jumbo Buttons =================================== //
+
+.vd-btn--jumbo {
+  @include vd-text(sub-heading);
+  padding: vd-grid-unit(4) vd-grid-unit(8);
+}
+
+// =================================== Full Width Buttons =================================== //
+
+.vd-btn--block {
+  display: block;
+  width: 100%;
+}
+
+// =================================== Button Groups =================================== //
+
+.vd-btn-group {
+  margin: -$vd-btn-group-margin;
+
+  > .vd-btn {
+    margin: $vd-btn-group-margin;
+  }
+
+  &.vd-btn-group--nowrap {
+    flex-wrap: nowrap;
+  }
+}
+
+// =================================== Panel Buttons =================================== //
+
+@import './vd-btn-panel';
+
+// =================================== Misc =================================== //
+
+/* When buttons are disabled they don't trigger onMouseOver / onMouseOut events but the event will bubble
+  up from child elements. `vd-btn-hover-assist` occupies all of the space within the button so mouse events are
+  consistently triggered. */
+  .vd-btn, .vd-tab-button {
+    &:disabled:hover > .vd-btn-hover-assist {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+    }
+  }

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

@@ -0,0 +1,9 @@
+$vd-card-border-radius: 5px;
+$vd-card-framing: 2px;
+$vd-card-spacing: 5px;
+
+@mixin vd-card() {
+  border: vd-border(framing, $vd-card-framing);
+  background-color: vd-colour(box);
+  border-radius: $vd-card-border-radius;
+}

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

@@ -0,0 +1,11 @@
+.vd-card {
+  @include vd-card();
+
+  & + .vd-card {
+    margin-left: $vd-card-spacing;
+  }
+
+  &.vd-card--active {
+    @include vd-shadow();
+  }
+}

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

@@ -0,0 +1,120 @@
+vd-carousel { // stylelint-disable-line selector-type-no-unknown
+  display: flex;
+  flex-direction: column;
+}
+
+.vd-carousel-frame-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  overflow: hidden;
+  flex: 1;
+}
+
+@keyframes vd-slide-in-left {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes vd-slide-out-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(-200%);
+  }
+}
+@keyframes vd-slide-right {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+vd-carousel-frame { // stylelint-disable-line selector-type-no-unknown
+  display: flex;
+  flex: 1 0 100%;
+  order: 2;
+  visibility: hidden;
+  max-width: 100%;
+
+  animation-duration: 0.5s;
+  animation-timing-function: ease-in-out;
+}
+
+.vd-carousel-frame-content {
+  flex: 1 1 0;
+  max-width: 100%;
+}
+
+.vd-carousel-frame-transition-left,
+.vd-carousel-frame-transition-right {
+  visibility: visible;
+  order: 1;
+}
+
+.vd-carousel-frame-active {
+  visibility: visible;
+  order: 0;
+
+  &.vd-carousel-frame-transition-left {
+    animation-name: vd-slide-in-left;
+  }
+
+  &.vd-carousel-frame-transition-right {
+    animation-name: vd-slide-right;
+  }
+}
+
+.vd-carousel-frame-transition-left:not(.vd-carousel-frame-active) {
+  animation-name: vd-slide-out-left;
+}
+
+.vd-carousel-frame-transition-right:not(.vd-carousel-frame-active) {
+  animation-name: vd-slide-right;
+}
+
+.vd-carousel-paginator {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: vd-colour(box);
+  height: 72px;
+}
+
+.vd-carousel-paginator-paddle {
+  width: 45px;
+  font-size: 18px;
+}
+
+.vd-carousel-paginator-indicators {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vd-carousel-paginator-indicator {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: vd-colour(keyline);
+  }
+}
+
+.vd-carousel-paginator-indicator--active::before {
+  background-color: vd-colour(do);
+}

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

@@ -0,0 +1,7 @@
+$vd-checkbox-length: vd-grid-unit(6);
+
+$vd-checkbox-tick-thickness: 4px;
+$vd-checkbox-tick-width: 6px;
+$vd-checkbox-tick-height: 11px;
+
+$vd-checkbox-spacing: vd-grid-unit(3);

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

@@ -0,0 +1,158 @@
+@keyframes vd-checkbox-checked {
+  0%  { height: 0; width: 0; }
+  25% { height: 0; width: $vd-checkbox-tick-width; }
+  50% { height: $vd-checkbox-tick-height; width: $vd-checkbox-tick-width; }
+}
+
+/* label-only-checkbox is for when only the checkbox and label should respond to onlick. Not the description aswell. */
+
+.vd-checkbox {
+  display: inline-block;
+  position: relative;
+  margin: 0 vd-grid-unit(2);
+
+  &:first-child { margin-left: 0 }
+  &:last-child  { margin-right: 0 }
+}
+
+.vd-label-only-checkbox {
+  display: inline-block;
+}
+
+.vd-checkbox-container {
+  margin-bottom: $vd-checkbox-spacing;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  cursor: pointer;
+
+  &:last-child  { margin-bottom: 0 }
+}
+
+.vd-label-only-checkbox-container{
+  display: flex;
+}
+
+.vd-checkbox-input-container {
+  display: flex;
+  align-items: center;
+}
+
+.vd-label-only-checkbox-input-container {
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  flex-direction: row;
+  cursor: pointer;
+}
+
+.vd-checkbox-label { margin-left: $vd-checkbox-spacing; }
+
+.vd-label-only-checkbox-label { 
+  margin: auto 0 auto $vd-checkbox-spacing;
+}
+
+.vd-checkbox-description {
+  @include vd-text(supplementary);
+  margin-top: vd-grid-unit(1);
+  margin-left: $vd-checkbox-length + $vd-checkbox-spacing;
+}
+
+.vd-checkbox-input { @extend %vd-invisible-checkbox-input; }
+
+.vd-checkbox-tick {
+  flex-shrink: 0;
+  position: relative;
+  height: $vd-checkbox-length;
+  width: $vd-checkbox-length;
+  background-color: vd-colour(box);
+  border: vd-border(framing);
+  border-radius: $vd-border-radius;
+  box-sizing: border-box;
+
+  &:after {
+    content: '';
+    box-sizing: content-box;
+    display: block;
+    position: absolute;
+    border-right: vd-border(framing, $vd-checkbox-tick-thickness);
+    border-top: vd-border(framing, $vd-checkbox-tick-thickness);
+    border-color: vd-colour(framing);
+    transform: scaleX(-1) rotate(180deg + -45deg);
+    transform-origin: left top;
+    height: $vd-checkbox-tick-height;
+    width: $vd-checkbox-tick-width;
+    top: 11px;
+    left: 2px;
+    opacity: 0;
+    transition: opacity $vd-time-s;
+  }
+}
+
+.vd-checkbox-input:hover + .vd-checkbox-tick:after {
+  opacity: 1;
+ }
+
+// Checked
+.vd-checkbox-input:checked + .vd-checkbox-tick {
+  transition: background-color $vd-time-l;
+  background-color: vd-colour(do);
+  border-color: vd-colour(do);
+
+  &:after {
+    opacity: 1;
+    animation: vd-checkbox-checked $vd-time-l;
+    border-color: vd-colour(text-action);
+    box-sizing: content-box;
+    backface-visibility: hidden;
+  }
+}
+
+// Disabled state
+.vd-disabled .vd-checkbox-input,
+.vd-checkbox-input:disabled {
+  cursor: not-allowed;
+  filter: grayscale(100%);
+
+  &:hover:not(:checked) + .vd-checkbox-tick:after { opacity: 0; }
+
+  ~ .vd-checkbox-label {
+    opacity: $vd-opacity;
+  }
+
+  &:checked ~ .vd-checkbox-tick {
+    filter: grayscale(100%);
+    opacity: $vd-opacity;
+  }
+}
+
+// Mixed state
+.vd-checkbox--mixed .vd-checkbox-tick {
+  border: 2px solid vd-colour(do);
+}
+
+.vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
+  background-color: vd-colour(do);
+  border: none;
+  top: 9px;
+  left: 6px;
+  width: 2px;
+  height: 8px;
+  opacity: 1;
+  transform: scaleX(-1) rotate(90deg);
+}
+
+// ReadOnly state
+.vd-checkbox--readonly {
+  cursor: auto;
+
+  &.vd-checkbox--unselected {
+    filter: grayscale(100%);
+    opacity: $vd-opacity;
+  }
+}
+
+.vd-checkbox-icon {
+  width: $vd-checkbox-length;
+  height: $vd-checkbox-length;
+}

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

@@ -0,0 +1,74 @@
+// 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);
+
+// Date picker no end date
+$vd-datepicker-range-no-end-height: 32px;
+
+// Table
+$vd-datepicker-table-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);
+
+// Select
+$vd-datepicker-select-horizontal-positioning: 29px;
+$vd-datepicker-select-vertical-positioning: 15px;
+
+// Select icon
+$vd-datepicker-select-icon-position-top: 10px;
+$vd-datepicker-select-icon-position-right-even: 37px;
+$vd-datepicker-select-icon-position-right-odd: 110px;
+$vd-datepicker-select-icon-border-width: 4px;
+$vd-datepicker-select-arrow-border: 5px solid vd-colour(text);
+
+// inputs
+$vd-datepicker-data-inputs-width: 245px;
+$vd-datepicker-date-input-border-radius: $vd-border-radius 0 0 $vd-border-radius;
+$vd-datepicker-time-input-border-radius: 0 $vd-border-radius $vd-border-radius 0;
+
+// 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;
+}
+
+@mixin next-prev-arrow-common--disabled {
+  border-right: $vd-datepicker-next-prev-arrow-border-disabled;
+  border-top: $vd-datepicker-next-prev-arrow-border-disabled;
+}
+
+@mixin vd-datepicker-select-common {
+  top: -$vd-datepicker-select-vertical-positioning;
+  position: absolute;
+  background: $vd-datepicker-background;
+}
+
+@mixin vd-datepicker-select-arrow-common {
+  position: absolute;
+  content: " ";
+  pointer-events: none;
+  visibility: visible;
+  width: 0;
+  height: 0;
+  border-left: $vd-datepicker-select-icon-border-width solid transparent;
+  border-right: $vd-datepicker-select-icon-border-width solid transparent;
+  z-index: $vd-z-index-content-base;
+}