@transferwise/neptune-css 14.28.2 → 14.29.1

package/src/less/mixins/_logical-properties-modern-browsers.less

@@ -1,4 +1,3 @@
-
 // Mixin to support Logical properties/values for modern browsers
 
 // Custom property for the cases which doesn't exist a logical value. (Translations, linear-gradients)
@@ -17,20 +16,10 @@
 
 .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;
   }
 }
@@ -39,20 +28,10 @@
 
 .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;
   }
 }
@@ -71,7 +50,27 @@
 
 // CSS Logical Properties: https://caniuse.com/css-logical-props
 
-.padding(@direction, @value) {
+.padding(@direction, @value, @oppositeValue: ~"") {
+  & when (@direction = left) {
+    padding-inline-start: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        padding-inline-end: @oppositeValue;
+      }
+    }
+  }
+
+  & when (@direction = right) {
+    padding-inline-end: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        padding-inline-start: @oppositeValue;
+      }
+    }
+  }
+}
+
+.padding-for-spacing(@direction, @value) {
   & when (@direction = left) {
     padding-inline-start: @value;
   }
@@ -85,25 +84,45 @@
 // 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-shorthand(@value1, @value2: ~"", @value3: ~"", @value4: ~"") {
+  & when (@value2 = ~"") {
+    padding: @value1;
   }
-
-  html:not([dir="rtl"]) & {
-    padding: @value1 @value2 @value3 @value4;
+  & when not (@value2 = ~"") {
+    padding-block: @value1 @value3;
+    padding-inline: @value4 @value2;
   }
 }
 
 // CSS Logical Properties: https://caniuse.com/css-logical-props
 
-.margin(@direction, @value) {
+.margin(@direction, @value, @oppositeValue: ~"") {
   & when (@direction = left) {
     margin-inline-start: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        margin-inline-end: @oppositeValue;
+      }
+    }
   }
 
   & when (@direction = right) {
-    padding-inline-end: @value;
+    margin-inline-end: @value;
+    & when not (@oppositeValue = ~"") {
+      [dir="rtl"] & {
+        margin-inline-start: @oppositeValue;
+      }
+    }
+  }
+}
+
+.margin-for-spacing(@direction, @value) {
+  & when (@direction = left) {
+    margin-inline-start: @value;
+  }
+
+  & when (@direction = right) {
+    margin-inline-end: @value;
   }
 }
 
@@ -111,29 +130,39 @@
 // 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-shorthand(@value1, @value2: ~"", @value3: ~"", @value4: ~"") {
+  & when (@value2 = ~"") {
+    margin: @value1;
   }
-
-  html:not([dir="rtl"]) & {
-    margin: @value1 @value2 @value3 @value4;
+  & when not (@value2 = ~"") {
+    margin-block: @value1 @value3;
+    margin-inline: @value4 @value2;
   }
 }
 
 // CSS property: inset-inline (positions): https://caniuse.com/mdn-css_properties_inset-inline
 
-.left(@value) {
+.left(@value, @oppositeValue: ~"") {
   inset-inline-start: @value;
+  & when not (@oppositeValue = ~"") {
+    [dir="rtl"] & {
+      inset-inline-end: @oppositeValue;
+    }
+  }
 }
 
-.right(@value) {
+.right(@value, @oppositeValue: ~"") {
   inset-inline-end: @value;
+  & when not (@oppositeValue = ~"") {
+    [dir="rtl"] & {
+      inset-inline-start: @oppositeValue;
+    }
+  }
 }
 
 // CSS property: border-inline-start https://caniuse.com/mdn-css_properties_border-inline-start
 
-.border(@direction, @size, @style: ~'', @color: ~'') {
+.border(@direction, @size, @style: ~"", @color: ~"") {
   & when (@direction = left) {
     border-inline-start: @size @style @color;
   }
@@ -193,7 +222,7 @@
 
 // Background position
 
-.background-position(@direction, @vertical-direction: ~'') {
+.background-position(@direction, @vertical-direction: ~"") {
   & when (@direction = left) {
     background-position: var(--left) @vertical-direction;
   }
@@ -215,9 +244,19 @@
   }
 }
 
+// Rotations
+
+.rotate(@deg) {
+  [dir="rtl"] & {
+    transform: rotate(@deg * -1);
+  }
+
+  transform: rotate(@deg);
+}
+
 // Horizontal translations
 
-.translateX(@value, @transform2: ~'', @transform3: ~'') {
+.translateX(@value, @transform2: ~"", @transform3: ~"") {
   [dir="rtl"] & {
     transform: translateX(@value * -1) @transform2 @transform3;
   }

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

@@ -1,5 +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';
+// @import "./_physical-properties.less";
+// @import './_logical-properties-IE-friendly.less';
+@import "../mixins/_logical-properties-modern-browsers.less";

package/src/less/process.less

@@ -84,6 +84,11 @@
   width: 50%;
   left: 25%;
   top: 25%;
+
+  // Icon is purely decorative — keep physical positioning in RTL
+  [dir="rtl"] & {
+    transform: rotate(45deg) scaleX(-1);
+  }
 }
 
 .process-icon-horizontal,
@@ -231,7 +236,7 @@
   }
 }
 .process-size(
-  xs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
+  xxs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
 );
 .process-size(
   xs, @process-xs-radius, @process-xs-circumference, @process-xs-stroke, @process-xs-icon-size, @process-xs-icon-stroke
@@ -244,6 +249,10 @@
 );
 
 .process-xxs {
+  .process-icon-container {
+    display: none;
+  }
+
   .process-circle {
     animation-name: process-chase-circle-xxs;
   }
@@ -379,11 +388,9 @@
 }
 
 .btn .process:first-child {
-  .margin(left, -12px);
-
-  .margin(right, 12px);
-
-  .float(left);
+  margin-left: -12px;
+  margin-right: 12px;
+  float: left;
 }
 
 .btn-block .process:first-child {

package/src/less/tick.less

@@ -11,9 +11,13 @@
     content: "";
     position: absolute;
     background: var(--color-background-screen);
-    transform: translateX(0.5px) rotate(-45deg);
+    transform: translateX(-1.5px) rotate(-45deg);
     transform-origin: left bottom;
-    left: var(--size-8);
+
+    [dir="rtl"] & {
+      transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
+      transform-origin: right bottom;
+    }
   }
 
   .has-error {
@@ -34,4 +38,4 @@
     height: 2px;
     width: 11px;
   }
-}
+}