fix(badge): remove margin if badge is hidden

crisbeto · crisbeto · commit 47ef3ee1290f · 2018-05-31T14:34:23.000+03:00
Currently elements with a `matBadge` get a margin in order to free up enough space for the badge, however that space is also there when the badge is hidden which can throw some layouts off center. These changes remove the margin if the badge is hidden. Fixes #11596.
diff --git a/src/lib/badge/_badge-theme.scss b/src/lib/badge/_badge-theme.scss
@@ -37,15 +37,15 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
     }
   }
 
-  &.mat-badge-before {
+  &.mat-badge-before:not(.mat-badge-hidden) {
     margin-left: $size;
 
     .mat-badge-content {
       left: -$size;
     }
   }
 
-  [dir='rtl'] &.mat-badge-before {
+  [dir='rtl'] &.mat-badge-before:not(.mat-badge-hidden) {
     margin-left: 0;
     margin-right: $size;
 
@@ -55,15 +55,15 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
     }
   }
 
-  &.mat-badge-after {
+  &.mat-badge-after:not(.mat-badge-hidden) {
     margin-right: $size;
 
     .mat-badge-content {
       right: -$size;
     }
   }
 
-  [dir='rtl'] &.mat-badge-after {
+  [dir='rtl'] &.mat-badge-after:not(.mat-badge-hidden) {
     margin-right: 0;
     margin-left: $size;
 
@@ -73,7 +73,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
     }
   }
 
-  &.mat-badge-overlap {
+  &.mat-badge-overlap:not(.mat-badge-hidden) {
     &.mat-badge-before {
       margin-left: $size / 2;
 

Original file line number	Diff line number	Diff line change
`@@ -37,15 +37,15 @@ $mat-badge-large-size: $mat-badge-default-size + 6;`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`
`40`		`- &.mat-badge-before {`
	`40`	`+ &.mat-badge-before:not(.mat-badge-hidden) {`
`41`	`41`	`margin-left: $size;`
`42`	`42`
`43`	`43`	`.mat-badge-content {`
`44`	`44`	`left: -$size;`
`45`	`45`	`}`
`46`	`46`	`}`
`47`	`47`
`48`		`- [dir='rtl'] &.mat-badge-before {`
	`48`	`+ [dir='rtl'] &.mat-badge-before:not(.mat-badge-hidden) {`
`49`	`49`	`margin-left: 0;`
`50`	`50`	`margin-right: $size;`
`51`	`51`
`@@ -55,15 +55,15 @@ $mat-badge-large-size: $mat-badge-default-size + 6;`
`55`	`55`	`}`
`56`	`56`	`}`
`57`	`57`
`58`		`- &.mat-badge-after {`
	`58`	`+ &.mat-badge-after:not(.mat-badge-hidden) {`
`59`	`59`	`margin-right: $size;`
`60`	`60`
`61`	`61`	`.mat-badge-content {`
`62`	`62`	`right: -$size;`
`63`	`63`	`}`
`64`	`64`	`}`
`65`	`65`
`66`		`- [dir='rtl'] &.mat-badge-after {`
	`66`	`+ [dir='rtl'] &.mat-badge-after:not(.mat-badge-hidden) {`
`67`	`67`	`margin-right: 0;`
`68`	`68`	`margin-left: $size;`
`69`	`69`
`@@ -73,7 +73,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6;`
`73`	`73`	`}`
`74`	`74`	`}`
`75`	`75`
`76`		`- &.mat-badge-overlap {`
	`76`	`+ &.mat-badge-overlap:not(.mat-badge-hidden) {`
`77`	`77`	`&.mat-badge-before {`
`78`	`78`	`margin-left: $size / 2;`
`79`	`79`