From 6f980230e726ef49b5869fa837d473c055a22100 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 30 Mar 2018 12:03:14 +0200
Subject: [PATCH] fix(badge): incorrectly handling rtl

* Fixes all of the RTL selectors being scoped to the badge itself, rather than a parent, which means that consumers would have to set `dir="rtl"` on each individual badge.
* Fixes none of the `left`/`right` values being inverted.
---
 src/lib/badge/_badge-theme.scss | 52 +++++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/src/lib/badge/_badge-theme.scss b/src/lib/badge/_badge-theme.scss
index 7e3787b6805f..405c361aec04 100644
--- a/src/lib/badge/_badge-theme.scss
+++ b/src/lib/badge/_badge-theme.scss
@@ -40,26 +40,36 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
   &.mat-badge-before {
     margin-left: $size;
 
-    &[dir='rtl'] {
-      margin-left: 0;
-      margin-right: $size;
+    .mat-badge-content {
+      left: -$size;
     }
+  }
+
+  [dir='rtl'] &.mat-badge-before {
+    margin-left: 0;
+    margin-right: $size;
 
     .mat-badge-content {
-      left: -$size;
+      left: auto;
+      right: -$size;
     }
   }
 
   &.mat-badge-after {
     margin-right: $size;
 
-    &[dir='rtl'] {
-      margin-right: 0;
-      margin-left: $size;
+    .mat-badge-content {
+      right: -$size;
     }
+  }
+
+  [dir='rtl'] &.mat-badge-after {
+    margin-right: 0;
+    margin-left: $size;
 
     .mat-badge-content {
-      right: -$size;
+      right: auto;
+      left: -$size;
     }
   }
 
@@ -67,26 +77,36 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
     &.mat-badge-before {
       margin-left: $size / 2;
 
-      &[dir='rtl'] {
-        margin-left: 0;
-        margin-right: $size / 2;
+      .mat-badge-content {
+        left: -$size / 2;
       }
+    }
+
+    [dir='rtl'] &.mat-badge-before {
+      margin-left: 0;
+      margin-right: $size / 2;
 
       .mat-badge-content {
-        left: -$size / 2;
+        left: auto;
+        right: -$size / 2;
       }
     }
 
     &.mat-badge-after {
       margin-right: $size / 2;
 
-      &[dir='rtl'] {
-        margin-right: 0;
-        margin-left: $size;
+      .mat-badge-content {
+        right: -$size / 2;
       }
+    }
+
+    [dir='rtl'] &.mat-badge-after {
+      margin-right: 0;
+      margin-left: $size;
 
       .mat-badge-content {
-        right: -$size / 2;
+        right: auto;
+        left: -$size / 2;
       }
     }
   }