diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index 37668d4c78..e82397e1ea 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -21,6 +21,24 @@ color: $list-text-color; } +.item-group { + display: block; +} + +.item-group-title { + display: block; + min-height: 30px; + font-weight: 500; + width: 100%; + z-index: 100; + z-index: 1000; + &.sticky { + position: -webkit-sticky; + position: sticky; + top: 0px; + } +} + a.item, button.item.item { margin: 0; diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 66d915ed1e..b4b92f5181 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -22,9 +22,30 @@ $item-ios-thumbnail-size: 5.6rem !default; $item-ios-note-color: darken($item-ios-border-color, 10%) !default; $item-ios-forward-icon-color: $item-ios-border-color !default; +$item-ios-divider-bg: #f5f5f5 !default; +$item-ios-divider-color: #222 !default; +$item-ios-divider-padding: 5px 15px !default; .list { + + .item-group-title { + padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left; + background-color: $item-ios-divider-bg; + color: $item-ios-divider-color; + //padding-top: ceil($item-padding / 2); + //padding-bottom: ceil($item-padding / 2); + } + .item-group { + // Make sure the first and last items don't have borders + > .item:first-of-type:before { + border-top: none !important; + } + > .item:last-of-type:after { + border-top: none !important; + } + } + .item { margin-top: -1px; padding-right: ($item-ios-padding-right / 2); diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss index a0d240c633..c5aeef0abf 100644 --- a/ionic/components/item/modes/md.scss +++ b/ionic/components/item/modes/md.scss @@ -25,9 +25,27 @@ $item-md-thumbnail-size: 8rem !default; $item-md-note-color: darken($item-md-border-color, 10%) !default; $item-md-forward-icon-color: $item-md-border-color !default; +$item-md-divider-bg: #fff !default; +$item-md-divider-color: #222 !default; +$item-md-divider-padding: 5px 15px !default; .list { + .item-group-title { + padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left; + background-color: $item-md-divider-bg; + color: $item-md-divider-color; + } + .item-group { + // Make sure the first and last items don't have borders + > .item:first-of-type:before { + border-top: none !important; + } + > .item:last-of-type:after { + border-top: none !important; + } + } + .item { margin-top: -1px; padding-right: ($item-md-padding-right / 2); diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss index 29f68250db..481e9a589a 100644 --- a/ionic/components/list/list.scss +++ b/ionic/components/list/list.scss @@ -18,8 +18,6 @@ } .list[inset] { - overflow: hidden; - ion-header { background-color: $list-background-color; } diff --git a/ionic/components/list/test/sticky/main.html b/ionic/components/list/test/sticky/main.html index a0e7c797e2..67f6307cce 100644 --- a/ionic/components/list/test/sticky/main.html +++ b/ionic/components/list/test/sticky/main.html @@ -3,7 +3,7 @@ - + {{group.title}}