@transferwise/components 0.0.0-experimental-1bc70dc → 0.0.0-experimental-cbe4279

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

package/src/neptune-css/less/mixins/_logical-properties-IE-friendly.less

@@ -0,0 +1,381 @@
+// Mixin to support Logical properties/values for IE
+
+// CSS property: float: Flow-relative values inline-start
+// and inline-end: https://caniuse.com/mdn-css_properties_float_flow_relative_values
+
+.float(@direction) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      float: right;
+    }
+
+    float: @direction;
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      float: left;
+    }
+
+    float: @direction;
+  }
+}
+
+// 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;
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      clear: left;
+    }
+
+    clear: @direction;
+  }
+}
+
+// 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) {
+    [dir="rtl"] & {
+      text-align: right;
+    }
+
+    text-align: left;
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      text-align: left;
+    }
+
+    text-align: right;
+  }
+}
+
+// CSS Logical Properties: https://caniuse.com/css-logical-props
+
+.padding(@direction, @currentDirectionPaddingValue, @oppositeDirectionPaddingValue: initial) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      padding-right: @currentDirectionPaddingValue;
+      padding-@{direction}: @oppositeDirectionPaddingValue;
+    }
+
+    padding-@{direction}: @currentDirectionPaddingValue;
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      padding-left: @currentDirectionPaddingValue;
+      padding-@{direction}: @oppositeDirectionPaddingValue;
+    }
+
+    padding-@{direction}: @currentDirectionPaddingValue;
+  }
+}
+
+.padding-for-spacing(@direction, @value) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      padding-right: @value;
+    }
+
+    html:not([dir="rtl"]) & {
+      padding-@{direction}: @value;
+    }
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      padding-left: @value;
+    }
+
+    html:not([dir="rtl"]) & {
+      padding-@{direction}: @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;
+  }
+
+  padding: @value1 @value2 @value3 @value4;
+}
+
+// CSS Logical Properties: https://caniuse.com/css-logical-props
+
+.margin(@direction, @currentDirectionMarginValue, @oppositeDirectionMarginValue: initial) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      margin-right: @currentDirectionMarginValue;
+      margin-@{direction}: @oppositeDirectionMarginValue;
+    }
+
+    margin-@{direction}: @currentDirectionMarginValue;
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      margin-left: @currentDirectionMarginValue;
+      margin-@{direction}: @oppositeDirectionMarginValue;
+    }
+
+    margin-@{direction}: @currentDirectionMarginValue;
+  }
+}
+
+.margin-for-spacing(@direction, @value) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      margin-right: @value;
+    }
+
+    html:not([dir="rtl"]) & {
+      margin-@{direction}: @value;
+    }
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      margin-left: @value;
+    }
+
+    html:not([dir="rtl"]) & {
+      margin-@{direction}: @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;
+  }
+
+  margin: @value1 @value2 @value3 @value4;
+}
+
+// CSS property: inset-inline (positions): https://caniuse.com/mdn-css_properties_inset-inline
+
+.left(@currentDirectionPositionValue, @oppositeDirectionPositionValue: initial) {
+  [dir="rtl"] & {
+    right: @currentDirectionPositionValue;
+    left: @oppositeDirectionPositionValue;
+  }
+
+  left: @currentDirectionPositionValue;
+}
+
+.right(@currentDirectionPositionValue, @oppositeDirectionPositionValue: initial) {
+  [dir="rtl"] & {
+    left: @currentDirectionPositionValue;
+    right: @oppositeDirectionPositionValue;
+  }
+
+  right: @currentDirectionPositionValue;
+}
+
+// CSS property: border-inline-start https://caniuse.com/mdn-css_properties_border-inline-start
+
+.border(@direction, @size, @style: ~'', @color: ~'') {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      border-right: @size @style @color;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-@{direction}: @size @style @color;
+    }
+  }
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      border-left: @size @style @color;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-@{direction}: @size @style @color;
+    }
+  }
+}
+
+.border-width(@direction, @size) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      border-right-width: @size;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-@{direction}-width: @size;
+    }
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      border-left-width: @size;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-@{direction}-width: @size;
+    }
+  }
+}
+
+// CSS property: border-start-start-radius: https://caniuse.com/mdn-css_properties_border-start-start-radius
+
+//  | top-left      | top-right      |
+//  | bottom-left   | bottom-right   |
+
+.border-radius(@direction, @radius) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      border-bottom-right-radius: @radius;
+      border-top-right-radius: @radius;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-bottom-@{direction}-radius: @radius;
+      border-top-@{direction}-radius: @radius;
+    }
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      border-bottom-left-radius: @radius;
+      border-top-left-radius: @radius;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-bottom-@{direction}-radius: @radius;
+      border-top-@{direction}-radius: @radius;
+    }
+  }
+}
+
+.border-top-dir-radius(@direction, @radius) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      border-top-right-radius: @radius;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-top-@{direction}-radius: @radius;
+    }
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      border-top-left-radius: @radius;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-top-@{direction}-radius: @radius;
+    }
+  }
+}
+
+.border-bottom-dir-radius(@direction, @radius) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      border-bottom-right-radius: @radius;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-bottom-@{direction}-radius: @radius;
+    }
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      border-bottom-left-radius: @radius;
+    }
+
+    html:not([dir="rtl"]) & {
+      border-bottom-@{direction}-radius: @radius;
+    }
+  }
+}
+
+// Background position
+
+.background-position(@direction, @vertical-direction: ~'') {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      background-position: right @vertical-direction;
+    }
+
+    background-position: left @vertical-direction;
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      background-position: left @vertical-direction;
+    }
+
+    background-position: right @vertical-direction;
+  }
+}
+
+// Horizontal linear gradient
+
+.background-linear-gradient(@direction, @color1, @color2) {
+  & when (@direction = left) {
+    [dir="rtl"] & {
+      background: linear-gradient(to right, @color1, @color2);
+    }
+
+    background: linear-gradient(to left, @color1, @color2);
+  }
+
+  & when (@direction = right) {
+    [dir="rtl"] & {
+      background: linear-gradient(to left, @color1, @color2);
+    }
+
+    background: linear-gradient(to right, @color1, @color2);
+  }
+}
+
+// Horizontal translations
+
+.translateX(@value, @transform2: ~'', @transform3: ~'') {
+  [dir="rtl"] & {
+    transform: translateX(@value * -1) @transform2 @transform3;
+  }
+
+  transform: translateX(@value) @transform2 @transform3;
+}
+
+// Rotations
+
+.rotate(@deg) {
+  [dir="rtl"] & {
+    transform: rotate(@deg * -1);
+  }
+
+  transform: rotate(@deg);
+}