feat(themes): Add RTL styling

CHANGELOG.md

@@ -1,9 +1,28 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
-
 ## 8.2.4
 
+### RTL Support
+Most of the components in the framework now have full right-to-left (RTL) support via the newly included RTL themes. 
+
+For CSS-based projects add `node_modules/igniteui-angular/styles/igniteui-angular-rtl.css` to your angular.json styles collection. 
+
+For Sass-based projects pass `$direction` to the `igx-core` mixin in your root stylesheet.
+
+Example:
+```scss
+// $direction defaults to ltr if it's omitted.
+@include igx-core($direction: rtl);
+```
+Currently the following components have only partial RTL support:
+ - Grid (igx-grid)
+ - Slider (igx-slider)
+ - Tabs (igx-tabs)
+ - Circular Progress Indicator (igx-circular-bar)
+
+ We plan on adding support for the aforementioned components in the upcoming releases.
+
 ### New Features
 
 - Columns now expose the `cellStyles` property which allows conditional styling of the column cells. Similar to `cellClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation.

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -26,15 +26,19 @@ <h2 class="igx-calendar__header-date">
     (swipeleft)="nextMonth()">
     <div class="igx-calendar-picker">
         <div tabindex="0" class="igx-calendar-picker__prev" #prevMonthBtn
-            igxCalendarScrollMonth [startScroll]="startPrevMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{'min-width.%': 100/(monthsViewNumber*7)}">
+            igxCalendarScrollMonth [startScroll]="startPrevMonthScroll" [stopScroll]="stopMonthScroll"  [ngStyle]="{
+                    'min-width.%': 100/(monthsViewNumber*7)
+                }">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
-        <div *ngFor="let view of dayViews; index as i;" [style.width.%]="100/monthsViewNumber" [attr.data-month]="getMonth(i)">
+        <div class="igx-calendar-picker__dates" *ngFor="let view of dayViews; index as i;" [style.width.%]="100/monthsViewNumber" [attr.data-month]="getMonth(i)">
             <ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: getContext(i)">
             </ng-container>
         </div>
-        <div tabindex="0" class="igx-calendar-picker__next" #nextMonthBtn 
-            igxCalendarScrollMonth [startScroll]="startNextMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{'min-width.%': 100/(monthsViewNumber*7)}">
+        <div tabindex="0" class="igx-calendar-picker__next" #nextMonthBtn
+            igxCalendarScrollMonth [startScroll]="startNextMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{
+                    'min-width.%': 100/(monthsViewNumber*7)
+                }">
             <igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
         </div>
     </div>
@@ -59,18 +63,18 @@ <h2 class="igx-calendar__header-date">
     </div>
 </div>
 
-<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months 
-                 [date]="viewDate" 
+<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months
+                 [date]="viewDate"
                  [locale]="locale"
                  [formatView]="formatViews.month"
-                 [monthFormat]="formatOptions.month" 
+                 [monthFormat]="formatOptions.month"
                  (onSelection)="changeMonth($event)">
 </igx-months-view>
 
-<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade 
-                [date]="viewDate" 
+<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
+                [date]="viewDate"
                 [locale]="locale"
                 [formatView]="formatViews.year"
-                [yearFormat]="formatOptions.year" 
+                [yearFormat]="formatOptions.year"
                 (onSelection)="changeYear($event)">
-</igx-years-view>
+</igx-years-view>

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -539,3 +539,33 @@
     }
     @return $color;
 }
+
+/// Returns $if param when global variable $directory
+/// is set to ltr otherwise returns $else.
+/// @param {*} $if - The value to be returned when $direction is set to ltr;
+/// @param {*} $else - The value to be returned when $direction is set to rtl;
+/// @example scss Set variable values based on $direction
+///    $left: if-ltr(left, right);
+///    $right: if-ltr(right, left);
+/// @requires $direction
+@function if-ltr($if, $else: null) {
+    $dir: if(global-variable-exists('direction'), $direction, 'ltr');
+
+    @if $dir != rtl {
+        @return $if;
+    } @else {
+        @return $else;
+    }
+}
+
+/// Returns $if param when global variable $directory
+/// is set to rtl otherwise returns $else.
+/// @param {*} $if - The value to be returned when $direction is set to rtl;
+/// @param {*} $else - The value to be returned when $direction is set to ltr;
+/// @example scss Set variable values based on $direction
+///    $left: if-rtl(left, right);
+///    $right: if-rtl(right, left);
+/// @requires $direction
+@function if-rtl($if, $else: null) {
+    @return if-ltr($else, $if);
+}

projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

@@ -301,3 +301,31 @@
         }
     }
 }
+
+/// Compiles the passed content to CSS only if
+/// the global $direction variable is set to 'ltr'.
+/// @example scss Include content only if $direction is set to ltr (default)
+///    @include if-ltr {
+///      margin-right: 8px;
+///    }
+@mixin if-ltr {
+    $dir: if(global-variable-exists('direction'), $direction, 'ltr');
+
+    @if $dir != 'rtl' {
+        @content;
+    }
+}
+
+/// Compiles the passed content to CSS only if
+/// the global $direction variable is set to 'rtl'.
+/// @example scss Include content only if $direction is set to rtl
+///    @include if-rtl {
+///      margin-left: 8px;
+///    }
+@mixin if-rtl {
+    $dir: if(global-variable-exists('direction'), $direction, 'ltr');
+
+    @if $dir == 'rtl' {
+        @content;
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -1,26 +1,31 @@
-%vhelper-display {
-    display: block;
-    overflow: auto;
-    z-index: 10001;
-}
+@mixin igx-vhelper {
+    $left: if-ltr(left, right);
+    $right: if-ltr(right, left);
+
+    %vhelper-display {
+        display: block;
+        overflow: auto;
+        z-index: 10001;
+    }
 
-%vhelper--vertical {
-    position: absolute;
-    width: 18px;
-    top: 0;
-    right: 0;
-}
+    %vhelper--vertical {
+        position: absolute;
+        width: 18px;
+        top: 0;
+        #{$right}: 0;
+    }
 
-%vhelper--horizontal {
-    width: 100%;
-}
+    %vhelper--horizontal {
+        width: 100%;
+    }
 
-%vhelper-content--vertical {
-    width: 1px;
-}
+    %vhelper-content--vertical {
+        width: 1px;
+    }
 
-%vhelper-content--horizontal {
-    height: 1px;
+    %vhelper-content--horizontal {
+        height: 1px;
+    }
 }
 
 @include b(igx-vhelper) {

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -57,10 +57,13 @@
 @mixin igx-banner($theme) {
     @include igx-root-css-vars($theme);
 
+    $left: if-ltr(left, right);
+    $right: if-ltr(right, left);
+
     $banner-padding: (
-        comfortable: rem(8) rem(8) rem(8) 0,
-        cosy: rem(8) rem(8) rem(8) 0,
-        compact: rem(8) rem(8) rem(8) 0
+        comfortable: rem(8),
+        cosy: rem(8),
+        compact: rem(8)
     );
 
     %igx-banner,
@@ -71,7 +74,10 @@
     }
 
     %igx-banner {
-        padding: map-get($banner-padding, 'comfortable');
+        padding-#{$right}: map-get($banner-padding, 'comfortable');
+        padding-#{$left}: 0;
+        padding-top: map-get($banner-padding, 'comfortable');
+        padding-bottom: map-get($banner-padding, 'comfortable');
         background: --var($theme, 'banner-background');
         align-items: center;
         position: relative;
@@ -84,7 +90,7 @@
         width: rem(40);
         min-width: rem(40);
         height: rem(40);
-        margin-left: rem(16);
+        margin-#{$left}: rem(16);
         color: --var($theme, 'banner-illustration-color');
     }
 
@@ -101,7 +107,7 @@
     %igx-banner__text {
         color: --var($theme, 'banner-message-color');
         flex: 1 0 0%;
-        margin-left: rem(24);
+        margin-#{$left}: rem(24);
     }
 
     %igx-banner--cosy {
@@ -115,7 +121,7 @@
     %igx-banner__message {
         min-width: rem(220);
         flex: 1 0 0%;
-        margin-right: rem(90);
+        margin-#{$right}: rem(90);
     }
 
     %igx-banner__row {

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -178,17 +178,21 @@
 @include b(igx-calendar-picker) {
     @extend %cal-picker-display !optional;
 
+    @include e(dates) {
+        @extend %cal-picker-dates !optional;
+    }
+
     @include e(date) {
         @extend %cal-picker-date !optional;
     }
 
     @include e(prev) {
         @extend %cal-picker-arrow !optional;
-        @extend %cal-picker-prev !optional;
+        @extend %cal-picker-arrow__prev !optional;
     }
 
     @include e(next) {
         @extend %cal-picker-arrow !optional;
-        @extend %cal-picker-next !optional;
+        @extend %cal-picker-arrow__next !optional;
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -305,6 +305,10 @@
         fluent:--var($theme, 'date-current-text-color')
     ), map-get($theme, variant));
 
+    $left: if-ltr(left, right);
+    $right: if-ltr(right, left);
+    $before: if-ltr(before, after);
+    $after: if-ltr(after, before);
 
     %cal-display {
         display: flex;
@@ -317,7 +321,7 @@
     }
 
     %cal-display + %cal-display {
-        margin-left: 1rem;
+        margin-#{$left}: 1rem;
     }
 
     %cal-display--vertical {
@@ -366,14 +370,19 @@
         }
     }
 
+    %cal-picker-dates {
+        display: flex;
+        justify-content: center;
+    }
+
     %cal-picker-arrow {
+        position: absolute;
         display: inline-flex;
         justify-content: center;
         color: --var($theme, 'picker-arrow-color');
         user-select: none;
         outline: none;
         cursor: pointer;
-        position: absolute;
         height: calc(100% - #{$cal-picker-padding});
         align-items: center;
         top: 0;
@@ -383,23 +392,24 @@
             color: --var($theme, 'picker-arrow-hover-color');
         }
 
-        [dir='rtl'] & {
-            transform: scaleX(-1)
+        @include if-rtl() {
+            transform: scaleX(-1);
         }
     }
 
-    %cal-picker-prev {
-        left: 0
+    %cal-picker-arrow__prev {
+        #{$left}: 0;
     }
 
-    %cal-picker-next {
-        right: 0
+    %cal-picker-arrow__next {
+        #{$right}: 0;
     }
 
     %cal-picker-date {
         color: --var($theme, 'picker-text-color');
         text-align: center;
         outline: none;
+        padding: 0 rem(2px);
 
         &:hover,
         &:focus {
@@ -683,7 +693,7 @@
             content: '';
             width: 50%;
             top: 0;
-            left: 50%;
+            #{$left}: 50%;
             bottom: 0;
             background: --var($theme, 'date-selected-background');
             z-index: -1;
@@ -700,7 +710,7 @@
             content: '';
             width: 50%;
             top: 0;
-            right: 50%;
+            #{$right}: 50%;
             bottom: 0;
             background: --var($theme, 'date-selected-background');
             z-index: -1;