javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

md list margins

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
ionic/components/list/modes/material.scss
View File

@ -2,13 +2,19 @@
// Material Design List // 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-font-size: 1.4rem !default;
$list-md-header-color: #858585 !default; $list-md-header-color: #858585 !default;
.list[mode=md] { .list[mode=md] {
margin: $list-md-margin-top $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;
ion-header { ion-header {
padding: $list-md-header-padding; padding: $list-md-header-padding;
font-size: $list-md-header-font-size; 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;
}

0
ionic/components/list/test/headers-footers/e2e.ts → ionic/components/list/test/headers/e2e.ts
View File

0
ionic/components/list/test/headers-footers/index.ts → ionic/components/list/test/headers/index.ts
View File

48
ionic/components/list/test/headers-footers/main.html → ionic/components/list/test/headers/main.html
View File

@ -26,6 +26,16 @@
</div> </div>
</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>
<ion-list> <ion-list>
@ -44,6 +54,16 @@
</div> </div>
</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>
<ion-list> <ion-list>
@ -72,4 +92,32 @@
</div> </div>
</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> </ion-list>