From 46e0a24f8c70bf84ccc395f9985de58fdea25ee8 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Mon, 28 Oct 2013 13:22:24 -0500
Subject: [PATCH] 1px border-bottom on headers

---
 dist/css/ionic-ios7.css   | 105 ++++++++++++++++++++++++++++++++------
 dist/css/ionic-scoped.css | 105 ++++++++++++++++++++++++++++++++------
 dist/css/ionic.css        | 105 ++++++++++++++++++++++++++++++++------
 scss/ionic/_bar.scss      |  21 +++++---
 scss/ionic/_mixins.scss   |  18 ++++++-
 5 files changed, 301 insertions(+), 53 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 4c2bacd541..e1ac29355a 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -552,13 +552,16 @@ a.subdued‎ {
   border-width: 0;
   border-style: solid;
   background-color: white;
-  /*  &.bar-header {
-      border-bottom-width: 1px;
-    }
-    &.bar-footer {
-      border-top-width: 1px;
-    }*/
-  box-shadow: inset 0 0 1px #999; }
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid #dddddd; }
+  @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;
+      border-bottom: none;
+      background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
+      background-size: 100% 1px;
+      background-repeat: no-repeat;
+      background-position: bottom; } }
   .bar.bar-clear {
     border: none;
     background: none;
@@ -569,50 +572,122 @@ a.subdued‎ {
       color: #fff; }
   .bar.bar-default {
     background-color: rgba(255, 255, 255, 0.9);
-    box-shadow: inset 0 0 1px #9d9d9d;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #dddddd;
     color: #333333; }
+    @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.bar-default {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-default .title {
       color: #333333; }
   .bar.bar-secondary {
     background-color: rgba(245, 245, 245, 0.9);
-    box-shadow: inset 0 0 1px #7b7b7b;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #bbbbbb;
     color: #333333; }
+    @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.bar-secondary {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-secondary .title {
       color: #333333; }
   .bar.bar-primary {
     background-color: rgba(74, 135, 238, 0.9);
-    box-shadow: inset 0 0 1px #1d3660;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #3b6dc2;
     color: white; }
+    @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.bar-primary {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-primary .title {
       color: white; }
   .bar.bar-info {
     background-color: rgba(67, 206, 230, 0.9);
-    box-shadow: inset 0 0 1px #1d5c67;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #3bb3c8;
     color: white; }
+    @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.bar-info {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-info .title {
       color: white; }
   .bar.bar-success {
     background-color: rgba(102, 204, 51, 0.9);
-    box-shadow: inset 0 0 1px #274d14;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #5bb22f;
     color: white; }
+    @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.bar-success {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-success .title {
       color: white; }
   .bar.bar-warning {
     background-color: rgba(240, 184, 64, 0.9);
-    box-shadow: inset 0 0 1px #6c5118;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #d29f31;
     color: white; }
+    @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.bar-warning {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-warning .title {
       color: white; }
   .bar.bar-danger {
     background-color: rgba(239, 78, 58, 0.9);
-    box-shadow: inset 0 0 1px #5c1a12;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #c73927;
     color: white; }
+    @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.bar-danger {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-danger .title {
       color: white; }
   .bar.bar-dark {
     background-color: rgba(68, 68, 68, 0.9);
-    box-shadow: inset 0 0 1px black;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #111111;
     color: white; }
+    @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.bar-dark {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-dark .title {
       color: white; }
   .bar .title {
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index b5674260e2..25c3c5d41b 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1318,13 +1318,16 @@
     border-width: 0;
     border-style: solid;
     background-color: white;
-    /*  &.bar-header {
-        border-bottom-width: 1px;
-      }
-      &.bar-footer {
-        border-top-width: 1px;
-      }*/
-    box-shadow: inset 0 0 1px #999; }
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #dddddd; }
+    @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) {
+      .ionic .bar {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .ionic .bar.bar-clear {
       border: none;
       background: none;
@@ -1335,50 +1338,122 @@
         color: #fff; }
     .ionic .bar.bar-default {
       background-color: rgba(255, 255, 255, 0.9);
-      box-shadow: inset 0 0 1px #9d9d9d;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid #dddddd;
       color: #333333; }
+      @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) {
+        .ionic .bar.bar-default {
+          border-top: none;
+          border-bottom: none;
+          background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+          background-position: bottom; } }
       .ionic .bar.bar-default .title {
         color: #333333; }
     .ionic .bar.bar-secondary {
       background-color: rgba(245, 245, 245, 0.9);
-      box-shadow: inset 0 0 1px #7b7b7b;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid #bbbbbb;
       color: #333333; }
+      @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) {
+        .ionic .bar.bar-secondary {
+          border-top: none;
+          border-bottom: none;
+          background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+          background-position: bottom; } }
       .ionic .bar.bar-secondary .title {
         color: #333333; }
     .ionic .bar.bar-primary {
       background-color: rgba(74, 135, 238, 0.9);
-      box-shadow: inset 0 0 1px #1d3660;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid #3b6dc2;
       color: white; }
+      @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) {
+        .ionic .bar.bar-primary {
+          border-top: none;
+          border-bottom: none;
+          background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+          background-position: bottom; } }
       .ionic .bar.bar-primary .title {
         color: white; }
     .ionic .bar.bar-info {
       background-color: rgba(67, 206, 230, 0.9);
-      box-shadow: inset 0 0 1px #1d5c67;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid #3bb3c8;
       color: white; }
+      @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) {
+        .ionic .bar.bar-info {
+          border-top: none;
+          border-bottom: none;
+          background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+          background-position: bottom; } }
       .ionic .bar.bar-info .title {
         color: white; }
     .ionic .bar.bar-success {
       background-color: rgba(102, 204, 51, 0.9);
-      box-shadow: inset 0 0 1px #274d14;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid #5bb22f;
       color: white; }
+      @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) {
+        .ionic .bar.bar-success {
+          border-top: none;
+          border-bottom: none;
+          background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+          background-position: bottom; } }
       .ionic .bar.bar-success .title {
         color: white; }
     .ionic .bar.bar-warning {
       background-color: rgba(240, 184, 64, 0.9);
-      box-shadow: inset 0 0 1px #6c5118;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid #d29f31;
       color: white; }
+      @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) {
+        .ionic .bar.bar-warning {
+          border-top: none;
+          border-bottom: none;
+          background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+          background-position: bottom; } }
       .ionic .bar.bar-warning .title {
         color: white; }
     .ionic .bar.bar-danger {
       background-color: rgba(239, 78, 58, 0.9);
-      box-shadow: inset 0 0 1px #5c1a12;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid #c73927;
       color: white; }
+      @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) {
+        .ionic .bar.bar-danger {
+          border-top: none;
+          border-bottom: none;
+          background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+          background-position: bottom; } }
       .ionic .bar.bar-danger .title {
         color: white; }
     .ionic .bar.bar-dark {
       background-color: rgba(68, 68, 68, 0.9);
-      box-shadow: inset 0 0 1px black;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid #111111;
       color: white; }
+      @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) {
+        .ionic .bar.bar-dark {
+          border-top: none;
+          border-bottom: none;
+          background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+          background-position: bottom; } }
       .ionic .bar.bar-dark .title {
         color: white; }
     .ionic .bar .title {
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 037c254ec4..b0bda1a4d7 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1661,13 +1661,16 @@ a.subdued‎ {
   border-width: 0;
   border-style: solid;
   background-color: white;
-  /*  &.bar-header {
-      border-bottom-width: 1px;
-    }
-    &.bar-footer {
-      border-top-width: 1px;
-    }*/
-  box-shadow: inset 0 0 1px #999; }
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid #dddddd; }
+  @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;
+      border-bottom: none;
+      background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
+      background-size: 100% 1px;
+      background-repeat: no-repeat;
+      background-position: bottom; } }
   .bar.bar-clear {
     border: none;
     background: none;
@@ -1678,50 +1681,122 @@ a.subdued‎ {
       color: #fff; }
   .bar.bar-default {
     background-color: rgba(255, 255, 255, 0.9);
-    box-shadow: inset 0 0 1px #9d9d9d;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #dddddd;
     color: #333333; }
+    @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.bar-default {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-default .title {
       color: #333333; }
   .bar.bar-secondary {
     background-color: rgba(245, 245, 245, 0.9);
-    box-shadow: inset 0 0 1px #7b7b7b;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #bbbbbb;
     color: #333333; }
+    @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.bar-secondary {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-secondary .title {
       color: #333333; }
   .bar.bar-primary {
     background-color: rgba(74, 135, 238, 0.9);
-    box-shadow: inset 0 0 1px #1d3660;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #3b6dc2;
     color: white; }
+    @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.bar-primary {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-primary .title {
       color: white; }
   .bar.bar-info {
     background-color: rgba(67, 206, 230, 0.9);
-    box-shadow: inset 0 0 1px #1d5c67;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #3bb3c8;
     color: white; }
+    @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.bar-info {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-info .title {
       color: white; }
   .bar.bar-success {
     background-color: rgba(102, 204, 51, 0.9);
-    box-shadow: inset 0 0 1px #274d14;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #5bb22f;
     color: white; }
+    @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.bar-success {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-success .title {
       color: white; }
   .bar.bar-warning {
     background-color: rgba(240, 184, 64, 0.9);
-    box-shadow: inset 0 0 1px #6c5118;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #d29f31;
     color: white; }
+    @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.bar-warning {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-warning .title {
       color: white; }
   .bar.bar-danger {
     background-color: rgba(239, 78, 58, 0.9);
-    box-shadow: inset 0 0 1px #5c1a12;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #c73927;
     color: white; }
+    @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.bar-danger {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-danger .title {
       color: white; }
   .bar.bar-dark {
     background-color: rgba(68, 68, 68, 0.9);
-    box-shadow: inset 0 0 1px black;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid #111111;
     color: white; }
+    @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.bar-dark {
+        border-top: none;
+        border-bottom: none;
+        background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom; } }
     .bar.bar-dark .title {
       color: white; }
   .bar .title {
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 73f963985e..0c26064692 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -20,15 +20,22 @@
   border-style: solid;
 
   background-color: $bar-bg;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid $bar-default-border-color;
+  @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-header {
-    border-bottom-width: 1px;
-  }
-  &.bar-footer {
-    border-top-width: 1px;
-  }*/
+  border-top: none;
+  border-bottom: none;
+  background-image: linear-gradient(0deg, $bar-default-border-color, $bar-default-border-color, 50%, transparent 50%);
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom;
 
-  box-shadow: inset 0 0 1px #999;
+ }
 
   &.bar-clear {
     border: none;
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index 8bccbe3f12..9237297981 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -96,8 +96,24 @@
 
 @mixin bar-style($bgColor, $borderColor, $color) {
   background-color: $bgColor;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid $borderColor;
+
+  @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;
+    border-bottom: none;
+    background-image: linear-gradient(0deg, $borderColor, $borderColor 50%, transparent 50%);
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
+    background-position: bottom;
+
+   }
 
-  box-shadow: inset 0 0 1px darken($borderColor, 25%);
   color: $color;
 
   .title {