From 9ca770c9313b9f4dca4560936b0139dcd6e816c4 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 25 Nov 2013 10:49:34 -0600 Subject: [PATCH] border: none for .bar in hi-res --- dist/css/ionic.css | 5 +++-- scss/_bar.scss | 6 ++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 47a11cc594..e7a3213266 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2660,11 +2660,12 @@ a.subdued { border-top: 1px solid transparent; border-bottom: 1px solid #dddddd; background-color: white; + /* border-width: 1px will actually create 2 device pixels on retina */ + /* this nifty trick sets an actual 1px border on hi-res displays */ background-size: 0; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .bar { - border-top: none !important; - border-bottom: none !important; + border: none; background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); background-position: bottom; background-size: 100% 1px; diff --git a/scss/_bar.scss b/scss/_bar.scss index ce6c348bb0..030568766d 100644 --- a/scss/_bar.scss +++ b/scss/_bar.scss @@ -24,14 +24,16 @@ border-bottom: 1px solid $bar-default-border; background-color: $bar-default-bg; + + /* border-width: 1px will actually create 2 device pixels on retina */ + /* this nifty trick sets an actual 1px border on hi-res displays */ background-size: 0; @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { - border-top: none !important; - border-bottom: none !important; + border: none; background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%); background-position: bottom; background-size: 100% 1px;