fix(badge): remove badge margins (#11599)

crisbeto · andrewseguin · commit f04206894031 · 2018-06-07T12:21:05.000-07:00
Removes the margins that are being added to an element that has a badge. Having the margin was problematic, because it can influence the user's layout and it doesn't handle toggling between a visible and hidden badge very well. Fixes #11596.
diff --git a/src/demo-app/badge/badge-demo.scss b/src/demo-app/badge/badge-demo.scss
@@ -1,3 +1,12 @@
 .demo-badge {
   margin-bottom: 25px;
 }
+
+.mat-badge {
+  margin-right: 22px;
+
+  [dir='rtl'] & {
+    margin-right: 0;
+    margin-left: 22px;
+  }
+}
diff --git a/src/lib/badge/_badge-theme.scss b/src/lib/badge/_badge-theme.scss
@@ -38,35 +38,25 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
   }
 
   &.mat-badge-before {
-    margin-left: $size;
-
     .mat-badge-content {
       left: -$size;
     }
   }
 
   [dir='rtl'] &.mat-badge-before {
-    margin-left: 0;
-    margin-right: $size;
-
     .mat-badge-content {
       left: auto;
       right: -$size;
     }
   }
 
   &.mat-badge-after {
-    margin-right: $size;
-
     .mat-badge-content {
       right: -$size;
     }
   }
 
   [dir='rtl'] &.mat-badge-after {
-    margin-right: 0;
-    margin-left: $size;
-
     .mat-badge-content {
       right: auto;
       left: -$size;
@@ -75,35 +65,25 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 
   &.mat-badge-overlap {
     &.mat-badge-before {
-      margin-left: $size / 2;
-
       .mat-badge-content {
         left: -$size / 2;
       }
     }
 
     [dir='rtl'] &.mat-badge-before {
-      margin-left: 0;
-      margin-right: $size / 2;
-
       .mat-badge-content {
         left: auto;
         right: -$size / 2;
       }
     }
 
     &.mat-badge-after {
-      margin-right: $size / 2;
-
       .mat-badge-content {
         right: -$size / 2;
       }
     }
 
     [dir='rtl'] &.mat-badge-after {
-      margin-right: 0;
-      margin-left: $size;
-
       .mat-badge-content {
         right: auto;
         left: -$size / 2;

Original file line number	Diff line number	Diff line change
`@@ -38,35 +38,25 @@ $mat-badge-large-size: $mat-badge-default-size + 6;`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`&.mat-badge-before {`
`41`		`- margin-left: $size;`
`42`		`-`
`43`	`41`	`.mat-badge-content {`
`44`	`42`	`left: -$size;`
`45`	`43`	`}`
`46`	`44`	`}`
`47`	`45`
`48`	`46`	`[dir='rtl'] &.mat-badge-before {`
`49`		`- margin-left: 0;`
`50`		`- margin-right: $size;`
`51`		`-`
`52`	`47`	`.mat-badge-content {`
`53`	`48`	`left: auto;`
`54`	`49`	`right: -$size;`
`55`	`50`	`}`
`56`	`51`	`}`
`57`	`52`
`58`	`53`	`&.mat-badge-after {`
`59`		`- margin-right: $size;`
`60`		`-`
`61`	`54`	`.mat-badge-content {`
`62`	`55`	`right: -$size;`
`63`	`56`	`}`
`64`	`57`	`}`
`65`	`58`
`66`	`59`	`[dir='rtl'] &.mat-badge-after {`
`67`		`- margin-right: 0;`
`68`		`- margin-left: $size;`
`69`		`-`
`70`	`60`	`.mat-badge-content {`
`71`	`61`	`right: auto;`
`72`	`62`	`left: -$size;`
`@@ -75,35 +65,25 @@ $mat-badge-large-size: $mat-badge-default-size + 6;`
`75`	`65`
`76`	`66`	`&.mat-badge-overlap {`
`77`	`67`	`&.mat-badge-before {`
`78`		`- margin-left: $size / 2;`
`79`		`-`
`80`	`68`	`.mat-badge-content {`
`81`	`69`	`left: -$size / 2;`
`82`	`70`	`}`
`83`	`71`	`}`
`84`	`72`
`85`	`73`	`[dir='rtl'] &.mat-badge-before {`
`86`		`- margin-left: 0;`
`87`		`- margin-right: $size / 2;`
`88`		`-`
`89`	`74`	`.mat-badge-content {`
`90`	`75`	`left: auto;`
`91`	`76`	`right: -$size / 2;`
`92`	`77`	`}`
`93`	`78`	`}`
`94`	`79`
`95`	`80`	`&.mat-badge-after {`
`96`		`- margin-right: $size / 2;`
`97`		`-`
`98`	`81`	`.mat-badge-content {`
`99`	`82`	`right: -$size / 2;`
`100`	`83`	`}`
`101`	`84`	`}`
`102`	`85`
`103`	`86`	`[dir='rtl'] &.mat-badge-after {`
`104`		`- margin-right: 0;`
`105`		`- margin-left: $size;`
`106`		`-`
`107`	`87`	`.mat-badge-content {`
`108`	`88`	`right: auto;`
`109`	`89`	`left: -$size / 2;`