@transferwise/neptune-css 0.0.0-experimental-e11f288 → 0.0.0-experimental-2a0ee2d

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@transferwise/neptune-css",
   "description": "Neptune CSS library",
-  "version": "0.0.0-experimental-e11f288",
+  "version": "0.0.0-experimental-2a0ee2d",
   "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-e11f288",
+    "@transferwise/less-config": "0.0.0-experimental-2a0ee2d",
     "@wise/wds-configs": "0.0.0"
   },
   "publishConfig": {

package/src/less/buttons.less

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

package/src/less/chevron.less

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

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;
   }
-}
+}