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

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-border-color: $list-border-color !default;
$item-ios-activated-bg-color: #d9d9d9 !default;
$item-ios-font-size: 1.6rem !default; $item-ios-font-size: 1.6rem !default;
$item-ios-padding-top: 13px !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; left: $item-ios-padding-left;
border-top: 1px solid $item-ios-border-color; border-top: 1px solid $item-ios-border-color;
content: ''; content: '';
pointer-events: none;
} }
&:after { &:after {
@ -46,12 +48,17 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
left: $item-ios-padding-left; left: $item-ios-padding-left;
border-top: 1px solid $item-ios-border-color; border-top: 1px solid $item-ios-border-color;
content: ''; content: '';
pointer-events: none;
} }
&:first-child:before, &:first-child:before,
&:last-child:after { &:last-child:after {
left: 0; left: 0;
} }
&.activated {
background-color: $item-ios-activated-bg-color;
}
} }
ion-header + .item:before { 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-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-font-size: 1.6rem !default;
$item-md-padding-top: 13px !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; left: $item-md-padding-left;
border-top: 1px solid $item-md-border-color; border-top: 1px solid $item-md-border-color;
content: ''; content: '';
pointer-events: none;
} }
&:after { &:after {
@ -47,12 +49,17 @@ $item-md-forward-icon-color: $item-md-border-color !default;
left: $item-md-padding-left; left: $item-md-padding-left;
border-top: 1px solid $item-md-border-color; border-top: 1px solid $item-md-border-color;
content: ''; content: '';
pointer-events: none;
} }
&:first-child:before, &:first-child:before,
&:last-child:after { &:last-child:after {
left: 0; left: 0;
} }
&.activated {
background-color: $item-md-activated-bg-color;
}
} }
ion-header + .item:before { ion-header + .item:before {

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

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

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

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