@transferwise/neptune-css 0.0.0-experimental-59a8879 → 0.0.0-experimental-e11f288

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-59a8879",
+  "version": "0.0.0-experimental-e11f288",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
   "devDependencies": {
     "gulp": "^5.0.1",
     "modern-normalize": "^3.0.1",
-    "@transferwise/less-config": "0.0.0-experimental-59a8879",
+    "@transferwise/less-config": "0.0.0-experimental-e11f288",
     "@wise/wds-configs": "0.0.0"
   },
   "publishConfig": {

package/src/less/buttons.less

@@ -647,10 +647,18 @@ input[type="button"] {
     display: inline-flex;
     align-items: center;
 
-    .btn-loader[class] {
+    .btn-loader {
       margin-bottom: 0;
-      margin-left: 16px;
-      margin-right: 0;
+
+      :not([dir="rtl"]) & {
+        margin-left: 16px;
+        margin-right: 0;
+      }
+
+      [dir="rtl"] & {
+        margin-left: 0 !important;
+        margin-right: 16px !important;
+      }
     }
   }
 

package/src/less/chevron.less

@@ -7,10 +7,6 @@
 
   &.top {
     transform: rotate(0deg);
-
-    [dir="rtl"] & {
-      transform: rotate(360deg);
-    }
   }
 
   &.right {

package/src/less/process.less

@@ -84,11 +84,6 @@
   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,
@@ -236,7 +231,7 @@
   }
 }
 .process-size(
-  xxs, @process-xxs-radius, @process-xxs-circumference, @process-xxs-stroke, @process-xxs-icon-size, @process-xxs-icon-stroke
+  xs, @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
@@ -249,10 +244,6 @@
 );
 
 .process-xxs {
-  .process-icon-container {
-    display: none;
-  }
-
   .process-circle {
     animation-name: process-chase-circle-xxs;
   }
@@ -388,9 +379,11 @@
 }
 
 .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,13 +11,9 @@
     content: "";
     position: absolute;
     background: var(--color-background-screen);
-    transform: translateX(-1.5px) rotate(-45deg);
+    transform: translateX(0.5px) rotate(-45deg);
     transform-origin: left bottom;
-
-    [dir="rtl"] & {
-      transform: translateX(-1.5px) rotate(-45deg) scaleX(-1);
-      transform-origin: right bottom;
-    }
+    left: var(--size-8);
   }
 
   .has-error {
@@ -38,4 +34,4 @@
     height: 2px;
     width: 11px;
   }
-}
+}