@transferwise/neptune-css 11.0.1-beta-66e6490bc3.13 → 11.0.1

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

@@ -1,365 +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, @currentDirectionPaddingValue, @oppositeDirectionPaddingValue: ~'') {
-  & 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: ~'') {
-  & 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(@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/_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;
-  }
-}