diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss index e69e9b070e..a047c5bccd 100644 --- a/ionic/components/item/item.scss +++ b/ionic/components/item/item.scss @@ -5,7 +5,6 @@ .item { - position: relative; display: flex; justify-content: space-between; align-items: center; @@ -31,7 +30,7 @@ font-weight: 500; width: 100%; z-index: 1000; - + &.sticky { position: -webkit-sticky; position: sticky; @@ -56,6 +55,12 @@ button.item.item { will-change: initial; } +.item-inner { + height: 100%; + width: 100%; + display: flex; +} + ion-item-content { margin: 0; flex: 1; diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index 5b2aa45f2c..82f0f693cf 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -21,10 +21,12 @@ import {Component} from 'angular2/angular2'; selector: 'ion-item,[ion-item]', template: '' + - '' + - '' + - ''+ - '', + '
' + + '' + + '' + + ''+ + '' + + '
', host: { '[class.item]': 'isItem' } diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss index 725333ec5f..1de425d967 100644 --- a/ionic/components/item/modes/ios.scss +++ b/ionic/components/item/modes/ios.scss @@ -40,68 +40,69 @@ ion-note { color: $item-ios-note-color; } -.list { +.item-group { + ion-item-group-title { + border-bottom: 1px solid $item-ios-border-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:first-child { + .item-inner { + border-top-width: 0; } } +} + +.list { .item { margin-top: -1px; - padding-right: ($item-ios-padding-right / 2); - padding-left: ($item-ios-padding-left / 2); + padding-left: $item-ios-padding-left; font-size: $item-ios-font-size; - &:before { - position: absolute; - top: 0; - right: 0; - left: $item-ios-padding-left; + &:first-child { border-top: 1px solid $item-ios-border-color; - content: ''; - pointer-events: none; + + .item-inner { + border-top-width: 0; + } } - &:after { - position: absolute; - right: 0; - bottom: 0; - left: $item-ios-padding-left; + &:last-child { + border-bottom: 1px solid $item-ios-border-color; + } + + .item-inner { + padding-right: ($item-ios-padding-right / 2); border-top: 1px solid $item-ios-border-color; - content: ''; - pointer-events: none; } - &:first-child:before, - &:last-child:after { - left: 0; + ion-item-content { + margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0; } } - ion-header + .item:first-of-type:before { - left: 0; - } + // If the item has the no-lines attribute we want to remove the border from it + // and the border from the next item if there is one + .item[no-lines] { + border-width: 0; - &[inset] .item { - &:before, - &:after { - left: 0; + .item-inner { + border-width: 0; + } + + + .item { + .item-inner { + border-width: 0; + } } } - ion-item-content { - margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2); + [item-left] { + margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 0; } - [item-left], [item-right] { - margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2); + margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom ($item-ios-padding-left / 2); } icon[item-left], @@ -224,7 +225,7 @@ ion-card { background-repeat: no-repeat; background-position: right ($item-ios-padding-right - 2) center; background-size: 14px 14px; - padding-right: 32px; + margin-right: 32px; } ion-item-sliding[detail-push] { @@ -234,11 +235,12 @@ ion-card { background-repeat: no-repeat; background-position: right ($item-ios-padding-right - 2) center; background-size: 14px 14px; - padding-right: 32px; + margin-right: 32px; } } } +// Hairlines for iOS need to be set at 0.55px to show on iPhone 6 and 6 Plus &.hairlines .list { ion-item-options { @@ -255,28 +257,26 @@ ion-card { margin-bottom: 0.55px; } + ion-header + .item { + border-top-width: 0.55px; + + .item-inner { + border-width: 0; + } + } + .item { margin-top: -0.55px; + border-width: 0.55px; - &:last-child { - margin-bottom: -0.55px; + .item-inner { + border-width: 0.55px; } - &:before, - &:after { - border-top-width: 0.55px; + &:first-child { + .item-inner { + border-top-width: 0px; + } } } - -} - -.item[no-lines] { - &:before, - &:after { - border-width: 0; - } - - + .item:before { - border-width: 0; - } } diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss index e50f11b194..b26ef57fb9 100644 --- a/ionic/components/list/modes/ios.scss +++ b/ionic/components/list/modes/ios.scss @@ -31,25 +31,18 @@ $list-ios-header-color: #333 !default; letter-spacing: $list-ios-header-letter-spacing; text-transform: uppercase; color: $list-ios-header-color; + } - &:after { - position: absolute; - z-index: 1; - right: 0; - bottom: 0; - left: 0; - border-top: 1px solid $item-ios-border-color; - content: ''; - pointer-events: none; + ion-header + .item { + border-top: 1px solid $item-ios-border-color; + + .item-inner { + border-top-width: 0; } } } -&.hairlines .list ion-header:after { - border-top-width: 0.55px; -} - .list + .list { margin-top: $list-ios-margin-top + $list-ios-margin-bottom; } @@ -63,24 +56,22 @@ $list-ios-header-color: #333 !default; margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left; border-radius: $list-inset-ios-border-radius; + ion-header { + border-radius: inherit; + } + .item:first-child { margin-top: 0; border-top-right-radius: $list-inset-ios-border-radius; border-top-left-radius: $list-inset-ios-border-radius; - - &:before { - border-top: none; - } + border-top: none; } .item:last-child { margin-bottom: 0; border-bottom-right-radius: $list-inset-ios-border-radius; border-bottom-left-radius: $list-inset-ios-border-radius; - - &:after { - border-top: none; - } + border-bottom: none; } } @@ -90,9 +81,8 @@ $list-ios-header-color: #333 !default; &.hairlines .list[no-lines], .list[no-lines] { - ion-header:after, - .item:before, - .item:after { + .item, + .item .item-inner { border-width: 0; } } diff --git a/ionic/components/list/test/no-lines/main.html b/ionic/components/list/test/no-lines/main.html index 3f53208344..b555792be1 100644 --- a/ionic/components/list/test/no-lines/main.html +++ b/ionic/components/list/test/no-lines/main.html @@ -27,4 +27,94 @@ + + + + List With No Lines First Item + + + + + Pizza + + Always + + + + + + Beer + + Yes Plz + + + + + + Wine + + All the time + + + + + + + List With No Lines Middle Item + + + + + Pizza + + Always + + + + + + Beer + + Yes Plz + + + + + + Wine + + All the time + + + + + + + List With No Lines Last Item + + + + + Pizza + + Always + + + + + + Beer + + Yes Plz + + + + + + Wine + + All the time + + +