Skip to content

Commit b8ffdfe

Browse files
EladBezalelThomasBurleson
EladBezalel
authored and
ThomasBurleson
committed
feat(card): improved to behave as spec
Added all functionality as seen in: http://www.google.com/design/spec/components/cards.html#cards-content-blocks fixes angular#1900. closes angular#5607.
1 parent 1a3123d commit b8ffdfe

File tree

12 files changed

+548
-63
lines changed

12 files changed

+548
-63
lines changed

‎src/components/button/button.scss

+4-5
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ $button-fab-mini-line-height: rem(4.00) !default;
1515

1616
$button-fab-toast-offset: $button-fab-height * 0.75 !default;
1717

18-
$icon-button-height: rem(4.800) !default;
19-
$icon-button-width: rem(4.800) !default;
18+
$icon-button-height: rem(4.000) !default;
19+
$icon-button-width: rem(4.000) !default;
2020
$icon-button-margin: rem(0.600) !default;
2121

2222
// Fix issue causing buttons in Firefox to be 2px bigger than they should
@@ -93,9 +93,8 @@ button.md-button::-moz-focus-inner {
9393
margin: 0 $icon-button-margin;
9494
height: $icon-button-height;
9595
min-width: 0;
96-
line-height: $icon-button-height;
97-
padding-left: 0;
98-
padding-right: 0;
96+
line-height: $icon-size;
97+
padding: $baseline-grid;
9998
width: $icon-button-width;
10099
border-radius: $button-icon-border-radius;
101100
.md-ripple-container {

‎src/components/card/card-theme.scss

+25
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,29 @@ md-card.md-THEME_NAME-theme {
77
.md-card-image {
88
border-radius: $card-border-radius $card-border-radius 0 0;
99
}
10+
11+
md-card-header {
12+
md-card-avatar {
13+
md-icon {
14+
color: '{{background-color}}';
15+
background-color: '{{foreground-3}}';
16+
}
17+
}
18+
19+
md-card-header-text {
20+
.md-subhead {
21+
color: '{{foreground-2}}'
22+
}
23+
}
24+
}
25+
26+
md-card-title {
27+
md-card-title-text {
28+
&:not(:only-child) {
29+
.md-subhead {
30+
color: '{{foreground-2}}';
31+
}
32+
}
33+
}
34+
}
1035
}

‎src/components/card/card.js

+60-4
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@
66
* Card components.
77
*/
88
angular.module('material.components.card', [
9-
'material.core'
10-
])
9+
'material.core'
10+
])
1111
.directive('mdCard', mdCardDirective);
1212

1313

14-
1514
/**
1615
* @ngdoc directive
1716
* @name mdCard
@@ -29,6 +28,28 @@ angular.module('material.components.card', [
2928
* Action buttons can be included in an `<md-card-actions>` element, similar to `<md-dialog-actions>`.
3029
* You can then position buttons using layout attributes.
3130
*
31+
* Card is built with:
32+
* * `<md-card-header>` - Header for the card, holds avatar, text and squared image
33+
* - `<md-card-avatar>` - Card avatar
34+
* - `md-user-avatar` - Class for user image
35+
* - `<md-icon>`
36+
* - `<md-card-header-text>` - Contains elements for the card description
37+
* - `md-title` - Class for the card title
38+
* - `md-subhead` - Class for the card sub header
39+
* * `<img>` - Image for the card
40+
* * `<md-card-title>` - Card content title
41+
* - `<md-card-title-text>`
42+
* - `md-headline` - Class for the card content title
43+
* - `md-subhead` - Class for the card content sub header
44+
* - `<md-card-title-media>` - Squared image within the title
45+
* - `md-media-sm` - Class for small image
46+
* - `md-media-md` - Class for medium image
47+
* - `md-media-lg` - Class for large image
48+
* * `<md-card-content>` - Card content
49+
* - `md-media-xl` - Class for extra large image
50+
* * `<md-card-actions>` - Card actions
51+
* - `<md-card-icon-actions>` - Icon actions
52+
*
3253
* Cards have constant width and variable heights; where the maximum height is limited to what can
3354
* fit within a single view on a platform, but it can temporarily expand as needed.
3455
*
@@ -62,11 +83,46 @@ angular.module('material.components.card', [
6283
* </md-card>
6384
* </hljs>
6485
*
86+
* ### Card with header, image, title actions and content
87+
* <hljs lang="html">
88+
* <md-card>
89+
* <md-card-header>
90+
* <md-card-avatar>
91+
* <img class="md-user-avatar" src="avatar.png"/>
92+
* </md-card-avatar>
93+
* <md-card-header-text>
94+
* <span class="md-title">Title</span>
95+
* <span class="md-subhead">Sub header</span>
96+
* </md-card-header-text>
97+
* </md-card-header>
98+
* <img ng-src="card-image.png" class="md-card-image" alt="image caption">
99+
* <md-card-title>
100+
* <md-card-title-text>
101+
* <span class="md-headline">Card headline</span>
102+
* <span class="md-subhead">Card subheader</span>
103+
* </md-card-title-text>
104+
* </md-card-title>
105+
* <md-card-actions layout="row" layout-align="start center">
106+
* <md-button>Action 1</md-button>
107+
* <md-button>Action 2</md-button>
108+
* <md-card-icon-actions>
109+
* <md-button class="md-icon-button" aria-label="icon">
110+
* <md-icon md-svg-icon="icon"></md-icon>
111+
* </md-button>
112+
* </md-card-icon-actions>
113+
* </md-card-actions>
114+
* <md-card-content>
115+
* <p>
116+
* Card content
117+
* </p>
118+
* </md-card-content>
119+
* </md-card>
120+
* </hljs>
65121
*/
66122
function mdCardDirective($mdTheming) {
67123
return {
68124
restrict: 'E',
69-
link: function($scope, $element, $attr) {
125+
link: function ($scope, $element) {
70126
$mdTheming($element);
71127
}
72128
};

‎src/components/card/card.scss

+166-6
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,56 @@ md-card {
99

1010
box-shadow: $card-box-shadow;
1111

12+
md-card-header {
13+
padding: $card-padding;
14+
display: flex;
15+
flex-direction: row;
16+
17+
&:first-child {
18+
md-card-avatar {
19+
margin-right: 12px;
20+
}
21+
}
22+
23+
&:last-child {
24+
md-card-avatar {
25+
margin-left: 12px;
26+
}
27+
}
28+
29+
md-card-avatar {
30+
width: 40px;
31+
height: 40px;
32+
33+
.md-user-avatar,
34+
md-icon{
35+
border-radius: 50%;
36+
}
37+
38+
md-icon {
39+
padding: 8px;
40+
}
41+
42+
& + md-card-header-text {
43+
max-height: 40px;
44+
45+
.md-title {
46+
font-size: 14px;
47+
}
48+
}
49+
}
50+
51+
md-card-header-text {
52+
display: flex;
53+
flex: 1;
54+
flex-direction: column;
55+
56+
.md-subhead {
57+
font-size: 14px;
58+
}
59+
}
60+
}
61+
1262
> img,
1363
> :not(md-card-content) img {
1464
display: flex;
@@ -17,21 +67,131 @@ md-card {
1767
height: auto;
1868
}
1969

70+
md-card-title {
71+
padding: 3 * $card-padding / 2 $card-padding $card-padding;
72+
display: flex;
73+
flex: 1;
74+
flex-direction: row;
75+
76+
& + md-card-content {
77+
padding-top: 0;
78+
}
79+
80+
md-card-title-text {
81+
flex: 1;
82+
flex-direction: column;
83+
display: flex;
84+
85+
.md-subhead {
86+
padding-top: 0;
87+
font-size: 14px;
88+
}
89+
90+
&:only-child {
91+
.md-subhead {
92+
padding-top: 3 * $card-padding / 4;
93+
}
94+
}
95+
}
96+
97+
md-card-title-media {
98+
margin-top: - $card-padding / 2;
99+
100+
.md-media-sm {
101+
height: 80px;
102+
width: 80px;
103+
}
104+
.md-media-md {
105+
height: 112px;
106+
width: 112px;
107+
}
108+
.md-media-lg {
109+
height: 152px;
110+
width: 152px;
111+
}
112+
}
113+
}
114+
20115
md-card-content {
21116
display: block;
22117
padding: $card-padding;
118+
119+
& > p {
120+
margin: 0;
121+
}
122+
123+
.md-media-xl {
124+
height: 240px;
125+
width: 240px;
126+
}
23127
}
24128

25129
.md-actions, md-card-actions {
26-
margin: 0;
130+
margin: $baseline-grid;
131+
132+
&.layout-column {
133+
.md-button {
134+
&:not(.md-icon-button) {
135+
margin: $baseline-grid / 4 0;
136+
137+
&:first-of-type {
138+
margin-top: 0;
139+
}
140+
141+
&:last-of-type {
142+
margin-bottom: 0;
143+
}
144+
}
27145

28-
.md-button {
29-
margin-bottom: $baseline-grid;
30-
margin-top: $baseline-grid;
31-
margin-right: $baseline-grid * .5;
32-
margin-left: $baseline-grid * .5;
146+
&.md-icon-button {
147+
margin-top: 3 * $baseline-grid / 4;
148+
margin-bottom: 3 * $baseline-grid / 4;
149+
}
150+
}
151+
}
152+
153+
md-card-icon-actions {
154+
flex: 1;
155+
justify-content: flex-start;
156+
display: flex;
157+
flex-direction: row;
158+
}
159+
160+
&:not(.layout-column) .md-button {
161+
&:not(.md-icon-button) {
162+
margin: 0 $baseline-grid * .5;
163+
164+
&:first-of-type {
165+
margin-left: 0;
166+
}
167+
168+
&:last-of-type {
169+
margin-right: 0;
170+
}
171+
}
172+
173+
&.md-icon-button {
174+
margin-left: 3 * $baseline-grid / 4;
175+
margin-right: 3 * $baseline-grid / 4;
176+
177+
&:first-of-type {
178+
margin-left: 3 * $baseline-grid / 2;
179+
}
180+
181+
&:last-of-type {
182+
margin-right: 3 * $baseline-grid / 2;
183+
}
184+
}
185+
186+
& + md-card-icon-actions {
187+
flex: 1;
188+
justify-content: flex-end;
189+
display: flex;
190+
flex-direction: row;
191+
}
33192
}
34193
}
194+
35195
md-card-footer {
36196
margin-top: auto;
37197
padding: $card-padding;

0 commit comments

Comments
 (0)