mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
md list margins
This commit is contained in:
@ -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;
|
||||
}
|
||||
|
@ -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>
|
Reference in New Issue
Block a user