diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index f208e9ee40..7e62e390fa 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -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 { diff --git a/ionic/components/item/modes/material.scss b/ionic/components/item/modes/material.scss index a9b067fb16..ce74b48ad7 100644 --- a/ionic/components/item/modes/material.scss +++ b/ionic/components/item/modes/material.scss @@ -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 { diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss index 949143824b..b183072925 100644 --- a/ionic/components/list/list.scss +++ b/ionic/components/list/list.scss @@ -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; + } } diff --git a/ionic/components/list/test/inset/main.html b/ionic/components/list/test/inset/main.html index 6d65518506..7720d80fdb 100644 --- a/ionic/components/list/test/inset/main.html +++ b/ionic/components/list/test/inset/main.html @@ -2,37 +2,70 @@ Inset List - - - Inset List Header - - - 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. - - + + + + + + Inset List Header + + + + + List Link Item 1 + + + + + + List Link Item 2 + + + + + + + + - + - - - All Out Inset List - - + + Inset List, No Header + + - - This is a multiline content within a list that should - take up multiple lines and stuff. - + + List Item 1 + - + + List Item 2 + + + + This is a multiline content within a list that should + take up multiple lines and stuff. + + + - + - - Inset List, no header - + + Inset List, no header, no items + - + + +