@transferwise/components 46.130.2 → 46.131.0

package/src/styles/less/mixins/_buttons.less

@@ -0,0 +1,82 @@
+// Mixins to generate button styles and state variations
+.button-variant(
+@color;
+@color-hover;
+@background;
+@background-hover;
+@background-active;
+@border;
+@border-hover;
+@border-active;
+@dropdown-background: @background;
+@color-active: @color-hover) {
+  color: @color;
+  background-color: @background;
+  border-color: @border;
+  transition: color, background-color 0.15s ease-in-out;
+
+  &:not(.disabled, :disabled, .btn-loading):hover {
+    color: @color-hover;
+    background-color: @background-hover;
+    border-color: @border-hover;
+  }
+
+  &:not(.disabled, :disabled, .btn-loading):active,
+  &:not(.disabled, :disabled, .btn-loading).active,
+  .open > .dropdown-toggle& {
+    color: @color-active;
+    background-color: @background-active;
+    border-color: @border-active;
+
+    &:not(.disabled, :disabled):hover {
+      color: @color-active;
+      background-color: @background-active;
+      border-color: @border-active;
+    }
+  }
+
+  &:not(.disabled, :disabled, .btn-loading).active,
+  .open > .dropdown-toggle& {
+    background-image: none;
+  }
+
+  .badge {
+    color: @background;
+    background-color: @color;
+  }
+}
+
+.button-size(@padding; @font-size; @line-height; @border-radius: 9999px; @min-height: 0) {
+  padding: @padding;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+  // TODO: Remove min-height in The Future
+  min-height: @min-height;
+
+  .dropdown-menu {
+    > li > a {
+      font-size: @font-size;
+      line-height: @line-height;
+    }
+  }
+}
+
+// @TODO Deprecate
+.button-outline(@color, @active, @inverse) {
+  .button-variant(
+    @color;
+    @inverse;
+    transparent;
+    @color;
+    @active;
+    @color;
+    @color;
+    @active;
+    #FFF
+  );
+}
+
+.btn-sm {
+  height: 32px;
+}

package/src/styles/less/mixins/_center-block.less

@@ -0,0 +1,7 @@
+// Center-align a block level element
+
+.center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}

package/src/styles/less/mixins/_clearfix.less

@@ -0,0 +1,23 @@
+// Clearfix
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+//
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+
+.clearfix() {
+  &::before,
+  &::after {
+    content: " "; // 1
+    display: table; // 2
+  }
+
+  &::after {
+    clear: both;
+  }
+}

package/src/styles/less/mixins/_flex.less

@@ -0,0 +1,105 @@
+.flex-properties(@break-point) {
+  .d-flex@{break-point} {
+    display: flex;
+  }
+
+  .d-inline-flex@{break-point} {
+    display: inline-flex;
+  }
+
+  .flex-column@{break-point} {
+    flex-direction: column;
+  }
+
+  .flex-row@{break-point} {
+    flex-direction: row;
+  }
+
+  .justify-content-start@{break-point} {
+    justify-content: flex-start;
+  }
+
+  .justify-content-end@{break-point} {
+    justify-content: flex-end;
+  }
+
+  .justify-content-center@{break-point} {
+    justify-content: center;
+  }
+
+  .justify-content-between@{break-point} {
+    justify-content: space-between;
+  }
+
+  .justify-content-around@{break-point} {
+    justify-content: space-around;
+  }
+
+  .align-items-start@{break-point} {
+    align-items: flex-start;
+  }
+
+  .align-items-end@{break-point} {
+    align-items: flex-end;
+  }
+
+  .align-items-center@{break-point} {
+    align-items: center;
+  }
+
+  .align-items-baseline@{break-point} {
+    align-items: baseline;
+  }
+
+  .align-items-stretch@{break-point} {
+    align-items: stretch;
+  }
+
+  .align-self-start@{break-point} {
+    align-self: flex-start;
+  }
+
+  .align-self-end@{break-point} {
+    align-self: flex-end;
+  }
+
+  .align-self-center@{break-point} {
+    align-self: center;
+  }
+
+  .align-self-baseline@{break-point} {
+    align-self: baseline;
+  }
+
+  .align-self-stretch@{break-point} {
+    align-self: stretch;
+  }
+
+  .flex-nowrap@{break-point} {
+    flex-wrap: nowrap;
+  }
+
+  .flex-wrap@{break-point} {
+    flex-wrap: wrap;
+  }
+
+  .order-0@{break-point} {
+    order: 0;
+  }
+
+  .order-1@{break-point} {
+    order: 1;
+  }
+
+  .order-2@{break-point} {
+    order: 2;
+  }
+
+  .order-3@{break-point} {
+    order: 3;
+  }
+
+  .flex-grow-1@{break-point} {
+    flex-grow: 1;
+  }
+}

package/src/styles/less/mixins/_forms.less

@@ -0,0 +1,130 @@
+@import (reference) "../core/_typography.less";
+
+// Form validation states
+
+.form-control-validation(@text-color; @border-color; @border-hover;) {
+  border-color: @border-color !important;
+
+  // DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
+  .control-label,
+
+  // Color the label and help text
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline,
+  &.radio label,
+  &.checkbox label,
+  &.radio-inline label,
+  &.checkbox-inline label,
+  .radio label,
+  .checkbox label,
+  .radio-inline label,
+  .checkbox-inline label,
+  .input-group-addon {
+    color: @text-color !important;
+    border-color: @border-color !important;
+  }
+
+  // Set the border and box shadow on specific inputs to match
+  .form-control,
+  .btn-input,
+  .btn-input:not(.disabled, :disabled):focus,
+  .btn-input:not(.disabled, :disabled):hover,
+  .input-group-addon,
+  .alert {
+    border-color: @border-color !important;
+  }
+
+  &:active,
+  &:focus,
+  &:focus-within {
+    .form-control,
+    &.radio label,
+    &.checkbox label,
+    .btn-input,
+    .input-group-addon,
+    .input-group .form-control:focus,
+    .alert {
+      border-color: @border-hover !important;
+    }
+  }
+
+  &:not(.disabled, :disabled):hover {
+    &.radio label,
+    &.checkbox label,
+    .btn-input,
+    .alert {
+      border-color: @border-hover !important;
+    }
+  }
+
+  // Optional feedback icon
+  .form-control-feedback {
+    color: @text-color;
+  }
+
+  .radio,
+  &.checkbox {
+    > label {
+      &:not(.disabled, :disabled) {
+        border-color: @border-color;
+        color: var(--color-content-primary);
+      }
+
+      &:not(.disabled, :disabled):hover,
+      &:focus-within {
+        border-color: @border-hover !important;
+
+        .tw-checkbox-button,
+        .tw-radio-button {
+          border-color: @border-hover !important;
+        }
+      }
+    }
+
+    .tw-checkbox-button,
+    .tw-radio-button {
+      border-color: @border-color;
+    }
+  }
+}
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `var(--color-interactive-secondary-active)` CSS custom prop.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+.form-control-focus(@color: var(--color-interactive-primary)) {
+  &:not(.disabled, :disabled):focus {
+    border-color: @color;
+    outline: 0;
+  }
+}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+.input-size(@input-height; @input-padding; @border-radius) {
+  min-height: @input-height;
+  padding: @input-padding;
+  border-radius: @border-radius;
+
+  select& {
+    min-height: @input-height;
+  }
+
+  textarea&,
+  select[multiple]& {
+    height: auto;
+  }
+}

package/src/styles/less/mixins/_grid-framework.less

@@ -0,0 +1,104 @@
+@import (reference) "_logical-properties.less";
+
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `@grid-columns`.
+
+.make-grid-columns() {
+  // Common styles for all sizes of grid columns, widths 1-12
+  .col(@index) {
+    // initial
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) {
+    // general; "=<" isn't a typo
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) {
+    // terminal
+    @{list} {
+      position: relative;
+      // Prevent columns from collapsing when empty
+      min-height: 1px;
+      // Inner gutter via padding
+      padding-left: ceil((@grid-gutter-width / 2));
+      padding-right: floor((@grid-gutter-width / 2));
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.float-grid-columns(@class) {
+  .col(@index) {
+    // initial
+    @item: ~".col-@{class}-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) {
+    // general
+    @item: ~".col-@{class}-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) {
+    // terminal
+    @{list} {
+      .float(left);
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
+  .col-@{class}-@{index} {
+    width: percentage((@index / @grid-columns));
+
+    .row-equal-height & {
+      /* stylelint-disable-next-line function-calc-no-unspaced-operator */
+      width: calc(percentage((@index / @grid-columns)) ~"- 0.5px");
+    }
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
+  .col-@{class}-push-@{index} {
+    .left(percentage((@index / @grid-columns)));
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
+  .col-@{class}-push-0 {
+    .left(auto);
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
+  .col-@{class}-pull-@{index} {
+    .right(percentage((@index / @grid-columns)));
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
+  .col-@{class}-pull-0 {
+    .right(auto);
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = offset) {
+  .col-@{class}-offset-@{index} {
+    .margin(left, percentage((@index / @grid-columns)));
+  }
+}
+
+// Basic looping in LESS
+.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
+  .calc-grid-column(@index, @class, @type);
+  // next iteration
+  .loop-grid-columns((@index - 1), @class, @type);
+}
+
+// Create grid for specific class
+.make-grid(@class) {
+  .float-grid-columns(@class);
+  .loop-grid-columns(@grid-columns, @class, width);
+  .loop-grid-columns(@grid-columns, @class, pull);
+  .loop-grid-columns(@grid-columns, @class, push);
+  .loop-grid-columns(@grid-columns, @class, offset);
+}

package/src/styles/less/mixins/_grid.less

@@ -0,0 +1,158 @@
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+// Centered container element
+.container-fixed(@gutter: @grid-gutter-width) {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  &:extend(.clearfix all);
+}
+
+// Creates a wrapper for a series of columns
+.make-row(@gutter: @grid-gutter-width) {
+  .margin(left, ceil((@gutter / -2)), floor((@gutter / -2)));
+
+  .margin(right, floor((@gutter / -2)), ceil((@gutter / -2)));
+
+  &:extend(.clearfix all);
+}
+
+// Generate the extra small columns
+.make-xs-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  .float(left);
+
+  width: percentage((@columns / @grid-columns));
+  min-height: 1px;
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
+}
+.make-xs-column-offset(@columns) {
+  .margin(left, percentage((@columns / @grid-columns)));
+}
+.make-xs-column-push(@columns) {
+  .left(percentage((@columns / @grid-columns)));
+}
+.make-xs-column-pull(@columns) {
+  .right(percentage((@columns / @grid-columns)));
+}
+
+// Generate the small columns
+.make-sm-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  @media (min-width: @screen-sm-min) {
+    .float(left);
+
+    width: percentage((@columns / @grid-columns));
+  }
+}
+.make-sm-column-offset(@columns) {
+  @media (min-width: @screen-sm-min) {
+    .margin(left, percentage((@columns / @grid-columns)));
+  }
+}
+.make-sm-column-push(@columns) {
+  @media (min-width: @screen-sm-min) {
+    .left(percentage((@columns / @grid-columns)));
+  }
+}
+.make-sm-column-pull(@columns) {
+  @media (min-width: @screen-sm-min) {
+    .right(percentage((@columns / @grid-columns)));
+  }
+}
+
+// Generate the medium columns
+.make-md-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  @media (min-width: @screen-md-min) {
+    .float(left);
+
+    width: percentage((@columns / @grid-columns));
+  }
+}
+.make-md-column-offset(@columns) {
+  @media (min-width: @screen-md-min) {
+    .margin(left, percentage((@columns / @grid-columns)));
+  }
+}
+.make-md-column-push(@columns) {
+  @media (min-width: @screen-md-min) {
+    .left(percentage((@columns / @grid-columns)));
+  }
+}
+.make-md-column-pull(@columns) {
+  @media (min-width: @screen-md-min) {
+    .right(percentage((@columns / @grid-columns)));
+  }
+}
+
+// Generate the large columns
+.make-lg-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  @media (min-width: @screen-lg-min) {
+    .float(left);
+
+    width: percentage((@columns / @grid-columns));
+  }
+}
+.make-lg-column-offset(@columns) {
+  @media (min-width: @screen-lg-min) {
+    .margin(left, percentage((@columns / @grid-columns)));
+  }
+}
+.make-lg-column-push(@columns) {
+  @media (min-width: @screen-lg-min) {
+    .left(percentage((@columns / @grid-columns)));
+  }
+}
+.make-lg-column-pull(@columns) {
+  @media (min-width: @screen-lg-min) {
+    .right(percentage((@columns / @grid-columns)));
+  }
+}
+
+// Generate the large columns
+.make-xl-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  @media (min-width: @screen-xl-min) {
+    .float(left);
+
+    width: percentage((@columns / @grid-columns));
+  }
+}
+.make-xl-column-offset(@columns) {
+  @media (min-width: @screen-xl-min) {
+    .margin(left, percentage((@columns / @grid-columns)));
+  }
+}
+.make-xl-column-push(@columns) {
+  @media (min-width: @screen-xl-min) {
+    .left(percentage((@columns / @grid-columns)));
+  }
+}
+.make-xl-column-pull(@columns) {
+  @media (min-width: @screen-xl-min) {
+    .right(percentage((@columns / @grid-columns)));
+  }
+}

package/src/styles/less/mixins/_hide-text.less

@@ -0,0 +1,20 @@
+// CSS image replacement
+//
+// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
+//
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+
+// Deprecated as of v3.0.1 (will be removed in v4)
+.hide-text() {
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+// New mixin to use as of v3.0.1
+.text-hide() {
+  .hide-text();
+}

package/src/styles/less/mixins/_links.less

@@ -0,0 +1,7 @@
+.link-underline (@isUnderlineImportant: false) {
+  text-decoration: underline;
+  & when (@isUnderlineImportant = true) {
+    text-decoration: underline !important;
+  }
+  text-underline-offset: 0.3em;
+}

package/src/styles/less/mixins/_list-group.less

@@ -0,0 +1,23 @@
+@import (reference) "_logical-properties.less";
+
+.list-group-item-variant(@state; @background; @color) {
+  .list-group-item-@{state} {
+    .border(left, 3px, solid, @color);
+
+    .list-group-item& {
+      background-color: var(--color-background-screen);
+    }
+
+    .list-group-item-text {
+      color: @color;
+    }
+
+    a& {
+      color: @color;
+
+      &:hover {
+        color: @color;
+      }
+    }
+  }
+}