google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #471 from google/card_demos 

Revamping card demos based on new mocks.
master
Sérgio Gomes 2015-06-25 15:29:19 +01:00
parent e7018fa803 533a37b33c
commit 674c3add44
10 changed files with 122 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/_assets/demos/dog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/_assets/demos/image_card.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 KiB

BIN
docs/_assets/demos/welcome_card.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

12
docs/_pages/components.md
View File

@ -61,6 +61,18 @@ categories:
components:
- name: card
class: mdl-card
snippets:
- snippet_group:
- caption: Wide
file: wide.html
- snippet_group:
- caption: Square
file: square.html
- snippet_group:
- caption: Image
file: image.html
- caption: Event
file: event.html
- name: layout
title: Layout
description: Building blocks for constructing a page layout.

23
src/card/demo.css
View File

@ -1,23 +0,0 @@
/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.demo-page--card .mdl-card {
margin: 20px;
}
.demo-card--wide {
width: 600px;
}

68
src/card/demo.html
View File

@ -1,68 +0,0 @@
<div class="demo-preview-block demo-page--card">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
</div>
<div class="mdl-card__supporting-text">
March 24th, 2014
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--3dp demo-card--wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
</div>
<div class="mdl-card__supporting-text">
March 24th, 2014
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
</div>
<div class="mdl-card__supporting-text">
March 24th, 2014
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id scelerisque.
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
</div>
<div class="mdl-card__supporting-text">
March 24th, 2014
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet.
</div>
<div class="mdl-card__actions">
<a href="#" class="mdl-button">Some Action</a>
</div>
<div class="mdl-card__menu">
<button id="btn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="btn">
<button class="mdl-menu__item">Item 1</button>
<button class="mdl-menu__item">Item 2</button>
<button class="mdl-menu__item" disabled>Item 3</button>
</ul>
</div>
</div>
</div>

29
src/card/snippets/event.html Normal file
View File

@ -0,0 +1,29 @@
<style>
.demo-card-event {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.demo-card-event > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
}
.demo-card-event > .mdl-card__title,
.demo-card-event > .mdl-card__actions > .mdl-button {
color: #fff;
}
</style>
<div class="mdl-card mdl-shadow--2dp demo-card-event">
<div class="mdl-card__title mdl-card--expand">
<h4>
Featured event:<br>
May 24, 2016<br>
7-11pm
</h4>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar
</a>
</div>
</div>

22
src/card/snippets/image.html Normal file
View File

@ -0,0 +1,22 @@
<style>
.demo-card-image {
width: 256px;
height: 256px;
background: url('../assets/demos/image_card.jpg') center / cover;
}
.demo-card-image > .mdl-card__actions {
height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
}
.demo-card-image__filename {
color: #fff;
}
</style>
<div class="mdl-card mdl-shadow--2dp demo-card-image">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Image.jpg</span>
</div>
</div>

26
src/card/snippets/square.html Normal file
View File

@ -0,0 +1,26 @@
<style>
.demo-card-square {
width: 320px;
height: 320px;
}
.demo-card-square > .mdl-card__title {
color: #fff;
background:
url('../assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
}
</style>
<div class="mdl-card mdl-shadow--2dp demo-card-square">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">Update</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenan convallis.
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
View Updates
</a>
</div>
</div>

33
src/card/snippets/wide.html Normal file
View File

@ -0,0 +1,33 @@
<style>
.demo-card-wide {
width: 512px;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
</style>
<div class="mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>