mirror of
https://github.com/google/material-design-lite.git
synced 2024-09-11 12:25:38 +03:00
Merge pull request #4069 from google/fix-list
Improves the list to bring it closer to spec. Fixes #4056.
This commit is contained in:
commit
2f58068dd1
@ -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
|
||||
|
@ -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 */
|
||||
|
||||
|
@ -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` |
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -1,4 +1,4 @@
|
||||
<!-- List with action -->
|
||||
<!-- List with avatar and controls -->
|
||||
<style>
|
||||
.demo-list-control {
|
||||
width: 300px;
|
||||
|
@ -1,4 +1,4 @@
|
||||
<!-- List with action -->
|
||||
<!-- Simple list -->
|
||||
<style>
|
||||
.demo-list-item {
|
||||
width: 300px;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user