diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss index 2457dfad39f7..79394913d289 100644 --- 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 index 61e1119649c5..ac4570c16e9a 100644 --- 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 {