@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-9f6647e

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

@@ -1,226 +0,0 @@
-
-// 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/neptune-css/less/mixins/_logical-properties.less

@@ -1,5 +0,0 @@
-// 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/neptune-css/less/mixins/_nav-divider.less

@@ -1,10 +0,0 @@
-// Horizontal dividers
-//
-// Dividers (basically an hr) within dropdowns and nav lists
-
-.nav-divider(@color: #e5e5e5) {
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  background-color: @color;
-}

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

@@ -1,10 +0,0 @@
-// 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/neptune-css/less/mixins/_panels.less

@@ -1,23 +0,0 @@
-.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/neptune-css/less/mixins/_physical-properties.less

@@ -1,110 +0,0 @@
-// 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/neptune-css/less/mixins/_reset-text.less

@@ -1,22 +0,0 @@
-@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/neptune-css/less/mixins/_sequence.less

@@ -1,203 +0,0 @@
-@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;
-  }
-}