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

Merge pull request #260 from google/issue-230 

Love-giving for cards
master
Addy Osmani 2015-04-29 15:22:48 +01:00
parent c1fdf5a588 1b91d7d419
commit a870666f17
4 changed files with 91 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_variables.scss
View File

@ -220,11 +220,11 @@ $input-text-error-color: unquote("rgb(#{$palette-red-600})") !default;
/* ========== Card ========== */
$card-background-color: unquote("rgb(#{$color-white})") !default;
$heading-color: unquote("rgb(#{$color-white})") !default;
$heading-back-color: unquote("rgb(#{$color-white})") !default;
$heading-color: unquote("rgb(#{$color-primary-contrast})") !default;
$heading-back-color: unquote("rgb(#{$color-primary-contrast})") !default;
$heading-back-bgcolor: unquote("rgb(#{$color-primary-dark})") !default;
$action-link-color: unquote("rgb(#{$color-primary-dark})") !default;
$caption-color: unquote("rgb(#{$color-white})") !default;
$caption-color: unquote("rgb(#{$color-primary-contrast})") !default;
$caption-bgcolor: unquote("rgb(#{$color-primary-dark})") !default;
$image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
$lower-text-color: unquote("rgb(#{$color-primary})") !default;

49
src/card/README.md
View File

@ -5,7 +5,7 @@ The Material Design Lite (MDL) **card** component is a user interface element re
Cards are a convenient means of coherently displaying related content that is composed of different types of objects. They are also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length. Cards have a constant width and a variable height, depending on their content.
Cards are a fairly new feature in user interfaces, and allow users an access point to more complex and detailed information. Their design and use is an important factor in the overall user experience. See the card component's [Material Design specifications page](http://www.google.com/design/spec/components/cards.html) for details.
Cards are a fairly new feature in user interfaces, and allow users an access point to more complex and detailed information. Their design and use is an important factor in the overall user experience. See the card component's [Material Design specifications page](http://www.google.com/design/spec/components/cards.html) for details.
##Basic use
To use any MDL component, you must include the minified CSS and JavaScript files using standard relative-path references in the `<head>` section of the page, as described in the MDL Introduction.
@ -37,16 +37,16 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;3. Add one or more MDL classes, separated by spaces, to the "outer" div and the "inner" divs (depending on their intended use) using the `class` attribute.
```html
<div class="mdl-card">
<div class="mdl-card--heading">
<div class="mdl-card__heading">
...
</div>
<div class="mdl-card--img-container">
<div class="mdl-card__img-container">
...
</div>
<div class="mdl-card--lower">
<div class="mdl-card__lower">
...
</div>
<div class="mdl-card--bottom">
<div class="mdl-card__bottom">
...
</div>
</div>
@ -54,16 +54,16 @@ To use any MDL component, you must include the minified CSS and JavaScript files
&nbsp;4. Add content to each "inner" div, again depending on its intended use, using standard HTML elements and, optionally, additional MDL classes.
```html
<div class="mdl-card">
<div class="mdl-card--heading">
<h2 class="mdl-card--heading-text">Heading Text Goes Here</h2>
<div class="mdl-card__heading">
<h2 class="mdl-card__heading-text">Heading Text Goes Here</h2>
</div>
<div class="mdl-card--img-container">
<div class="mdl-card__img-container">
<img src="photo.jpg" width="220" height="140" border="0" alt="" style="padding:20px;">
</div>
<div class="mdl-card--lower">
<div class="mdl-card__lower">
This text might describe the photo and provide further information, such as where and when it was taken.
</div>
<div class="mdl-card--bottom">
<div class="mdl-card__bottom">
<a href="(URL or function)">Related Action</a>
</div>
</div>
@ -77,15 +77,15 @@ A card (no shadow) with a heading, image, text, and action.
```html
<div class="mdl-card">
<div class="mdl-card--heading">
<h2 class="mdl-card--heading-text">Auckland Sky Tower<br/>Auckland, New Zealand</h2>
<div class="mdl-card__heading">
<h2 class="mdl-card__heading-text">Auckland Sky Tower<br/>Auckland, New Zealand</h2>
</div>
<div class="mdl-card--img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
<div class="mdl-card__img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card--lower">
<div class="mdl-card__lower">
The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.
</div>
<div class="mdl-card--bottom">
<div class="mdl-card__bottom">
<a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29">Wikipedia entry</a>
</div>
</div>
@ -95,12 +95,12 @@ Card (level-3 shadow) with an image, caption, and text:
```html
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card--img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
<div class="mdl-card__img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card--caption">
<div class="mdl-card__caption">
Auckland Sky Tower, taken March 24th, 2014
</div>
<div class="mdl-card--lower">
<div class="mdl-card__lower">
The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.
</div>
</div>
@ -113,12 +113,12 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements
|-----------|--------|---------|
| `mdl-card` | Defines div element as an MDL card container | Required on "outer" div |
| `mdl-shadow--2dp through mdl-shadow--8dp` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present |
| `mdl-card--heading` | Defines div as a card heading container(1) | Required on "inner" heading div |
| `mdl-card--heading-text` | Assigns appropriate text characteristics to card heading | Required on head tag (H1 - H6) inside heading div |
| `mdl-card--img-container` | Defines div as a card image container | Required on "inner" image div |
| `mdl-card--lower` | Defines div as a card body text container(1) and assigns appropriate text characteristics to body text | Required on "inner" body text div; text goes directly inside the div with no intervening containers |
| `mdl-card--caption` | Defines div as a card caption container and assigns appropriate text characteristics to caption text | Required on "inner" caption div; text goes directly inside the div with no intervening containers |
| `mdl-card--bottom` | Defines div as a card bottom text container(1) (typically an action bar) and assigns appropriate text characteristics to bottom text | Required on "inner" bottom div; content goes directly inside the div with no intervening containers |
| `mdl-card__heading` | Defines div as a card heading container(1) | Required on "inner" heading div |
| `mdl-card__heading-text` | Assigns appropriate text characteristics to card heading | Required on head tag (H1 - H6) inside heading div |
| `mdl-card__img-container` | Defines div as a card image container | Required on "inner" image div |
| `mdl-card__lower` | Defines div as a card body text container(1) and assigns appropriate text characteristics to body text | Required on "inner" body text div; text goes directly inside the div with no intervening containers |
| `mdl-card__caption` | Defines div as a card caption container and assigns appropriate text characteristics to caption text | Required on "inner" caption div; text goes directly inside the div with no intervening containers |
| `mdl-card__bottom` | Defines div as a card bottom text container(1) (typically an action bar) and assigns appropriate text characteristics to bottom text | Required on "inner" bottom div; content goes directly inside the div with no intervening containers |
(1) Although some class names imply positioning, they really just semantically define the styling of the content. The actual positions of the "inner" divs within the card are determined by order of appearance (i.e., top-down). You may use them in any order, so long as they maintain their relationships as siblings and as direct children of the "outer" container div.
@ -128,4 +128,3 @@ For working examples of the **card** component, see the MDL [card demo page](www
## License
Copyright Google, 2015. Licensed under an Apache-2 license.

56
src/card/_card.scss
View File

@ -18,7 +18,7 @@
.mdl-card {
font-size : $card-font-size;
height : $card-height;
min-height : $card-height;
overflow : hidden;
width : $card-width;
z-index : $card-z-index;
@ -27,7 +27,7 @@
border-radius: 2px;
}
.mdl-card--img-container {
.mdl-card__img-container {
background-color : $image-placeholder-color;
@if str_length($background-image-url) > 0 {
background-image : url($background-image-url);
@ -40,7 +40,7 @@
height : $cover-image-height;
}
.mdl-card--heading {
.mdl-card__heading {
align-items : center;
background : $heading-back-bgcolor none repeat scroll 0 0 / auto padding-box border-box;
border : $heading-back-border;
@ -50,19 +50,14 @@
height : $card-heading-height;
justify-items : stretch;
line-height : normal;
// TODO: Does this need to be anything other than none?
outline : rgb(255, 255, 255) none 0;
padding : $card-vertical-padding $card-horizontal-padding;
perspective-origin: $card-heading-perspective-origin-x $card-heading-perspective-origin-y;
text-decoration : none solid rgb(255, 255, 255);
transform-origin : $card-heading-transform-origin-x $card-heading-transform-origin-y;
width : 100%;
}
.mdl-card--heading-text {
.mdl-card__heading-text {
align-self : center;
// TODO: Does this need to be anything other than none?
border : 0 none rgb(255, 255, 255);
color : $heading-color;
display : flex;
font-size : inherit;
@ -70,64 +65,42 @@
height : $card-heading-height;
justify-self : stretch;
line-height : normal;
// TODO: Does this need to be anything other than none?
outline : rgb(255, 255, 255) none 0;
overflow : hidden;
// TODO: Does this need to be anything other than none?
text-decoration : none solid rgb(255, 255, 255);
transform-origin: $card-heading-text-transform-origin-x $card-heading-text-transform-origin-y;
width : 90%;
}
.mdl-card--caption {
.mdl-card__caption {
background : $caption-bgcolor none repeat scroll 0 0 / auto padding-box border-box;
// TODO: Does this need to be anything other than none?
border : 0 none rgb(255, 255, 255);
color : $caption-color;
font-size : $card-caption-font-size;
height : $card-caption-height;
line-height : normal;
// TODO: Does this need to be anything other than none?
outline : rgb(255, 255, 255) none 0;
padding : $card-vertical-padding $card-horizontal-padding;
perspective-origin: $card-caption-perspective-origin-x $card-caption-perspective-origin-y;
// TODO: Does this need to be anything other than none?
text-decoration : none solid rgb(255, 255, 255);
width : 100%;
}
.mdl-card--lower {
// TODO: Does this need to be anything other than none?
border : 0 none rgb(68, 68, 68);
.mdl-card__lower {
color : $lower-text-color;
font-size : $card-lower-font-size;
height : $card-lower-height;
line-height : $card-lower-line-height;
margin : $card-lower-vertical-margin 0;
// TODO: Does this need to be anything other than none?
outline : rgb(68, 68, 68) none 0;
overflow : hidden;
padding : 0 $card-horizontal-padding;
// TODO: Does this need to be anything other than none?
text-decoration: none solid rgb(68, 68, 68);
width : 90%;
}
.mdl-card--bottom {
.mdl-card__bottom {
font-size : $card-bottom-font-size;
height : $card-bottom-height;
line-height: normal;
width : 100%;
border-top : 1px solid rgba(0,0,0,.16);
}
.mdl-card--bottom a {
// TODO: Does this need to be anything other than none?
border-bottom : 0 none rgb(48, 63, 159);
// TODO: Does this need to be anything other than none?
border-left : 0 none rgb(48, 63, 159);
// TODO: Does this need to be anything other than none?
border-right : 0 none rgb(48, 63, 159);
border-top : 1px solid rgb(235, 235, 235);
.mdl-card__bottom a {
box-sizing : border-box;
color : $action-link-color;
cursor : pointer;
@ -136,12 +109,17 @@
font-weight : normal;
height : $card-bottom-anchor-height;
line-height : $card-bottom-anchor-line-height;
// TODO: Does this need to be anything other than none?
outline : rgb(48, 63, 159) none 0;
padding : 0 $card-horizontal-padding;
perspective-origin: $card-bottom-anchor-perspective-origin-x $card-bottom-anchor-perspective-origin-y;
text-decoration : none solid rgb(48, 63, 159);
text-transform : uppercase;
transform-origin : $card-bottom-anchor-transform-origin-x $card-bottom-anchor-transform-origin-y;
width : 100%;
text-decoration : none;
}
.mdl-card__menu {
position: absolute;
right: 0;
top: 0;
color: $heading-color;
}

65
src/card/demo.html
View File

@ -12,53 +12,82 @@
<body class="demo-page demo-page--card">
<div class="demo-preview-block">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card--img-container">
<div class="mdl-card__img-container">
</div>
<div class="mdl-card--heading">
<h2 class="mdl-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
<div class="mdl-card__heading">
<h2 class="mdl-card__heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
</div>
<div class="mdl-card--caption">
<div class="mdl-card__caption">
March 24th, 2014
</div>
<div class="mdl-card--lower">
<div class="mdl-card__lower">
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--bottom">
<div class="mdl-card__bottom">
<a href="#">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--3dp demo-card--wide">
<div class="mdl-card--img-container">
<div class="mdl-card__img-container">
</div>
<div class="mdl-card--heading">
<h2 class="mdl-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
<div class="mdl-card__heading">
<h2 class="mdl-card__heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
</div>
<div class="mdl-card--caption">
<div class="mdl-card__caption">
March 24th, 2014
</div>
<div class="mdl-card--lower">
<div class="mdl-card__lower">
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--bottom">
<div class="mdl-card__bottom">
<a href="#">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card--img-container">
<div class="mdl-card__img-container">
</div>
<div class="mdl-card--heading">
<h2 class="mdl-card--heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
<div class="mdl-card__heading">
<h2 class="mdl-card__heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
</div>
<div class="mdl-card--caption">
<div class="mdl-card__caption">
March 24th, 2014
</div>
<div class="mdl-card--lower">
<div class="mdl-card__lower">
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--bottom">
<div class="mdl-card__bottom">
<a href="#">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card__heading">
<h2 class="mdl-card__heading-text">Integer lectus lacus, condimentum vitae lectus vitae</h2>
</div>
<div class="mdl-card__caption">
March 24th, 2014
</div>
<div class="mdl-card__lower">
Lorem ipsum dolor sit amet.
</div>
<div class="mdl-card__bottom">
<a href="#">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"><span class="mdl-icon mdl-icon--more-vert"></span></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>
<!-- build:js(app/styleguide/cards/) ../../scripts/main.min.js -->
<script src="../mdlComponentHandler.js"></script>
<script src="../menu/menu.js"></script>
<script src="../button/button.js"></script>
<script src="../ripple/ripple.js"></script>
<script src="../third_party/rAF.js"></script>
<!-- endbuild -->
</body>
</html>