Skip to content

Commit 0a447e8

Browse files
committed
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.
1 parent 695dde6 commit 0a447e8

File tree

2 files changed

+21
-6
lines changed

2 files changed

+21
-6
lines changed

src/material-experimental/mdc-card/card.scss

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,11 @@ $mat-card-default-padding: 16px !default;
2828
// Custom elements default to `display: inline`. Reset to 'block'.
2929
display: block;
3030

31-
// Apply default padding for a text content region. Omit any bottom padding because we assume
32-
// this region will be followed by another region that includes top padding.
33-
padding: $mat-card-default-padding $mat-card-default-padding 0;
31+
.mat-mdc-card-avatar ~ .mat-mdc-card-header-text & {
32+
// Apply default padding for a text content region. Omit any bottom padding because we assume
33+
// this region will be followed by another region that includes top padding.
34+
padding: $mat-card-default-padding $mat-card-default-padding 0;
35+
}
3436
}
3537

3638
// 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;
133135
// `mat-card-title-group` since the padding is captured by parent container already.
134136
.mat-mdc-card-subtitle ~ .mat-mdc-card-title,
135137
.mat-mdc-card-title ~ .mat-mdc-card-subtitle,
136-
.mat-mdc-card-header .mat-mdc-card-title,
137-
.mat-mdc-card-header .mat-mdc-card-subtitle,
138+
139+
// The `.mat-mdc-card-header-text` here is redundant since the header text
140+
// wrapper is always there in the header, but we need the extra specificity.
141+
.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title,
142+
.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle,
138143
.mat-mdc-card-title-group .mat-mdc-card-title,
139144
.mat-mdc-card-title-group .mat-mdc-card-subtitle {
140145
padding-top: 0;

src/material/card/card.scss

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,17 @@ $mat-card-header-size: 40px !default;
103103
}
104104

105105
.mat-card-header-text {
106-
margin: 0 $mat-card-padding;
106+
&:not(:first-child) {
107+
margin-left: $mat-card-padding;
108+
}
109+
110+
[dir='rtl'] & {
111+
margin-left: 0;
112+
113+
&:not(:first-child) {
114+
margin-right: $mat-card-padding;
115+
}
116+
}
107117
}
108118

109119
.mat-card-avatar {

0 commit comments

Comments
 (0)