diff --git a/ionic/components/item/extensions/ios.scss b/ionic/components/item/extensions/ios.scss index 121290138e..a10a8a2131 100644 --- a/ionic/components/item/extensions/ios.scss +++ b/ionic/components/item/extensions/ios.scss @@ -24,7 +24,6 @@ $item-ios-border-color: $list-ios-border-color !default; .item-content { min-height: $item-ios-min-height; padding: 0; - @include hairline(bottom, $item-ios-border-color); } .item:last-of-type .item-content:after { @@ -50,9 +49,4 @@ $item-ios-border-color: $list-ios-border-color !default; } } - .item-group-title { - // TODO: This doesn't look great when it's a header for the first item - @include hairline(bottom, $item-ios-border-color); - } - } diff --git a/ionic/components/list/extensions/ios.scss b/ionic/components/list/extensions/ios.scss index 86a6304a43..8f758ae0ed 100644 --- a/ionic/components/list/extensions/ios.scss +++ b/ionic/components/list/extensions/ios.scss @@ -5,7 +5,7 @@ $list-ios-background-color: #fff !default; $list-ios-border-color: #c8c7cc !default; -$list-ios-header-margin: 35px 15px 10px 15px !default; +$list-ios-header-margin: 35px 15px 10px 15px !default; $list-ios-header-font-size: 1.4rem !default; $list-ios-header-color: #6d6d72 !default; @@ -14,16 +14,7 @@ $list-ios-footer-font-size: 1.4rem !default; $list-ios-footer-color: #8f8f94 !default; -.list.list[mode="ios"] { - // Add the hairline to the top of the first item - .item:first-of-type { - @include hairline(top, $list-ios-border-color, $z-index-list-border); - } - - // Add the hairline to the bottom of the last item - .item:last-of-type { - @include hairline(bottom, $list-ios-border-color, $z-index-list-border); - } +.list[mode="ios"] { .list-header { position: relative; diff --git a/ionic/util/mixins.scss b/ionic/util/mixins.scss index a2c829a5f6..cf85a6dec1 100644 --- a/ionic/util/mixins.scss +++ b/ionic/util/mixins.scss @@ -89,77 +89,6 @@ -// Hairline -// -------------------------------------------------- - -@mixin hairline($placement, $line-color, $z-index: 999) { - // border-width: 1px will actually create 2 device pixels on retina - // this nifty trick sets an actual 1px border on hi-res displays - - position: relative; - - @if $placement == top { - &:before { - @if $line-color == none { - border-top: none; - - } @else { - position: absolute; - top: 0; - bottom: auto; - left: 0; - z-index: $z-index; - display: block; - width: 100%; - height: 1px; - content: ''; - - border-top: 1px solid $line-color; - - @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { - border: none; - background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%); - background-position: bottom; - background-size: 100% 1px; - background-repeat: no-repeat; - } - } - } - - } @else if $placement == bottom { - &:after { - @if $line-color == none { - border-bottom: none; - - } @else { - position: absolute; - top: auto; - bottom: 0; - left: 0; - z-index: $z-index; - display: block; - width: 100%; - height: 1px; - content: ''; - - border-bottom: 1px solid $line-color; - - @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) { - border: none; - background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%); - background-position: bottom; - background-size: 100% 1px; - background-repeat: no-repeat; - } - } - } - - } - -} - - - // calc() // --------------------------------------------------