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
+
+
+