OIS-23: add basic mixins for rtl support

CHANGELOG.md

@@ -6,6 +6,9 @@ Bug fixes:
 New Functionalities:
 * [OLMIS-7976](https://openlmis.atlassian.net/browse/OLMIS-7976): Improved visual apperance of the homepage alerts component 
 
+Improvements:
+* [OIS-23](https://openlmis.atlassian.net/browse/OIS-23): Add basic mixin utils for RTL support
+
 7.2.11 / 2024-04-19
 ==================
 Bug fixes:

src/common/_mixins.scss

@@ -1,9 +1,242 @@
 @mixin fade-in {
-  0% {opacity: 0;}
-  100% {opacity: 1;}
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
 }
 
 @mixin fade-out {
-  0% {opacity: 1;}
-  100% {opacity: 0;}
-}
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+@mixin padding-right($value) {
+  [dir='ltr'] & {
+    padding-right: $value;
+  }
+  [dir='rtl'] & {
+    padding-left: $value;
+  }
+}
+
+@mixin padding-left($value) {
+  [dir='ltr'] & {
+    padding-left: $value;
+  }
+  [dir='rtl'] & {
+    padding-right: $value;
+  }
+}
+
+@mixin padding-x($value) {
+  [dir='ltr'] & {
+    padding-left: $value;
+    padding-right: $value;
+  }
+  [dir='rtl'] & {
+    padding-left: $value;
+    padding-right: $value;
+  }
+}
+
+@mixin padding-yx($padding-y, $padding-x) {
+  padding-top: $padding-y;
+  padding-bottom: $padding-y;
+
+  [dir='ltr'] & {
+    padding-left: $padding-x;
+    padding-right: $padding-x;
+  }
+  [dir='rtl'] & {
+    padding-left: $padding-x;
+    padding-right: $padding-x;
+  }
+}
+
+@mixin padding($padding-top, $padding-right, $padding-bottom, $padding-left) {
+  padding-top: $padding-top;
+  padding-bottom: $padding-bottom;
+
+  [dir='ltr'] & {
+    padding-left: $padding-left;
+    padding-right: $padding-right;
+  }
+  [dir='rtl'] & {
+    padding-left: $padding-right;
+    padding-right: $padding-left;
+  }
+}
+
+@mixin margin-right($value) {
+  [dir='ltr'] & {
+    margin-right: $value;
+  }
+  [dir='rtl'] & {
+    margin-left: $value;
+  }
+}
+
+@mixin margin-left($value) {
+  [dir='ltr'] & {
+    margin-left: $value;
+  }
+  [dir='rtl'] & {
+    margin-right: $value;
+  }
+}
+
+@mixin margin-x($value) {
+  [dir='ltr'] & {
+    margin-left: $value;
+    margin-right: $value;
+  }
+  [dir='rtl'] & {
+    margin-left: $value;
+    margin-right: $value;
+  }
+}
+
+@mixin margin-yx($margin-y, $margin-x) {
+  margin-top: $margin-y;
+  margin-bottom: $margin-y;
+
+  [dir='ltr'] & {
+    margin-left: $margin-x;
+    margin-right: $margin-x;
+  }
+  [dir='rtl'] & {
+    margin-left: $margin-x;
+    margin-right: $margin-x;
+  }
+}
+
+@mixin margin($margin-top, $margin-right, $margin-bottom, $margin-left) {
+  margin-top: $margin-top;
+  margin-bottom: $margin-bottom;
+
+  [dir='ltr'] & {
+    margin-left: $margin-left;
+    margin-right: $margin-right;
+  }
+  [dir='rtl'] & {
+    margin-left: $margin-right;
+    margin-right: $margin-left;
+  }
+}
+
+@mixin border-right($value) {
+  [dir='ltr'] & {
+    border-right: $value;
+  }
+  [dir='rtl'] & {
+    border-left: $value;
+  }
+}
+
+@mixin border-left($value) {
+  [dir='ltr'] & {
+    border-left: $value;
+  }
+  [dir='rtl'] & {
+    border-right: $value;
+  }
+}
+
+@mixin border-x($value) {
+  [dir='ltr'] & {
+    border-left: $value;
+    border-right: $value;
+  }
+  [dir='rtl'] & {
+    border-left: $value;
+    border-right: $value;
+  }
+}
+
+@mixin border-yx($border-y, $border-x) {
+  border-top: $border-y;
+  border-bottom: $border-y;
+
+  [dir='ltr'] & {
+    border-left: $border-x;
+    border-right: $border-x;
+  }
+  [dir='rtl'] & {
+    border-left: $border-x;
+    border-right: $border-x;
+  }
+}
+
+@mixin border($border-top, $border-right, $border-bottom, $border-left) {
+  border-top: $border-top;
+  border-bottom: $border-bottom;
+
+  [dir='ltr'] & {
+    border-left: $border-left;
+    border-right: $border-right;
+  }
+  [dir='rtl'] & {
+    border-left: $border-right;
+    border-right: $border-left;
+  }
+}
+
+@mixin float($float) {
+  $float-ltr: $float;
+  $float-rtl: if($float == left, right, if($float == right, left, none));
+
+  [dir='ltr'] & {
+    float: $float-ltr;
+  }
+
+  [dir='rtl'] & {
+    float: $float-rtl;
+  }
+}
+
+@mixin right($value) {
+  [dir='ltr'] & {
+    right: $value;
+  }
+
+  [dir='rtl'] & {
+    left: $value;
+  }
+}
+
+@mixin left($value) {
+  [dir='ltr'] & {
+    left: $value;
+  }
+
+  [dir='rtl'] & {
+    right: $value;
+  }
+}
+
+@mixin text-align($alignment) {
+  $alignment-ltr: $alignment;
+  $alignment-rtl: if(
+    $alignment == left,
+    right,
+    if($alignment == right, left, $alignment)
+  );
+
+  [dir='ltr'] & {
+    text-align: $alignment-ltr;
+  }
+
+  [dir='rtl'] & {
+    text-align: $alignment-rtl;
+  }
+}