UNPKG

4.74 kBSCSSView Raw
1
2@import 'variables';
3@import 'elevation';
4@import 'default-theme'; // TODO: Remove this
5
6$md-card-default-padding: 24px !default;
7$md-card-mobile-padding: 24px 16px !default;
8$md-card-border-radius: 2px !default;
9$md-card-header-size: 40px !default;
10
11md-card {
12 @include md-elevation(1);
13 @include md-elevation-transition;
14 display: block;
15 position: relative;
16 padding: $md-card-default-padding;
17 border-radius: $md-card-border-radius;
18 font-family: $md-font-family;
19 background: md-color($md-background, card);
20 color: md-color($md-foreground, base);
21}
22
23md-card:hover {
24 @include md-elevation(2);
25}
26
27.md-card-flat {
28 box-shadow: none;
29}
30
31// base styles for each card section preset (md-card-content, etc)
32%md-card-section-base {
33 display: block;
34 margin-bottom: 16px;
35}
36
37md-card-title {
38 @extend %md-card-section-base;
39 font-size: 24px;
40 font-weight: 400;
41}
42
43md-card-subtitle {
44 @extend %md-card-section-base;
45 font-size: $md-body-font-size-base;
46 color: md-color($md-foreground, secondary-text);
47}
48
49md-card-content {
50 @extend %md-card-section-base;
51 font-size: $md-body-font-size-base;
52}
53
54md-card-actions {
55 @extend %md-card-section-base;
56 margin-left: -16px;
57 margin-right: -16px;
58 padding: 8px 0;
59
60 &[align='end'] {
61 display: flex;
62 justify-content: flex-end;
63 }
64}
65
66[md-card-image] {
67 width: calc(100% + 48px);
68 margin: 0 -24px 16px -24px;
69}
70
71[md-card-xl-image] {
72 width: 240px;
73 height: 240px;
74 margin: -8px;
75}
76
77md-card-footer {
78 position: absolute;
79 bottom: 0;
80}
81
82md-card-actions {
83 [md-button], [md-raised-button] {
84 margin: 0 4px;
85 }
86}
87
88/* HEADER STYLES */
89
90md-card-header {
91 display: flex;
92 flex-direction: row;
93 height: $md-card-header-size;
94 margin: -8px 0 16px 0;
95}
96
97.md-card-header-text {
98 height: $md-card-header-size;
99 margin: 0 8px;
100}
101
102[md-card-avatar] {
103 height: $md-card-header-size;
104 width: $md-card-header-size;
105 border-radius: 50%;
106}
107
108md-card-header md-card-title {
109 font-size: $md-body-font-size-base;
110}
111
112/* TITLE-GROUP STYLES */
113
114// images grouped with title in title-group layout
115%md-card-title-img {
116 margin: -8px 0;
117}
118
119md-card-title-group {
120 display: flex;
121 justify-content: space-between;
122 margin: 0 -8px;
123}
124
125[md-card-sm-image] {
126 @extend %md-card-title-img;
127 width: 80px;
128 height: 80px;
129}
130
131[md-card-md-image] {
132 @extend %md-card-title-img;
133 width: 112px;
134 height: 112px;
135}
136
137[md-card-lg-image] {
138 @extend %md-card-title-img;
139 width: 152px;
140 height: 152px;
141}
142
143/* MEDIA QUERIES */
144
145@media ($md-xsmall) {
146 md-card {
147 padding: $md-card-mobile-padding;
148 }
149
150 [md-card-image] {
151 width: calc(100% + 32px);
152 margin: 16px -16px;
153 }
154
155 md-card-title-group {
156 margin: 0;
157 }
158
159 [md-card-xl-image] {
160 margin-left: 0;
161 margin-right: 0;
162 }
163
164 md-card-header {
165 margin: -8px 0 0 0;
166 }
167
168}
169
170/* FIRST/LAST CHILD ADJUSTMENTS */
171
172// top els in md-card-content and md-card can't have their default margin-tops (e.g. <p> tags)
173// or they'll incorrectly add to card's top padding
174md-card > :first-child, md-card-content > :first-child {
175 margin-top: 0;
176}
177
178// last els in md-card-content and md-card can't have their default margin-bottoms (e.g. <p> tags)
179// or they'll incorrectly add to card's bottom padding
180md-card > :last-child, md-card-content > :last-child {
181 margin-bottom: 0;
182}
183
184// if main image is on top, need to place it flush against top
185// (by stripping card's default 24px padding)
186[md-card-image]:first-child {
187 margin-top: -24px;
188}
189
190// actions panel on bottom should be 8px from bottom of card
191// so must strip 16px from default card padding of 24px
192md-card > md-card-actions:last-child {
193 margin-bottom: -16px;
194 padding-bottom: 0;
195}
196
197// actions panel should always be 8px from sides,
198// so the first button in the actions panel can't add its own margins
199md-card-actions [md-button]:first-child,
200md-card-actions [md-raised-button]:first-child {
201 margin-left: 0;
202 margin-right: 0;
203}
204
205// should be 12px space between titles and subtitles generally
206// default margin-bottom is 16px, so need to move lower title up 4px
207md-card-title:not(:first-child), md-card-subtitle:not(:first-child) {
208 margin-top: -4px;
209}
210
211// should be 8px space between titles and subtitles in header
212// default margin-bottom is 16px, so need to move subtitle in header up 4px
213md-card-header md-card-subtitle:not(:first-child) {
214 margin-top: -8px;
215}
216
217// xl image should always have 16px on top.
218// when it's the first el, it'll need to remove 8px from default card padding of 24px
219md-card > [md-card-xl-image]:first-child {
220 margin-top: -8px;
221}
222
223// xl image should always have 16px on bottom
224// when it's the last el, it'll need to remove 8px from default card padding of 24px
225md-card > [md-card-xl-image]:last-child {
226 margin-bottom: -8px;
227}