fix(datepicker): inert calendar arrow direction in rtl (#4960)

Fixes the calendar arrows pointing in the wrong direction in RTL.
angular · Jun 5, 2017 · 22f0ea0 · 22f0ea0
1 parent 84c80ec
commit 22f0ea0
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss
@@ -63,6 +63,10 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   &.mat-calendar-invert {
     transform: rotate(180deg);
   }
+
+  [dir='rtl'] & {
+    margin: 0 $mat-calendar-arrow-size 0 0;
+  }
 }
 
 .mat-calendar-previous-button,
@@ -80,6 +84,10 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
     border: 0 solid currentColor;
     border-top-width: $mat-calendar-prev-next-icon-border-width;
   }
+
+  [dir='rtl'] & {
+    transform: rotate(180deg);
+  }
 }
 
 .mat-calendar-previous-button::after {