Skip to content

Commit 21a051e

Browse files
nolimits4webnolimits4web
committed
feat(card): m3 styles, new outline and raised styles
1 parent 7f7cbe2 commit 21a051e

File tree

13 files changed

+287
-394
lines changed

13 files changed

+287
-394
lines changed

‎kitchen-sink/core/css/app.css

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -215,45 +215,14 @@ div.demo-lazy {
215215
background-position: center;
216216
color: #fff;
217217
}
218-
.demo-card-header-pic .card-content-padding .date {
219-
color: #8e8e93;
220-
}
221-
.demo-facebook-card .card-header {
222-
display: block;
223-
padding: 10px;
224-
}
225-
.demo-facebook-card .demo-facebook-avatar {
226-
float: left;
227-
}
228-
.demo-facebook-card .demo-facebook-name {
229-
margin-left: 44px;
230-
font-size: 14px;
231-
font-weight: 500;
232-
}
233-
.demo-facebook-card .demo-facebook-date {
234-
margin-left: 44px;
235-
font-size: 13px;
236-
color: #8e8e93;
218+
.md .demo-card-header-pic .card-header {
219+
margin: 16px 16px 0;
220+
border-radius: 16px;
237221
}
238-
.demo-facebook-card .card-footer {
239-
background: #fafafa;
240-
}
241-
.dark .demo-facebook-card .card-footer {
242-
background-color: transparent;
243-
}
244-
.demo-facebook-card .card-footer a {
245-
color: #81848b;
246-
font-weight: 500;
247-
}
248-
.demo-facebook-card .card-content img {
249-
display: block;
250-
}
251-
.demo-facebook-card .card-content-padding {
252-
padding: 15px 10px;
253-
}
254-
.demo-facebook-card .card-content-padding .likes {
222+
.demo-card-header-pic .card-content-padding .date {
255223
color: #8e8e93;
256224
}
225+
257226
/* Panels Demo */
258227
.panel {
259228
min-width: 150px;

‎kitchen-sink/core/pages/cards.html

Lines changed: 54 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -13,75 +13,88 @@
1313
</div>
1414
<div class="page-content">
1515
<div class="block">
16-
<p>Cards are a great way to contain and organize your information, especially when combined with List Views. Cards can contain unique related data, like for example photos, text or links about a particular subject. Cards are typically an entry point to more complex and detailed information.</p>
16+
<p>Cards are a great way to contain and organize your information, especially when combined with List Views. Cards
17+
can contain unique related data, like for example photos, text or links about a particular subject. Cards are
18+
typically an entry point to more complex and detailed information.</p>
1719
</div>
1820
<div class="block-title">Simple Cards</div>
1921
<div class="card">
20-
<div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
22+
<div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain
23+
their own header, footer, list view, image, or any other element.</div>
2124
</div>
2225
<div class="card">
2326
<div class="card-header">Card header</div>
24-
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
27+
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
28+
titles and footers for additional information or just for custom actions.</div>
2529
<div class="card-footer">Card Footer</div>
2630
</div>
2731
<div class="card">
28-
<div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
32+
<div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
33+
elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
2934
</div>
3035

3136
<div class="block-title">Outline Cards</div>
3237
<div class="card card-outline">
33-
<div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element.</div>
38+
<div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain
39+
their own header, footer, list view, image, or any other element.</div>
3440
</div>
3541
<div class="card card-outline">
3642
<div class="card-header">Card header</div>
37-
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
43+
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
44+
titles and footers for additional information or just for custom actions.</div>
3845
<div class="card-footer">Card Footer</div>
3946
</div>
4047
<div class="card card-outline">
41-
<div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
48+
<div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
49+
elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
50+
</div>
51+
52+
<div class="block-title">Outline With Dividers</div>
53+
<div class="card card-outline card-dividers">
54+
<div class="card-header">Card header</div>
55+
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
56+
titles and footers for additional information or just for custom actions.</div>
57+
<div class="card-footer">Card Footer</div>
58+
</div>
59+
60+
<div class="block-title">Raised Cards</div>
61+
<div class="card card-raised">
62+
<div class="card-content card-content-padding">This is a simple card with plain text, but cards can also contain
63+
their own header, footer, list view, image, or any other element.</div>
64+
</div>
65+
<div class="card card-raised">
66+
<div class="card-header">Card header</div>
67+
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card
68+
titles and footers for additional information or just for custom actions.</div>
69+
<div class="card-footer">Card Footer</div>
70+
</div>
71+
<div class="card card-raised">
72+
<div class="card-content card-content-padding">Another card. Lorem ipsum dolor sit amet, consectetur adipiscing
73+
elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. </div>
4274
</div>
4375

4476
<div class="block-title">Styled Cards</div>
45-
<div class="card demo-card-header-pic">
46-
<div style="background-image:url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)" valign="bottom" class="card-header">Journey To Mountains</div>
77+
<div class="card card-outline-md demo-card-header-pic">
78+
<div style="background-image:url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)" valign="bottom"
79+
class="card-header">Journey To Mountains</div>
4780
<div class="card-content card-content-padding">
4881
<p class="date">Posted on January 21, 2015</p>
49-
<p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
82+
<p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis
83+
nibh hendrerit...</p>
5084
</div>
5185
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
5286
</div>
5387
<div class="card demo-card-header-pic">
54-
<div style="background-image:url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)" valign="bottom" class="card-header">Lorem Ipsum</div>
88+
<div style="background-image:url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)" valign="bottom"
89+
class="card-header">Lorem Ipsum</div>
5590
<div class="card-content card-content-padding">
5691
<p class="date">Posted on January 21, 2015</p>
57-
<p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
92+
<p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis
93+
nibh hendrerit...</p>
5894
</div>
5995
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Read more</a></div>
6096
</div>
6197

62-
<div class="block-title">Facebook Cards</div>
63-
<div class="card demo-facebook-card">
64-
<div class="card-header">
65-
<div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
66-
<div class="demo-facebook-name">John Doe</div>
67-
<div class="demo-facebook-date">Monday at 3:47 PM</div>
68-
</div>
69-
<div class="card-content"> <img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/></div>
70-
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
71-
</div>
72-
<div class="card demo-facebook-card">
73-
<div class="card-header">
74-
<div class="demo-facebook-avatar"><img src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg" width="34" height="34"/></div>
75-
<div class="demo-facebook-name">John Doe</div>
76-
<div class="demo-facebook-date">Monday at 2:15 PM</div>
77-
</div>
78-
<div class="card-content card-content-padding">
79-
<p>What a nice photo i took yesterday!</p><img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%"/>
80-
<p class="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
81-
</div>
82-
<div class="card-footer"><a href="#" class="link">Like</a><a href="#" class="link">Comment</a><a href="#" class="link">Share</a></div>
83-
</div>
84-
8598
<div class="block-title">Cards With List View</div>
8699
<div class="card">
87100
<div class="card-content">
@@ -102,7 +115,8 @@
102115
<div class="list media-list no-safe-areas">
103116
<ul>
104117
<li class="item-content">
105-
<div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44"/></div>
118+
<div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
119+
</div>
106120
<div class="item-inner">
107121
<div class="item-title-row">
108122
<div class="item-title">Yellow Submarine</div>
@@ -111,7 +125,8 @@
111125
</div>
112126
</li>
113127
<li class="item-content">
114-
<div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44"/></div>
128+
<div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
129+
</div>
115130
<div class="item-inner">
116131
<div class="item-title-row">
117132
<div class="item-title">Don't Stop Me Now</div>
@@ -120,7 +135,8 @@
120135
</div>
121136
</li>
122137
<li class="item-content">
123-
<div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44"/></div>
138+
<div class="item-media"><img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
139+
</div>
124140
<div class="item-inner">
125141
<div class="item-title-row">
126142
<div class="item-title">Billie Jean</div>

‎kitchen-sink/react/src/css/app.css

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -212,45 +212,14 @@ div.demo-lazy {
212212
background-position: center;
213213
color: #fff;
214214
}
215-
.demo-card-header-pic .card-content-padding .date {
216-
color: #8e8e93;
217-
}
218-
.demo-facebook-card .card-header {
219-
display: block;
220-
padding: 10px;
221-
}
222-
.demo-facebook-card .demo-facebook-avatar {
223-
float: left;
224-
}
225-
.demo-facebook-card .demo-facebook-name {
226-
margin-left: 44px;
227-
font-size: 14px;
228-
font-weight: 500;
229-
}
230-
.demo-facebook-card .demo-facebook-date {
231-
margin-left: 44px;
232-
font-size: 13px;
233-
color: #8e8e93;
215+
.md .demo-card-header-pic .card-header {
216+
margin: 16px 16px 0;
217+
border-radius: 16px;
234218
}
235-
.demo-facebook-card .card-footer {
236-
background: #fafafa;
237-
}
238-
.dark .demo-facebook-card .card-footer {
239-
background-color: transparent;
240-
}
241-
.demo-facebook-card .card-footer a {
242-
color: #81848b;
243-
font-weight: 500;
244-
}
245-
.demo-facebook-card .card-content img {
246-
display: block;
247-
}
248-
.demo-facebook-card .card-content-padding {
249-
padding: 15px 10px;
250-
}
251-
.demo-facebook-card .card-content-padding .likes {
219+
.demo-card-header-pic .card-content-padding .date {
252220
color: #8e8e93;
253221
}
222+
254223
/* Panels Demo */
255224
.panel {
256225
min-width: 150px;

‎kitchen-sink/react/src/pages/cards.jsx

Lines changed: 27 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,34 @@ export default () => (
5050
content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
5151
/>
5252

53+
<BlockTitle>Outline With Dividers</BlockTitle>
54+
<Card
55+
outline
56+
headerDivider
57+
footerDivider
58+
title="Card header"
59+
content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
60+
footer="Card footer"
61+
/>
62+
63+
<BlockTitle>Raised Cards</BlockTitle>
64+
<Card
65+
raised
66+
content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."
67+
/>
68+
<Card
69+
raised
70+
title="Card header"
71+
content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions."
72+
footer="Card footer"
73+
/>
74+
<Card
75+
raised
76+
content="Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet. Mauris aliquet magna justo. "
77+
/>
78+
5379
<BlockTitle>Styled Cards</BlockTitle>
54-
<Card className="demo-card-header-pic">
80+
<Card outlineMd className="demo-card-header-pic">
5581
<CardHeader
5682
className="no-border"
5783
valign="bottom"
@@ -96,52 +122,6 @@ export default () => (
96122
</CardFooter>
97123
</Card>
98124

99-
<BlockTitle>Facebook Cards</BlockTitle>
100-
<Card className="demo-facebook-card">
101-
<CardHeader className="no-border">
102-
<div className="demo-facebook-avatar">
103-
<img
104-
src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg"
105-
width="34"
106-
height="34"
107-
/>
108-
</div>
109-
<div className="demo-facebook-name">John Doe</div>
110-
<div className="demo-facebook-date">Monday at 3:47 PM</div>
111-
</CardHeader>
112-
<CardContent padding={false}>
113-
<img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%" />
114-
</CardContent>
115-
<CardFooter className="no-border">
116-
<Link>Like</Link>
117-
<Link>Comment</Link>
118-
<Link>Share</Link>
119-
</CardFooter>
120-
</Card>
121-
<Card className="demo-facebook-card">
122-
<CardHeader className="no-border">
123-
<div className="demo-facebook-avatar">
124-
<img
125-
src="https://cdn.framework7.io/placeholder/people-68x68-1.jpg"
126-
width="34"
127-
height="34"
128-
/>
129-
</div>
130-
<div className="demo-facebook-name">John Doe</div>
131-
<div className="demo-facebook-date">Monday at 2:15 PM</div>
132-
</CardHeader>
133-
<CardContent>
134-
<p>What a nice photo i took yesterday!</p>
135-
<img src="https://cdn.framework7.io/placeholder/nature-1000x700-8.jpg" width="100%" />
136-
<p className="likes">Likes: 112 &nbsp;&nbsp; Comments: 43</p>
137-
</CardContent>
138-
<CardFooter className="no-border">
139-
<Link>Like</Link>
140-
<Link>Comment</Link>
141-
<Link>Share</Link>
142-
</CardFooter>
143-
</Card>
144-
145125
<BlockTitle>Cards With List View</BlockTitle>
146126
<Card>
147127
<CardContent padding={false}>

‎kitchen-sink/svelte/src/css/app.css

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -212,45 +212,14 @@ div.demo-lazy {
212212
background-position: center;
213213
color: #fff;
214214
}
215-
.demo-card-header-pic .card-content-padding .date {
216-
color: #8e8e93;
217-
}
218-
.demo-facebook-card .card-header {
219-
display: block;
220-
padding: 10px;
221-
}
222-
.demo-facebook-card .demo-facebook-avatar {
223-
float: left;
224-
}
225-
.demo-facebook-card .demo-facebook-name {
226-
margin-left: 44px;
227-
font-size: 14px;
228-
font-weight: 500;
229-
}
230-
.demo-facebook-card .demo-facebook-date {
231-
margin-left: 44px;
232-
font-size: 13px;
233-
color: #8e8e93;
215+
.md .demo-card-header-pic .card-header {
216+
margin: 16px 16px 0;
217+
border-radius: 16px;
234218
}
235-
.demo-facebook-card .card-footer {
236-
background: #fafafa;
237-
}
238-
.dark .demo-facebook-card .card-footer {
239-
background-color: transparent;
240-
}
241-
.demo-facebook-card .card-footer a {
242-
color: #81848b;
243-
font-weight: 500;
244-
}
245-
.demo-facebook-card .card-content img {
246-
display: block;
247-
}
248-
.demo-facebook-card .card-content-padding {
249-
padding: 15px 10px;
250-
}
251-
.demo-facebook-card .card-content-padding .likes {
219+
.demo-card-header-pic .card-content-padding .date {
252220
color: #8e8e93;
253221
}
222+
254223
/* Panels Demo */
255224
.panel {
256225
min-width: 150px;

0 commit comments

Comments
 (0)