md list margins

This commit is contained in:
Adam Bradley
2015-08-19 16:40:41 -05:00
parent 339d6bbc70
commit 14c6aedb19
4 changed files with 59 additions and 1 deletions

View File

@ -2,13 +2,19 @@
// Material Design List
// --------------------------------------------------
$list-md-header-padding: 16px $item-md-padding-right 16px $item-md-padding-left !default;
$list-md-margin-top: 16px !default;
$list-md-margin-right: 0 !default;
$list-md-margin-bottom: 16px !default;
$list-md-margin-left: 0 !default;
$list-md-header-padding: 0 $item-md-padding-right 16px $item-md-padding-left !default;
$list-md-header-font-size: 1.4rem !default;
$list-md-header-color: #858585 !default;
.list[mode=md] {
margin: $list-md-margin-top $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
ion-header {
padding: $list-md-header-padding;
font-size: $list-md-header-font-size;
@ -16,3 +22,7 @@ $list-md-header-color: #858585 !default;
}
}
.list[mode=md] + .list ion-header {
margin-top: -$list-md-margin-top;
}

View File

@ -26,6 +26,16 @@
</div>
</div>
<div class="item">
<icon name="ion-home"></icon>
<div class="item-content">
Home
</div>
<div class="item-note">
Where the heart is
</div>
</div>
</ion-list>
<ion-list>
@ -44,6 +54,16 @@
</div>
</div>
<div class="item">
<icon name="ion-star"></icon>
<div class="item-content">
Star status
</div>
<div class="item-note">
Super
</div>
</div>
</ion-list>
<ion-list>
@ -72,4 +92,32 @@
</div>
</div>
<div class="item">
<icon name="ion-wineglass"></icon>
<div class="item-content">
Wine
</div>
<div class="item-note">
All the time
</div>
</div>
</ion-list>
<ion-list>
<div class="item">
<icon name="ion-chatbox"></icon>
<div class="item-content">
New List, no header, Item 1
</div>
</div>
<div class="item">
<icon name="ion-chatbox"></icon>
<div class="item-content">
New List, no header, Item 2
</div>
</div>
</ion-list>