Skip to content

Commit 7e2c332

Browse files
committed
feat(card): align with 2018 material design spec
Aligns the card component with the latest Material Design spec. Also fixes an issue where the border radius wasn't being applied to the image inside the card.
1 parent ac8339c commit 7e2c332

File tree

2 files changed

+39
-55
lines changed

2 files changed

+39
-55
lines changed

src/lib/card/_card-theme.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,16 @@
2525
.mat-card-title {
2626
font: {
2727
size: mat-font-size($config, headline);
28-
weight: mat-font-weight($config, headline);
28+
weight: mat-font-weight($config, title);
2929
}
3030
}
3131

32-
.mat-card-subtitle,
33-
.mat-card-content,
3432
.mat-card-header .mat-card-title {
33+
font-size: mat-font-size($config, title);
34+
}
35+
36+
.mat-card-subtitle,
37+
.mat-card-content {
3538
font-size: mat-font-size($config, body-1);
3639
}
3740
}

src/lib/card/card.scss

Lines changed: 33 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@
33
@import '../../cdk/a11y/a11y';
44

55

6-
$mat-card-default-padding: 24px !default;
7-
$mat-card-mobile-padding: 24px 16px !default;
8-
$mat-card-border-radius: 2px !default;
6+
$mat-card-padding: 16px !default;
7+
$mat-card-border-radius: 4px !default;
98
$mat-card-header-size: 40px !default;
109

1110
.mat-card {
1211
@include mat-elevation-transition;
13-
@include mat-overridable-elevation(2);
12+
@include mat-overridable-elevation(1);
1413
display: block;
1514
position: relative;
16-
padding: $mat-card-default-padding;
15+
padding: $mat-card-padding;
1716
border-radius: $mat-card-border-radius;
1817

1918
.mat-divider-horizontal {
@@ -53,14 +52,19 @@ $mat-card-header-size: 40px !default;
5352
margin-bottom: 16px;
5453
}
5554

56-
.mat-card-title, .mat-card-subtitle, .mat-card-content {
55+
.mat-card-title {
56+
display: block;
57+
margin-bottom: 8px;
58+
}
59+
60+
.mat-card-subtitle, .mat-card-content {
5761
@extend %mat-card-section-base;
5862
}
5963

6064
.mat-card-actions {
6165
@extend %mat-card-section-base;
62-
margin-left: -16px;
63-
margin-right: -16px;
66+
margin-left: -$mat-card-padding / 2;
67+
margin-right: -$mat-card-padding / 2;
6468
padding: 8px 0;
6569
}
6670

@@ -70,8 +74,8 @@ $mat-card-header-size: 40px !default;
7074
}
7175

7276
.mat-card-image {
73-
width: calc(100% + 48px);
74-
margin: 0 -24px 16px -24px;
77+
width: calc(100% + #{$mat-card-padding * 2});
78+
margin: 0 (-$mat-card-padding) 16px (-$mat-card-padding);
7579
}
7680

7781
.mat-card-xl-image {
@@ -83,15 +87,15 @@ $mat-card-header-size: 40px !default;
8387
.mat-card-footer {
8488
// The negative margins pulls out the element, countering the padding
8589
// to get the footer to be flush against the side of the card.
86-
$margin: -$mat-card-default-padding;
90+
$margin: -$mat-card-padding;
8791

8892
display: block;
8993
margin: 0 $margin $margin $margin;
9094
}
9195

9296
.mat-card-actions {
9397
.mat-button, .mat-raised-button {
94-
margin: 0 4px;
98+
margin: 0 8px;
9599
}
96100
}
97101

@@ -100,10 +104,14 @@ $mat-card-header-size: 40px !default;
100104
.mat-card-header {
101105
display: flex;
102106
flex-direction: row;
107+
108+
.mat-card-title {
109+
margin-bottom: 12px;
110+
}
103111
}
104112

105113
.mat-card-header-text {
106-
margin: 0 8px;
114+
margin: 0 $mat-card-padding;
107115
}
108116

109117
.mat-card-avatar {
@@ -115,52 +123,29 @@ $mat-card-header-size: 40px !default;
115123

116124
// TITLE-GROUP STYLES
117125

118-
// images grouped with title in title-group layout
119-
%mat-card-title-img {
120-
margin: -8px 0;
121-
}
122-
123126
.mat-card-title-group {
124127
display: flex;
125128
justify-content: space-between;
126-
margin: 0 -8px;
127129
}
128130

129131
.mat-card-sm-image {
130-
@extend %mat-card-title-img;
131132
width: 80px;
132133
height: 80px;
133134
}
134135

135136
.mat-card-md-image {
136-
@extend %mat-card-title-img;
137137
width: 112px;
138138
height: 112px;
139139
}
140140

141141
.mat-card-lg-image {
142-
@extend %mat-card-title-img;
143142
width: 152px;
144143
height: 152px;
145144
}
146145

147146
// MEDIA QUERIES
148147

149148
@media ($mat-xsmall) {
150-
.mat-card {
151-
padding: $mat-card-mobile-padding;
152-
}
153-
154-
.mat-card-actions {
155-
margin-left: -8px;
156-
margin-right: -8px;
157-
}
158-
159-
.mat-card-image {
160-
width: calc(100% + 32px);
161-
margin: 16px -16px;
162-
}
163-
164149
.mat-card-title-group {
165150
margin: 0;
166151
}
@@ -169,16 +154,6 @@ $mat-card-header-size: 40px !default;
169154
margin-left: 0;
170155
margin-right: 0;
171156
}
172-
173-
.mat-card-header {
174-
margin: -8px 0 0 0;
175-
}
176-
177-
.mat-card-footer {
178-
margin-left: -16px;
179-
margin-right: -16px;
180-
}
181-
182157
}
183158

184159
// FIRST/LAST CHILD ADJUSTMENTS
@@ -197,15 +172,17 @@ $mat-card-header-size: 40px !default;
197172
}
198173

199174
// if main image is on top, need to place it flush against top
200-
// (by stripping card's default 24px padding)
175+
// (by stripping card's default padding)
201176
.mat-card-image:first-child {
202-
margin-top: -24px;
177+
margin-top: -$mat-card-padding;
178+
border-top-left-radius: inherit;
179+
border-top-right-radius: inherit;
203180
}
204181

205182
// actions panel on bottom should be 8px from bottom of card
206-
// so must strip 16px from default card padding of 24px
183+
// so must strip 16px from default card padding
207184
.mat-card > .mat-card-actions:last-child {
208-
margin-bottom: -16px;
185+
margin-bottom: -8px;
209186
padding-bottom: 0;
210187
}
211188

@@ -217,6 +194,10 @@ $mat-card-header-size: 40px !default;
217194
margin-right: 0;
218195
}
219196

197+
.mat-card-title {
198+
margin-bottom: 8px;
199+
}
200+
220201
// should be 12px space between titles and subtitles generally
221202
// default margin-bottom is 16px, so need to move lower title up 4px
222203
.mat-card-title:not(:first-child), .mat-card-subtitle:not(:first-child) {
@@ -230,13 +211,13 @@ $mat-card-header-size: 40px !default;
230211
}
231212

232213
// xl image should always have 16px on top.
233-
// when it's the first el, it'll need to remove 8px from default card padding of 24px
214+
// when it's the first el, it'll need to remove 8px from default card padding
234215
.mat-card > .mat-card-xl-image:first-child {
235216
margin-top: -8px;
236217
}
237218

238219
// xl image should always have 16px on bottom
239-
// when it's the last el, it'll need to remove 8px from default card padding of 24px
220+
// when it's the last el, it'll need to remove 8px from default card padding
240221
.mat-card > .mat-card-xl-image:last-child {
241222
margin-bottom: -8px;
242223
}

0 commit comments

Comments
 (0)