google/material-design-lite
1
1
Fork 0
mirror of https://github.com/google/material-design-lite.git synced 2024-09-11 12:25:38 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #4069 from google/fix-list

Browse Source 
Improves the list to bring it closer to spec. Fixes #4056.
This commit is contained in:
Jonathan Garbee 2016-02-03 07:04:04 -05:00
commit 2f58068dd1
10 changed files with 133 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/_pages/components.md
View File

@ -193,17 +193,17 @@ categories:
class: mdl-list
snippets:
- snippet_group:
- caption: Action
file: action.html
- caption: Simple list
file: list-item.html
- snippet_group:
- caption: Icon
- caption: Icons
file: icon.html
- snippet_group:
- caption: List control
file: list-control.html
- caption: Avatars and actions
file: action.html
- snippet_group:
- caption: List item
file: list-item.html
- caption: Avatars and controls
file: list-control.html
- snippet_group:
- caption: Two line
file: two-line.html

21
src/_variables.scss
View File

@ -271,9 +271,10 @@ $progress-image-path: $image_path;
/* ========== List ========== */
$list-container-item-border-color: unquote("rgb(#{$palette-grey-300})") !default;
$list-container-view-background: unquote("rgb(#{$color-white})") !default;
$list-main-text-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
$list-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
$list-icon-color: unquote("rgb(#{$palette-grey-600})") !default;
$list-avatar-color: white !default;
/* ========== Item ========== */
@ -364,10 +365,18 @@ $menu-fade-duration: 0.2s !default;
/* LIST */
$list-container-height: 500px !default;
$list-container-width: 400px !default;
$list-container-item-height: 70px !default;
// $list__item-hover-color: unquote("rgb(#{$palette-grey-300})") !default;
$list-border: 8px !default;
$list-min-height: 48px !default;
$list-min-padding: 16px !default;
$list-bottom-padding: 20px !default;
$list-avatar-text-left-distance: 72px !default;
$list-icon-text-left-distance: 72px !default;
$list-avatar-size: 40px !default;
$list-icon-size: 24px !default;
$list-two-line-height: 72px !default;
$list-three-line-height: 88px !default;
/* LAYOUT */

1
src/list/README.md
View File

@ -47,6 +47,7 @@ The MDL CSS classes apply various predefined visual enhancements to the list. Th
| .mdl-list__item-three-line | Defines the List's Items as a Three Line | Optional Three Line List Variant |
| .mdl-list__item-primary-content | Defines the primary content sub-division |-|
| .mdl-list__item-avatar | Defines the avatar sub-division |-|
| .mdl-list__item-icon | Defines the icon sub-division |-|
| .mdl-list__item-secondary-content | Defines the secondary content sub-division | requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` |
| .mdl-list__item-secondary-info | Defines the information sub-division |requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` |
| .mdl-list__item-secondary-action | Defines the Action sub-division | requires `.mdl-list__item-two-line` or `.mdl-list__item-three-line` |

107
src/list/_list.scss
View File

@ -20,31 +20,38 @@
.mdl-list {
display: block;
padding: 8px 0 ;
padding: $list-border 0;
list-style: none;
}
.mdl-list__item {
@include typo-body-1();
@include typo-subhead();
line-height: 1;
display: flex;
min-height: $list-min-height;
box-sizing: border-box;
height: 48px;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding : 16px 16px 20px 16px;
padding: $list-min-padding;
cursor: default;
color: $list-main-text-text-color;
overflow: hidden;
& .mdl-list__item-primary-content {
order:0;
order: 0;
flex-grow: 2;
text-decoration: none;
box-sizing: border-box;
display: flex;
align-items: center;
& .material-icons {
font-size: 40px;
line-height: 0;
vertical-align: middle;
padding: 0 12px 0 0;
display: inline;
& .mdl-list__item-icon {
margin-right: $list-icon-text-left-distance - $list-icon-size - $list-min-padding;
}
& .mdl-list__item-avatar {
margin-right: $list-avatar-text-left-distance - $list-avatar-size - $list-min-padding;
}
}
@ -52,53 +59,99 @@
display: flex;
flex-flow: column;
align-items: flex-end;
margin-left: $list-min-padding;
& .mdl-list__item-secondary-action label { display: inline; }
& .mdl-list__item-secondary-info {
@include typo-caption();
margin-bottom: 10px;
color: $list-supporting-text-text-color;
}
& .mdl-list__item-sub-header {
padding: 0 0 0 16px;
padding: 0 0 0 $list-min-padding;
}
}
}
.mdl-list__item-avatar {
height: 56px;
.mdl-list__item-icon,
.mdl-list__item-icon.material-icons {
height: $list-icon-size;
width: $list-icon-size;
font-size: $list-icon-size;
box-sizing: border-box;
color: $list-icon-color;
}
.mdl-list__item-avatar,
.mdl-list__item-avatar.material-icons {
height: $list-avatar-size;
width: $list-avatar-size;
box-sizing: border-box;
border-radius: 50%;
// Set a background colour in case the user doesn't provide an image.
background-color: $list-icon-color;
// Set a font size and color in case the user provides a Material Icon.
font-size: $list-avatar-size;
color: $list-avatar-color;
}
.mdl-list__item--two-line {
height: 72px;
height: $list-two-line-height;
& .mdl-list__item-primary-content {
& .material-icons {
vertical-align: text-bottom;
height: $list-two-line-height - $list-min-padding - $list-bottom-padding;
line-height: 20px;
display: block;
& .mdl-list__item-avatar{
float: left;
}
& .mdl-list__item-icon {
float: left;
// Icons are aligned to center of text in a two line list.
margin-top:
($list-two-line-height - $list-min-padding - $list-bottom-padding -
$list-icon-size) / 2;
}
& .mdl-list__item-secondary-content {
height: $list-two-line-height - $list-min-padding - $list-bottom-padding;
}
& .mdl-list__item-sub-title {
@include typo-caption();
@include typo-body-1();
line-height: 18px;
color: $list-supporting-text-text-color;
display: block;
padding : 0 0 0 56px;
padding: 0;
}
}
}
.mdl-list__item--three-line {
height: 88px;
height: $list-three-line-height;
& .mdl-list__item-primary-content {
& .material-icons {
vertical-align: text-bottom;
height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
line-height: 20px;
display: block;
& .mdl-list__item-avatar,
& .mdl-list__item-icon {
float: left;
}
}
& .mdl-list__item-secondary-content {
height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
}
& .mdl-list__item-text-body {
@include typo-caption();
@include typo-body-1();
line-height: 18px;
height: $list-three-line-height - $list-min-padding - $list-bottom-padding;
color: $list-supporting-text-text-color;
display: block;
height: 24px;
padding: 0 0 0 56px;
overflow: hidden;
padding: 0;
}
}

23
src/list/snippets/action.html
View File

@ -1,4 +1,4 @@
<!-- List Items with action -->
<!-- List items with avatar and action -->
<style>
.demo-list-action {
width: 300px;
@ -6,30 +6,27 @@
</style>
<div class="demo-list-action mdl-list">
<div class="mdl-list__item mdl-list__item-two-line ">
<div class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons ">person</i>
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bryan Cranston</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</div>
<div class="mdl-list__item mdl-list__item-two-line ">
<div class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Aaron Paul</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</div>
<div class="mdl-list__item mdl-list__item-two-line ">
<div class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bob Odenkirk</span>
<span class="mdl-list__item-sub-title">43 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</div>
</div>

6
src/list/snippets/icon.html
View File

@ -8,19 +8,19 @@
<ul class="demo-list-icon mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
<i class="material-icons mdl-list__item-icon">person</i>
Bryan Cranston
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
<i class="material-icons mdl-list__item-icon">person</i>
Aaron Paul
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
<i class="material-icons mdl-list__item-icon">person</i>
Bob Odenkirk
</span>
</li>

2
src/list/snippets/list-control.html
View File

@ -1,4 +1,4 @@
<!-- List with action -->
<!-- List with avatar and controls -->
<style>
.demo-list-control {
width: 300px;

2
src/list/snippets/list-item.html
View File

@ -1,4 +1,4 @@
<!-- List with action -->
<!-- Simple list -->
<style>
.demo-list-item {
width: 300px;

17
src/list/snippets/three-line.html
View File

@ -1,7 +1,7 @@
<!-- Three Line List with secondary info and action -->
<style>
.demo-list-three {
width: 600px;
width: 650px;
}
</style>
@ -11,13 +11,12 @@
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bryan Cranston</span>
<span class="mdl-list__item-text-body">
Bryan Cranston played the role of Bryan Cranston in Breaking Bad, he is also know
Bryan Cranston played the role of Walter in Breaking Bad. He is also known
for playing Hal in Malcom in the Middle.
</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--three-line">
@ -25,13 +24,12 @@
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Aaron Paul</span>
<span class="mdl-list__item-text-body">
Aaron Paul played the role of Aaron Paul in Breaking Bad. He also featured in
Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
the "Need For Speed" Movie.
</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--three-line">
@ -39,13 +37,12 @@
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bob Odenkirk</span>
<span class="mdl-list__item-text-body">
Bob Odinkrik played the role of Bob Odenkirk in Breaking Bad. Due to public fondness for the
Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
character, Bob stars in his own show now, called "Better Call Saul".
</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
</ul>

18
src/list/snippets/two-line.html
View File

@ -9,34 +9,32 @@
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span class=mdl-list__item-text>Bryan Cranston</span>
<span>Bryan Cranston</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span class=mdl-list__item-text>Aaron Paul</span>
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Aaron Paul</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item--two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
<span class=mdl-list__item-text>Bob Odenkirk</span>
<i class="material-icons mdl-list__item-avatar">person</i>
<span>Bob Odenkirk</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
</span>
</li>
</ul>