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

item activated colors

Browse Source
This commit is contained in:
Adam Bradley
2015-08-31 16:05:49 -05:00
parent b2cc8e7a19
commit dbd3cadc26
4 changed files with 77 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ionic/components/item/modes/ios.scss
View File

@ -3,6 +3,7 @@
// --------------------------------------------------
$item-ios-border-color: $list-border-color !default;
$item-ios-activated-bg-color: #d9d9d9 !default;
$item-ios-font-size: 1.6rem !default;
$item-ios-padding-top: 13px !default;
@ -37,6 +38,7 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
left: $item-ios-padding-left;
border-top: 1px solid $item-ios-border-color;
content: '';
pointer-events: none;
}
&:after {
@ -46,12 +48,17 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
left: $item-ios-padding-left;
border-top: 1px solid $item-ios-border-color;
content: '';
pointer-events: none;
}
&:first-child:before,
&:last-child:after {
left: 0;
}
&.activated {
background-color: $item-ios-activated-bg-color;
}
}
ion-header + .item:before {

7
ionic/components/item/modes/material.scss
View File

@ -3,6 +3,7 @@
// --------------------------------------------------
$item-md-border-color: grayscale(lighten($list-border-color, 8%)) !default;
$item-md-activated-bg-color: #f1f1f1 !default;
$item-md-font-size: 1.6rem !default;
$item-md-padding-top: 13px !default;
@ -38,6 +39,7 @@ $item-md-forward-icon-color: $item-md-border-color !default;
left: $item-md-padding-left;
border-top: 1px solid $item-md-border-color;
content: '';
pointer-events: none;
}
&:after {
@ -47,12 +49,17 @@ $item-md-forward-icon-color: $item-md-border-color !default;
left: $item-md-padding-left;
border-top: 1px solid $item-md-border-color;
content: '';
pointer-events: none;
}
&:first-child:before,
&:last-child:after {
left: 0;
}
&.activated {
background-color: $item-md-activated-bg-color;
}
}
ion-header + .item:before {

9
ionic/components/list/list.scss
View File

@ -18,9 +18,10 @@
}
.list[inset] {
border: 1px solid $list-border-color;
}
border-radius: 2px;
overflow: hidden;
.hairlines .list[inset] {
border-width: 0.55px;
ion-header {
background-color: $list-background-color;
}
}

83
ionic/components/list/test/inset/main.html
View File

@ -2,37 +2,70 @@
<ion-toolbar><ion-title>Inset List</ion-title></ion-toolbar>
<ion-list inset>
<ion-header>
Inset List Header
</ion-header>
<ion-item class="item-text-wrap">
Keep close to Nature's heart... and break clear away, once in awhile, and
climb a mountain or spend a week in the woods. Wash your spirit clean.
</ion-item>
</ion-list>
<ion-content class="outer-content">
<ion-list inset>
<ion-header>
Inset List Header
</ion-header>
<a ion-item href="#">
<icon alarm item-left></icon>
List Link Item 1
<icon forward item-right></icon>
</a>
<a ion-item href="#">
<icon analytics item-left></icon>
List Link Item 2
<icon forward item-right></icon>
</a>
<button ion-item>
<icon boat item-left></icon>
List Button Item 1
<icon forward item-right></icon>
</button>
<button ion-item>
<icon book item-left></icon>
List Button Item 2
<icon forward item-right></icon>
</button>
</ion-list>
<ion-list inset>
<ion-list inset>
<ion-item>
<icon pin item-left></icon>
All Out Inset List
<button outline item-right>View</button>
</ion-item>
<ion-item>
Inset List, No Header
<button outline item-right>View</button>
</ion-item>
<ion-item class="item-text-wrap">
This is a multiline content within a list that should
take up multiple lines and stuff.
</ion-item>
<ion-item>
List Item 1
</ion-item>
</ion-list>
<ion-item>
List Item 2
</ion-item>
<ion-item class="item-text-wrap">
This is a multiline content within a list that should
take up multiple lines and stuff.
</ion-item>
</ion-list>
<ion-list inset>
<ion-list inset>
<ion-item>
Inset List, no header
</ion-item>
<ion-item>
Inset List, no header, no items
</ion-item>
</ion-list>
</ion-list>
</ion-content>