@transferwise/components 46.130.3 → 46.131.0

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

package/src/styles/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/styles/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/styles/less/mixins/_nav-divider.less

@@ -0,0 +1,10 @@
+// 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/styles/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/styles/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;
+    }
+  }
+}