@transferwise/components 46.130.3 → 46.131.0

package/src/styles/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/styles/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/styles/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;
+  }
+}

package/src/styles/less/mixins/_spacing.less

@@ -0,0 +1,122 @@
+@import (reference) "./_logical-properties.less";
+
+.spacing(@postfix, @spacer) {
+  .spacing-global(@postfix, @spacer);
+  .spacing-vertical(@postfix, @spacer);
+  .spacing-horizontal(@postfix, @spacer);
+}
+
+.spacing-global(@postfix, @spacer) {
+  .m-a-@{postfix} {
+    margin-top: @spacer !important;
+    .margin-for-spacing(right, @spacer) !important;
+
+    margin-bottom: @spacer !important;
+    .margin-for-spacing(left, @spacer) !important;
+  }
+
+  .p-a-@{postfix} {
+    padding-top: @spacer !important;
+    .padding-for-spacing(right, @spacer) !important;
+
+    padding-bottom: @spacer !important;
+    .padding-for-spacing(left, @spacer) !important;
+  }
+}
+
+.spacing-vertical(@postfix, @spacer) {
+  .m-t-@{postfix} {
+    margin-top: @spacer !important;
+  }
+
+  .m-b-@{postfix} {
+    margin-bottom: @spacer !important;
+  }
+
+  .m-y-@{postfix} {
+    margin-top: @spacer !important;
+    margin-bottom: @spacer !important;
+  }
+
+  .p-t-@{postfix} {
+    padding-top: @spacer !important;
+  }
+
+  .p-b-@{postfix} {
+    padding-bottom: @spacer !important;
+  }
+
+  .p-y-@{postfix} {
+    padding-top: @spacer !important;
+    padding-bottom: @spacer !important;
+  }
+}
+
+.spacing-horizontal(@postfix, @spacer) {
+  .m-l-@{postfix} {
+    .margin-for-spacing(left, @spacer) !important;
+  }
+
+  .m-r-@{postfix} {
+    .margin-for-spacing(right, @spacer) !important;
+  }
+
+  .m-x-@{postfix} {
+    .margin-for-spacing(left, @spacer) !important;
+    .margin-for-spacing(right, @spacer) !important;
+  }
+
+  .p-l-@{postfix} {
+    .padding-for-spacing(left, @spacer) !important;
+  }
+
+  .p-r-@{postfix} {
+    .padding-for-spacing(right, @spacer) !important;
+  }
+
+  .p-x-@{postfix} {
+    .padding-for-spacing(left, @spacer) !important;
+    .padding-for-spacing(right, @spacer) !important;
+  }
+}
+
+.responsive-spacing(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
+  .responsive-spacing-global(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop);
+  .responsive-spacing-vertical(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop);
+  .responsive-spacing-horizontal(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop);
+}
+
+.responsive-spacing-global(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
+  .spacing-global(@postfix, @spacing-mobile);
+
+  @media (--screen-sm) {
+    .spacing-global(@postfix, @spacing-tablet);
+  }
+
+  @media (--screen-lg) {
+    .spacing-global(@postfix, @spacing-desktop);
+  }
+}
+.responsive-spacing-vertical(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
+  .spacing-vertical(@postfix, @spacing-mobile);
+
+  @media (--screen-sm) {
+    .spacing-vertical(@postfix, @spacing-tablet);
+  }
+
+  @media (--screen-lg) {
+    .spacing-vertical(@postfix, @spacing-desktop);
+  }
+}
+
+.responsive-spacing-horizontal(@postfix, @spacing-mobile, @spacing-tablet, @spacing-desktop) {
+  .spacing-horizontal(@postfix, @spacing-mobile);
+
+  @media (--screen-sm) {
+    .spacing-horizontal(@postfix, @spacing-tablet);
+  }
+
+  @media (--screen-lg) {
+    .spacing-horizontal(@postfix, @spacing-desktop);
+  }
+}

package/src/styles/less/mixins/_tab-focus.less

@@ -0,0 +1,5 @@
+@import (reference) "../ring.less";
+
+.tab-focus() {
+  .ring();
+}

package/src/styles/less/mixins/_table-row.less

@@ -0,0 +1,47 @@
+// Tables
+
+.table-row-variant(@state; @background; @border; @color:none) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table {
+    > thead > tr,
+    > tbody > tr,
+    > tfoot > tr {
+      > td.@{state},
+      > th.@{state},
+      &.@{state} > td,
+      &.@{state} > th {
+        background-color: @background;
+        .set-color(@color);
+      }
+    }
+  }
+
+  // Adds support for contextual colours on description table
+  //.table > .tbody > dl {
+  //  > dd.@{state},
+  //  &.@{state} > dd,
+  //  &.@{state} {
+  //    background-color: @background;
+  //  }
+  //}
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover > tbody > tr {
+    > td.@{state}:hover,
+    > th.@{state}:hover,
+    &.@{state}:hover > td,
+    &:hover > .@{state},
+    &.@{state}:hover > th {
+      background-color: @background;
+    }
+  }
+}
+
+.set-color(@color:none) when (iscolor(@color)) {
+  color: @color;
+}
+
+// stylelint-disable block-no-empty
+.set-color(@color:none) when not (iscolor(@color)) {}

package/src/styles/less/mixins/_text-emphasis.less

@@ -0,0 +1,39 @@
+.text-emphasis-variant(@small-color, @large-color, @hover) {
+  color: @small-color !important;
+
+  a&:hover,
+  a&:focus {
+    color: @hover !important;
+  }
+
+  .large-text-emphasis(@small-color, @large-color);
+}
+
+.large-text-emphasis(@small-color, @large-color) when not (@small-color = @large-color) {
+  h1&,
+  h2&,
+  h3&,
+  &.h1,
+  &.h2,
+  &.h3,
+  &.title-1,
+  &.title-2,
+  &.title-3,
+  &.np-text-title-screen,
+  &.np-text-title-section,
+  &.np-text-title-subsection,
+  h1,
+  h2,
+  h3,
+  .h1,
+  .h2,
+  .h3,
+  .title-1,
+  .title-2,
+  .title-3,
+  .np-text-title-screen,
+  .np-text-title-section,
+  .np-text-title-subsection {
+    color: @large-color !important;
+  }
+}

package/src/styles/less/mixins/_text-overflow.less

@@ -0,0 +1,8 @@
+// Text overflow
+// Requires inline-block or block for proper styling
+
+.text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/styles/less/mixins/_theming.less

@@ -0,0 +1,7 @@
+.remove-dark-themes-box-shadows() {
+  .np-theme-personal--forest-green &,
+  .np-theme-personal--bright-green &,
+  .np-theme-personal--dark & {
+    box-shadow: none;
+  }
+}