@transferwise/neptune-css 14.28.2 → 14.29.0

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";