RTL: Basic support

styles/lib/core/_animation.scss

@@ -294,18 +294,34 @@ $animationPerspective: 2000px !default;
 
 .#{$prefix}fadeinleft {
     animation: fadeinleft .15s linear;
+
+    @include rtl {
+        animation-name: fadeinright;
+    }
 }
 
 .#{$prefix}fadeoutleft {
     animation: fadeoutleft .15s linear;
+
+    @include rtl {
+        animation-name: fadeoutright;
+    }
 }
 
 .#{$prefix}fadeinright {
     animation: fadeinright .15s linear;
+
+    @include rtl {
+        animation-name: fadeinleft;
+    }
 }
 
 .#{$prefix}fadeoutright {
     animation: fadeoutright .15s linear;
+
+    @include rtl {
+        animation-name: fadeoutleft;
+    }
 }
 
 .#{$prefix}fadeinup {
@@ -341,11 +357,19 @@ $animationPerspective: 2000px !default;
 .#{$prefix}flipleft {
     backface-visibility: visible;
     animation: flipleft .15s linear;
+
+    @include rtl {
+        animation-name: flipright;
+    }
 }
 
 .#{$prefix}flipright {
     backface-visibility: visible;
     animation: flipright .15s linear;
+
+    @include rtl {
+        animation-name: flipleft;
+    }
 }
 
 .#{$prefix}zoomin {
@@ -358,10 +382,18 @@ $animationPerspective: 2000px !default;
 
 .#{$prefix}zoominleft {
     animation: zoominleft .15s linear;
+
+    @include rtl {
+        animation-name: zoominright;
+    }
 }
 
 .#{$prefix}zoominright {
     animation: zoominright .15s linear;
+
+    @include rtl {
+        animation-name: zoominleft;
+    }
 }
 
 .#{$prefix}zoominup {

styles/lib/core/_border.scss

@@ -3,10 +3,10 @@ $border-scales: 0px, 1px, 2px, 3px !default;
 $border-directions: (
     '': 'border',
     'top': 'border-top',
-    'right': 'border-right',
-    'left': 'border-left',
+    'right': 'border-inline-end',
+    'left': 'border-inline-start',
     'bottom': 'border-bottom',
-    'x': ('border-left','border-right'),
+    'x': ('border-inline-start','border-inline-end'),
     'y': ('border-top','border-bottom')
 ) !default;
 

styles/lib/core/_borderradius.scss

@@ -12,10 +12,10 @@ $border-radius-props: (
 ) !default;
 
 $border-radius-directions: (
-    'left': ('border-top-left-radius','border-bottom-left-radius'),
-    'top': ('border-top-left-radius','border-top-right-radius'),
-    'right': ('border-top-right-radius','border-bottom-right-radius'),
-    'bottom': ('border-bottom-left-radius','border-bottom-right-radius')
+    'left': ('border-start-start-radius','border-end-start-radius'),
+    'top': ('border-start-start-radius','border-start-end-radius'),
+    'right': ('border-start-end-radius','border-end-end-radius'),
+    'bottom': ('border-end-start-radius','border-end-end-radius')
 ) !default;
 
 @include style-class('border-radius', $border-radius-props, true);

styles/lib/core/_formlayout.scss

@@ -62,13 +62,13 @@
 .#{$prefix}formgroup-inline .#{$prefix}field,
 .#{$prefix}formgroup-inline .#{$prefix}field-checkbox,
 .#{$prefix}formgroup-inline .#{$prefix}field-radiobutton {
-    margin-right: $fieldMargin;
+    margin-inline-end: $fieldMargin;
 }
 
 .#{$prefix}formgroup-inline .#{$prefix}field > label,
 .#{$prefix}formgroup-inline .#{$prefix}field-checkbox > label,
 .#{$prefix}formgroup-inline .#{$prefix}field-radiobutton > label {
-    margin-right: $fieldLabelMargin;
+    margin-inline-end: $fieldLabelMargin;
     margin-bottom: 0;
 }
 
@@ -81,6 +81,6 @@
 
 .#{$prefix}field-checkbox > label,
 .#{$prefix}field-radiobutton > label {
-    margin-left: $fieldLabelMargin;
+    margin-inline-start: $fieldLabelMargin;
     line-height: 1;
 }

styles/lib/core/_grid.scss

@@ -1,8 +1,8 @@
 .#{$prefix}grid {
     display: flex;
     flex-wrap: wrap;
-    margin-right: -1 * $gutter;
-    margin-left: -1 * $gutter;
+    margin-inline-end: -1 * $gutter;
+    margin-inline-start: -1 * $gutter;
     margin-top: -1 * $gutter;
 }
 
@@ -12,8 +12,8 @@
 }
 
 .#{$prefix}grid-nogutter {
-    margin-right: 0;
-    margin-left: 0;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
     margin-top: 0;
 }
 
@@ -97,4 +97,4 @@ $grid-column-offsets: (
     }
 }
 
-@include style-class('margin-left', $grid-column-offsets, true);
+@include style-class('margin-inline-start', $grid-column-offsets, true);

styles/lib/core/_image.scss

@@ -25,6 +25,22 @@ $image-position-props: (
     'bg-top': 'top'
 ) !default;
 
+$image-position-props-rtl: (
+    'bg-bottom': 'bottom',
+    'bg-center': 'center',
+    'bg-left': 'right',
+    'bg-left-bottom': 'right bottom',
+    'bg-left-top': 'right top',
+    'bg-right': 'left',
+    'bg-right-bottom': 'left bottom',
+    'bg-right-top': 'left top',
+    'bg-top': 'top'
+) !default;
+
 @include style-class('background-repeat', $image-repeat-props, true);
 @include style-class('background-size', $image-size-props, true);
-@include style-class('background-position', $image-position-props, true);
+@include style-class('background-position', $image-position-props, true);
+
+@include rtl {
+    @include style-class('background-position', $image-position-props-rtl, true);
+}

styles/lib/core/_mixins.scss

@@ -412,4 +412,10 @@
             }
         }
     }
+}
+
+@mixin rtl() {
+    :dir(rtl) {
+        @content;
+    }
 }