fix(card): remove extra margin if header doesn't have an avatar

The card header margin was set up assuming that there would always be an avatar element, but that's not always the case. These changes add an extra check to avoid the extra margin. Fixes #19069.
angular · Apr 17, 2020 · 0a447e8 · 0a447e8
1 parent 695dde6
commit 0a447e8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss
@@ -28,9 +28,11 @@ $mat-card-default-padding: 16px !default;
   // Custom elements default to `display: inline`. Reset to 'block'.
   display: block;
 
-  // Apply default padding for a text content region. Omit any bottom padding because we assume
-  // this region will be followed by another region that includes top padding.
-  padding: $mat-card-default-padding $mat-card-default-padding 0;
+  .mat-mdc-card-avatar ~ .mat-mdc-card-header-text & {
+    // Apply default padding for a text content region. Omit any bottom padding because we assume
+    // this region will be followed by another region that includes top padding.
+    padding: $mat-card-default-padding $mat-card-default-padding 0;
+  }
 }
 
 // Header section at the top of a card. MDC does not have a pre-made header section for cards.
@@ -133,8 +135,11 @@ $mat-card-default-padding: 16px !default;
 // `mat-card-title-group` since the padding is captured by parent container already.
 .mat-mdc-card-subtitle ~ .mat-mdc-card-title,
 .mat-mdc-card-title ~ .mat-mdc-card-subtitle,
-.mat-mdc-card-header .mat-mdc-card-title,
-.mat-mdc-card-header .mat-mdc-card-subtitle,
+
+// The `.mat-mdc-card-header-text` here is redundant since the header text
+// wrapper is always there in the header, but we need the extra specificity.
+.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title,
+.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle,
 .mat-mdc-card-title-group .mat-mdc-card-title,
 .mat-mdc-card-title-group .mat-mdc-card-subtitle {
   padding-top: 0;

diff --git a/src/material/card/card.scss b/src/material/card/card.scss
@@ -103,7 +103,17 @@ $mat-card-header-size: 40px !default;
 }
 
 .mat-card-header-text {
-  margin: 0 $mat-card-padding;
+  &:not(:first-child) {
+    margin-left: $mat-card-padding;
+  }
+
+  [dir='rtl'] & {
+    margin-left: 0;
+
+    &:not(:first-child) {
+      margin-right: $mat-card-padding;
+    }
+  }
 }
 
 .mat-card-avatar {