@transferwise/neptune-css 0.0.0-experimental-1181467

package/src/less/mixins/_logical-properties-modern-browsers.less

@@ -0,0 +1,226 @@
+
+// Mixin to support Logical properties/values for modern browsers
+
+// Custom property for the cases which doesn't exist a logical value. (Translations, linear-gradients)
+:root {
+  --left: left;
+  --right: right;
+
+  &[dir="rtl"] {
+    --left: right;
+    --right: left;
+  }
+}
+
+// CSS property: float: Flow-relative values inline-start and inline-end: https://caniuse.com/mdn-css_properties_float_flow_relative_values
+// Still needs support in Chrome / Safari / Edge
+
+.float(@direction) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      float: right;
+    }
+
+    float: @direction;
+    float: inline-start;
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      float: left;
+    }
+
+    float: @direction;
+    float: inline-end;
+  }
+}
+
+// CSS property: clear: Flow-relative values inline-start and inline-end: https://caniuse.com/mdn-css_properties_clear_flow_relative_values
+
+.clear(@direction) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      clear: right;
+    }
+
+    clear: @direction;
+    clear: inline-start;
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      clear: left;
+    }
+
+    clear: @direction;
+    clear: inline-end;
+  }
+}
+
+// CSS property: text-align: Flow-relative values start and end: https://caniuse.com/mdn-css_properties_text-align_flow_relative_values_start_and_end
+
+.text-align(@direction) {
+  & when (@direction = left) {
+    text-align: start;
+  }
+
+  & when (@direction = right) {
+    text-align: end;
+  }
+}
+
+// CSS Logical Properties: https://caniuse.com/css-logical-props
+
+.padding(@direction, @value) {
+  & when (@direction = left) {
+    padding-inline-start: @value;
+  }
+
+  & when (@direction = right) {
+    padding-inline-end: @value;
+  }
+}
+
+// Use only if the right and left values are different or you have to step up specificity of the padding.
+// Use for single value shorthand 'padding: var(--foo);' -> '.padding-shorthand(var(--foo))'
+// Use for multiple value shorthand 'padding: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' -> '.padding-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
+
+.padding-shorthand(@value1, @value2: ~'', @value3: ~'', @value4: ~'') {
+  [dir="rtl"] & {
+    padding: @value1 @value4 @value3 @value2;
+  }
+
+  html:not([dir="rtl"]) & {
+    padding: @value1 @value2 @value3 @value4;
+  }
+}
+
+// CSS Logical Properties: https://caniuse.com/css-logical-props
+
+.margin(@direction, @value) {
+  & when (@direction = left) {
+    margin-inline-start: @value;
+  }
+
+  & when (@direction = right) {
+    padding-inline-end: @value;
+  }
+}
+
+// Use only if the right and left values are different or you have to step up specificity of the margin.
+// Use for single value shorthand 'margin: var(--foo);' -> '.margin-shorthand(var(--foo))'
+// Use for multiple value shorthand 'margin: var(--foo1) var(--foo2) var(--foo3) var(--foo4);' -> '.margin-shorthand(var(--foo1), var(--foo2), var(--foo3), var(--foo4))'
+
+.margin-shorthand(@value1, @value2: ~'', @value3: ~'', @value4: ~'') {
+  [dir="rtl"] & {
+    margin: @value1 @value4 @value3 @value2;
+  }
+
+  html:not([dir="rtl"]) & {
+    margin: @value1 @value2 @value3 @value4;
+  }
+}
+
+// CSS property: inset-inline (positions): https://caniuse.com/mdn-css_properties_inset-inline
+
+.left(@value) {
+  inset-inline-start: @value;
+}
+
+.right(@value) {
+  inset-inline-end: @value;
+}
+
+// CSS property: border-inline-start https://caniuse.com/mdn-css_properties_border-inline-start
+
+.border(@direction, @size, @style: ~'', @color: ~'') {
+  & when (@direction = left) {
+    border-inline-start: @size @style @color;
+  }
+
+  & when (@direction = right) {
+    border-inline-end: @size @style @color;
+  }
+}
+
+.border-width(@direction, @size) {
+  & when (@direction = left) {
+    border-inline-start-width: @size;
+  }
+
+  & when (@direction = right) {
+    border-inline-end-width: @size;
+  }
+}
+
+// CSS property: border-start-start-radius: https://caniuse.com/mdn-css_properties_border-start-start-radius
+// Still needs support in Safari
+
+//  | start-start | start-end |
+//  | end-start   | end-end   |
+
+.border-radius(@direction, @radius) {
+  & when (@direction = left) {
+    border-start-start-radius: @radius;
+    border-end-start-radius: @radius;
+  }
+
+  & when (@direction = right) {
+    border-start-end-radius: @radius;
+    border-end-end-radius: @radius;
+  }
+}
+
+.border-top-dir-radius(@direction, @radius) {
+  & when (@direction = left) {
+    border-start-start-radius: @radius;
+  }
+
+  & when (@direction = right) {
+    border-start-end-radius: @radius;
+  }
+}
+
+.border-bottom-dir-radius(@direction, @radius) {
+  & when (@direction = left) {
+    border-end-start-radius: @radius;
+  }
+
+  & when (@direction = right) {
+    border-end-end-radius: @radius;
+  }
+}
+
+// Background position
+
+.background-position(@direction, @vertical-direction: ~'') {
+  & when (@direction = left) {
+    background-position: var(--left) @vertical-direction;
+  }
+
+  & when (@direction = right) {
+    background-position: var(--right) @vertical-direction;
+  }
+}
+
+// Horizontal linear gradient
+
+.background-linear-gradient(@direction, @color1, @color2) {
+  & when (@direction = left) {
+    background: linear-gradient(to var(--left), @color1, @color2);
+  }
+
+  & when (@direction = right) {
+    background: linear-gradient(to var(--right), @color1, @color2);
+  }
+}
+
+// Horizontal translations
+
+.translateX(@value, @transform2: ~'', @transform3: ~'') {
+  [dir="rtl"] & {
+    transform: translateX(@value * -1) @transform2 @transform3;
+  }
+
+  transform: translateX(@value) @transform2 @transform3;
+}

package/src/less/mixins/_logical-properties.less

@@ -0,0 +1,5 @@
+// Custom support for logical properties/values. Select one of the options:
+
+// @import '../mixins/_physical-properties.less';
+@import "./_logical-properties-IE-friendly.less";
+// @import '../mixins/_logical-properties-modern-browsers.less';

package/src/less/mixins/_nav-vertical-align.less

@@ -0,0 +1,10 @@
+// Navbar vertical align
+//
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);`
+// to calculate the appropriate top margin.
+
+.navbar-vertical-align(@element-height) {
+  margin-top: (((@navbar-height - @element-height) / 2) + 1px);
+  margin-bottom: (((@navbar-height - @element-height) / 2) - 1px);
+}

package/src/less/mixins/_panels.less

@@ -0,0 +1,23 @@
+.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
+  border-color: @border !important;
+
+  & > .panel-heading {
+    color: @heading-text-color;
+    border-color: @heading-border;
+
+    + .panel-collapse > .panel-body {
+      border-top-color: @border;
+    }
+
+    .badge {
+      color: @heading-bg-color;
+      background-color: @heading-text-color;
+    }
+  }
+
+  & > .panel-footer {
+    + .panel-collapse > .panel-body {
+      border-bottom-color: @border;
+    }
+  }
+}

package/src/less/mixins/_physical-properties.less

@@ -0,0 +1,110 @@
+// Mixin to add physical properties/values without RTL support for a lighter bundle.
+
+// Float left/right
+
+.float(@direction) {
+  & when (@direction = left) {
+    float: @direction;
+  }
+
+  & when (@direction = right) {
+    float: @direction;
+  }
+}
+
+// Clear left/right
+
+.clear(@direction) {
+  & when (@direction = left) {
+    clear: @direction;
+  }
+
+  & when (@direction = right) {
+    clear: @direction;
+  }
+}
+
+// text-align: left/right
+
+.text-align(@direction) {
+  & when (@direction = left) {
+    text-align: left;
+  }
+
+  & when (@direction = right) {
+    text-align: right;
+  }
+}
+
+// padding-left / padding-right
+
+.padding(@direction, @value) {
+  & when (@direction = left) {
+    padding-left: @value;
+  }
+
+  & when (@direction = right) {
+    padding-right: @value;
+  }
+}
+
+// margin-left / margin-right
+
+.margin(@direction, @value) {
+  & when (@direction = left) {
+    margin-left: @value;
+  }
+
+  & when (@direction = right) {
+    padding-left: @value;
+  }
+}
+
+// left / right (positions)
+
+.left(@value) {
+  left: @value;
+}
+
+.right(@value) {
+  right: @value;
+}
+
+// border-left / border-right
+
+.border(@direction, @size, @style: ~'', @color: ~'') {
+  & when (@direction = left) {
+    border-left: @size @style @color;
+  }
+
+  & when (@direction = right) {
+    border-right: @size @style @color;
+  }
+}
+
+.border-width(@direction, @size) {
+  & when (@direction = left) {
+    border-left-width: @size;
+  }
+
+  & when (@direction = right) {
+    border-right-width: @size;
+  }
+}
+
+// Border radius
+
+//  | top-left      | top-right |
+//  | bottom-left   | bottom-right   |
+
+.border-radius(@direction, @radius) {
+  & when (@direction = left) {
+    border-top-left-radius: @radius;
+    border-bottom-left-radius: @radius;
+  }
+
+  & when (@direction = right) {
+    border-top-right-radius: @radius;
+    border-bottom-right-radius: @radius;
+  }
+}

package/src/less/mixins/_reset-text.less

@@ -0,0 +1,22 @@
+@import (reference) "_logical-properties.less";
+
+.reset-text() {
+  font-family: var(--font-family-regular);
+
+  // We deliberately do NOT reset font-size.
+
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: var(--size-24);
+  .text-align(left);
+
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+}

package/src/less/mixins/_sequence.less

@@ -0,0 +1,203 @@
+@import (reference) "_logical-properties.less";
+
+.sequence-vertical-spacing(
+@sequence-margin,
+@sequence-item-spacing-mobile,
+@sequence-item-spacing-desktop,
+@pip-offset-mobile,
+@pip-offset-desktop,
+@sequence-step-height,
+@sequence-icon-size
+) {
+  @sequence-outside-spacing: (@sequence-margin + @sequence-item-spacing-desktop);
+
+  > li {
+    padding-top: @sequence-item-spacing-mobile;
+    padding-bottom: @sequence-item-spacing-mobile;
+
+    &:first-child {
+      margin-top: @sequence-margin;
+    }
+
+    &:last-child {
+      margin-bottom: @sequence-margin;
+    }
+
+    @media (min-width: @screen-md-min) {
+      padding-top: @sequence-item-spacing-desktop;
+      padding-bottom: @sequence-item-spacing-desktop;
+    }
+
+    &::before {
+      margin-top: ((@sequence-step-height / 2) - (@sequence-pip-size / 2));
+    }
+
+    &::after {
+      top: @pip-offset-desktop;
+    }
+
+    &:first-child::after {
+      height: 100%;
+    }
+
+    &:last-child::after {
+      height: 0;
+    }
+  }
+
+  &.sequence-top {
+    > li:first-child {
+      padding-top: @sequence-outside-spacing;
+      margin-top: 0;
+
+      &::after {
+        height: ~"calc(100% + @{pip-offset-desktop})";
+      }
+    }
+  }
+
+  &.sequence-bottom {
+    > li:last-child {
+      padding-bottom: @sequence-outside-spacing;
+      margin-bottom: 0;
+
+      &::after {
+        height: ~"calc(100% - @{pip-offset-desktop})";
+      }
+    }
+  }
+
+  &.sequence-top.sequence-bottom {
+    > li:first-child:last-child::after {
+      height: 100%;
+    }
+  }
+
+  .sequence-icon {
+    top: ((@sequence-step-height / 2) - (@sequence-icon-size / 2) + @sequence-item-spacing-mobile);
+
+    @media (min-width: @screen-md-min) {
+      top: ((@sequence-step-height / 2) - (@sequence-icon-size / 2) + @sequence-item-spacing-desktop);
+    }
+  }
+
+  &.sequence-top > li:first-child .sequence-icon {
+    top: (((@sequence-step-height / 2) - (@sequence-icon-size / 2)) + @sequence-outside-spacing);
+  }
+}
+
+.sequence-horizontal-spacing(
+@sequence-item-padding,
+@sequence-pip-size,
+@sequence-icon-sm,
+@sequence-icon-md,
+@sequence-icon-lg
+) {
+  .padding(left, @sequence-item-padding);
+
+  > li {
+    &::before {
+      .margin(left, (-@sequence-item-padding - (@sequence-pip-size / 2) + 1px));
+    }
+
+    &::after {
+      .left(-@sequence-item-padding);
+    }
+  }
+
+  .sequence-icon {
+    .margin(left, (-@sequence-item-padding - (@sequence-icon-sm / 2) + 1px));
+  }
+
+  .sequence-icon-md {
+    .margin(left, (-@sequence-item-padding - (@sequence-icon-md / 2) + 1px));
+  }
+
+  .sequence-icon-lg {
+    .margin(left, (-@sequence-item-padding - (@sequence-icon-lg / 2) + 1px));
+  }
+}
+
+.sequence-variant(@type, @color) {
+  @variant: ~".sequence-@{type}";
+
+  @{variant} {
+    .sequence-variant-detail(
+      @color,
+      @pip-offset-sm, @pip-offset-md, @pip-offset-lg,
+      var(--color-border-neutral), @color-navy-border-neutral, @sequence-margin-lg
+    );
+  }
+
+  @keyframes ~"sequence-pip-@{type}" {
+    from { border-color: @color-navy-border-neutral; }
+    to { border-color: @color; }
+  }
+}
+
+// TODO update description
+// The line for the active item needs to be the active colour before the 'pip' and
+// the inactive colour afterwards.  This is tricky because we don't know the height.
+// However, we can achieve this with one element by using a gradient with a hard
+// transition between colours at the right point.  We need several variants to cover
+// our large and inverse options.
+
+.sequence-variant-detail(
+@color,
+@pip-offset-sm,
+@pip-offset-md,
+@pip-offset-lg,
+@sequence-border,
+@sequence-inverse-border,
+@sequence-margin
+) {
+  > li {
+    border-color: @color;
+
+    &::after {
+      background-image: linear-gradient(@color 0, @color 50%, @sequence-border 50%, @sequence-border 100%);
+    }
+  }
+
+  &.sequence-inverse > li {
+    &::after {
+      background-image:
+        linear-gradient(
+          @color 0,
+          @color 50%,
+          @sequence-inverse-border 50%,
+          @sequence-inverse-border 100%
+        );
+    }
+  }
+
+  > .active {
+    &::before {
+      border-color: @color;
+      background-color: @color;
+    }
+  }
+}
+
+.sequence-animation-variant(@type) {
+  > li::before {
+    animation:
+      @speed-per-item linear 0.3s both ~"sequence-pip-@{type}",
+      @speed-per-pulse linear 0.3s forwards ~"sequence-pulse-@{type}";
+  }
+
+  > .active::before {
+    animation:
+      @speed-per-item linear 0.3s both ~"sequence-pip-@{type}",
+      @speed-per-pulse linear 0.3s infinite ~"sequence-pulse-@{type}";
+  }
+}
+
+.sequence-animation-delays(@counter) when (@counter > 0) {
+  .sequence-animation-delays((@counter - 1));
+
+  > li:nth-child(@{counter}):before,
+  > li:nth-child(@{counter}):after {
+    animation-delay: (@counter * @speed-per-item) !important;
+  }
+}