3
3
@import ' ../../cdk/a11y/a11y' ;
4
4
5
5
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 ;
9
8
$mat-card-header-size : 40px !default ;
10
9
11
10
.mat-card {
12
11
@include mat-elevation-transition ;
13
- @include mat-overridable-elevation (2 );
12
+ @include mat-overridable-elevation (1 );
14
13
display : block ;
15
14
position : relative ;
16
- padding : $mat-card-default- padding ;
15
+ padding : $mat-card-padding ;
17
16
border-radius : $mat-card-border-radius ;
18
17
19
18
.mat-divider-horizontal {
@@ -53,14 +52,19 @@ $mat-card-header-size: 40px !default;
53
52
margin-bottom : 16px ;
54
53
}
55
54
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 {
57
61
@extend %mat-card-section-base ;
58
62
}
59
63
60
64
.mat-card-actions {
61
65
@extend %mat-card-section-base ;
62
- margin-left : -16 px ;
63
- margin-right : -16 px ;
66
+ margin-left : - $mat-card-padding / 2 ;
67
+ margin-right : - $mat-card-padding / 2 ;
64
68
padding : 8px 0 ;
65
69
}
66
70
@@ -70,8 +74,8 @@ $mat-card-header-size: 40px !default;
70
74
}
71
75
72
76
.mat-card-image {
73
- width : calc (100% + 48 px );
74
- margin : 0 -24 px 16px -24 px ;
77
+ width : calc (100% + #{ $mat-card-padding * 2 } );
78
+ margin : 0 ( - $mat-card-padding ) 16px ( - $mat-card-padding ) ;
75
79
}
76
80
77
81
.mat-card-xl-image {
@@ -83,15 +87,15 @@ $mat-card-header-size: 40px !default;
83
87
.mat-card-footer {
84
88
// The negative margins pulls out the element, countering the padding
85
89
// to get the footer to be flush against the side of the card.
86
- $margin : - $mat-card-default- padding ;
90
+ $margin : - $mat-card-padding ;
87
91
88
92
display : block ;
89
93
margin : 0 $margin $margin $margin ;
90
94
}
91
95
92
96
.mat-card-actions {
93
97
.mat-button , .mat-raised-button {
94
- margin : 0 4 px ;
98
+ margin : 0 8 px ;
95
99
}
96
100
}
97
101
@@ -100,10 +104,14 @@ $mat-card-header-size: 40px !default;
100
104
.mat-card-header {
101
105
display : flex ;
102
106
flex-direction : row ;
107
+
108
+ .mat-card-title {
109
+ margin-bottom : 12px ;
110
+ }
103
111
}
104
112
105
113
.mat-card-header-text {
106
- margin : 0 8 px ;
114
+ margin : 0 $mat-card-padding ;
107
115
}
108
116
109
117
.mat-card-avatar {
@@ -115,52 +123,29 @@ $mat-card-header-size: 40px !default;
115
123
116
124
// TITLE-GROUP STYLES
117
125
118
- // images grouped with title in title-group layout
119
- %mat-card-title-img {
120
- margin : -8px 0 ;
121
- }
122
-
123
126
.mat-card-title-group {
124
127
display : flex ;
125
128
justify-content : space-between ;
126
- margin : 0 -8px ;
127
129
}
128
130
129
131
.mat-card-sm-image {
130
- @extend %mat-card-title-img ;
131
132
width : 80px ;
132
133
height : 80px ;
133
134
}
134
135
135
136
.mat-card-md-image {
136
- @extend %mat-card-title-img ;
137
137
width : 112px ;
138
138
height : 112px ;
139
139
}
140
140
141
141
.mat-card-lg-image {
142
- @extend %mat-card-title-img ;
143
142
width : 152px ;
144
143
height : 152px ;
145
144
}
146
145
147
146
// MEDIA QUERIES
148
147
149
148
@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
-
164
149
.mat-card-title-group {
165
150
margin : 0 ;
166
151
}
@@ -169,16 +154,6 @@ $mat-card-header-size: 40px !default;
169
154
margin-left : 0 ;
170
155
margin-right : 0 ;
171
156
}
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
-
182
157
}
183
158
184
159
// FIRST/LAST CHILD ADJUSTMENTS
@@ -197,15 +172,17 @@ $mat-card-header-size: 40px !default;
197
172
}
198
173
199
174
// 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)
201
176
.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 ;
203
180
}
204
181
205
182
// 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
207
184
.mat-card > .mat-card-actions :last-child {
208
- margin-bottom : -16 px ;
185
+ margin-bottom : -8 px ;
209
186
padding-bottom : 0 ;
210
187
}
211
188
@@ -217,6 +194,10 @@ $mat-card-header-size: 40px !default;
217
194
margin-right : 0 ;
218
195
}
219
196
197
+ .mat-card-title {
198
+ margin-bottom : 8px ;
199
+ }
200
+
220
201
// should be 12px space between titles and subtitles generally
221
202
// default margin-bottom is 16px, so need to move lower title up 4px
222
203
.mat-card-title :not (:first-child ), .mat-card-subtitle :not (:first-child ) {
@@ -230,13 +211,13 @@ $mat-card-header-size: 40px !default;
230
211
}
231
212
232
213
// 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
234
215
.mat-card > .mat-card-xl-image :first-child {
235
216
margin-top : -8px ;
236
217
}
237
218
238
219
// 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
240
221
.mat-card > .mat-card-xl-image :last-child {
241
222
margin-bottom : -8px ;
242
223
}
0 commit comments