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

crisbeto · andrewseguin · commit 22f0ea039325 · 2017-06-05T15:43:12.000-07:00
Fixes the calendar arrows pointing in the wrong direction in RTL.
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 {

Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,10 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);`
`63`	`63`	`&.mat-calendar-invert {`
`64`	`64`	`transform: rotate(180deg);`
`65`	`65`	`}`
	`66`	`+`
	`67`	`+ [dir='rtl'] & {`
	`68`	`+ margin: 0 $mat-calendar-arrow-size 0 0;`
	`69`	`+ }`
`66`	`70`	`}`
`67`	`71`
`68`	`72`	`.mat-calendar-previous-button,`
`@@ -80,6 +84,10 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);`
`80`	`84`	`border: 0 solid currentColor;`
`81`	`85`	`border-top-width: $mat-calendar-prev-next-icon-border-width;`
`82`	`86`	`}`
	`87`	`+`
	`88`	`+ [dir='rtl'] & {`
	`89`	`+ transform: rotate(180deg);`
	`90`	`+ }`
`83`	`91`	`}`
`84`	`92`
`85`	`93`	`.mat-calendar-previous-button::after {`