@transferwise/neptune-css 10.0.6-beta.32 → 10.1.0

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

@@ -1,329 +0,0 @@
-// 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, @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;
-  }
-
-  html:not([dir="rtl"]) & {
-    padding: @value1 @value2 @value3 @value4;
-  }
-}
-
-// CSS Logical Properties: https://caniuse.com/css-logical-props
-
-.margin(@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;
-  }
-
-  html:not([dir="rtl"]) & {
-    margin: @value1 @value2 @value3 @value4;
-  }
-}
-
-// CSS property: inset-inline (positions): https://caniuse.com/mdn-css_properties_inset-inline
-
-.left(@value) {
-  [dir="rtl"] & {
-    right: @value;
-  }
-
-  html:not([dir="rtl"]) & {
-    left: @value;
-  }
-}
-
-.right(@value) {
-  [dir="rtl"] & {
-    left: @value;
-  }
-
-  html:not([dir="rtl"]) & {
-    right: @value;
-  }
-}
-
-// 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;
-}

package/src/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/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 '../mixins/_logical-properties-IE-friendly.less';
-// @import '../mixins/_logical-properties-modern-browsers.less';

package/src/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/less/mixins/_physical-properties.less

@@ -1,111 +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/less/mixins/_reset-text.less

@@ -1,22 +0,0 @@
-@import (reference) '_logical-properties.less';
-
-.reset-text() {
-  font-family: @font-family-base;
-
-  // We deliberately do NOT reset font-size.
-
-  font-style: normal;
-  font-weight: normal;
-  letter-spacing: normal;
-  line-break: auto;
-  line-height: @line-height-base;
-  .text-align(left);
-
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  white-space: normal;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-}