javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove remaining gradient hairlines

Browse Source
This commit is contained in:
Adam Bradley
2015-07-24 15:14:04 -05:00
parent 704897d03a
commit 24e012865f
3 changed files with 2 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/item/extensions/ios.scss
View File

@@ -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);
}
}

13
ionic/components/list/extensions/ios.scss
View File

@@ -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;

71
ionic/util/mixins.scss
View File

@@ -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()
// --------------------------------------------------