From 2e9da98d41fd79ec5d7f4637fc61890a9bdd9aec Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 7 Apr 2015 11:59:13 -0500
Subject: [PATCH] tabs / hairlines

---
 .../action-menu/extensions/ios.scss           | 18 +-------
 src/components/alert/extensions/ios.scss      | 19 +-------
 src/components/app/ionic.scss                 |  4 +-
 src/components/app/mixins/_util.scss          | 45 +++++++++++++++++++
 src/components/item/extensions/ios.scss       | 19 +-------
 src/components/list/extensions/ios.scss       | 36 ++-------------
 src/components/search-bar/extensions/ios.scss | 20 +--------
 src/components/tabs/extensions/android.scss   | 14 ++++++
 src/components/tabs/extensions/ios.scss       | 28 ++++++++++++
 src/components/tabs/tabs.js                   |  4 +-
 src/components/toolbar/extensions/ios.scss    | 23 ++--------
 11 files changed, 105 insertions(+), 125 deletions(-)
 create mode 100644 src/components/tabs/extensions/android.scss
 create mode 100644 src/components/tabs/extensions/ios.scss

diff --git a/src/components/action-menu/extensions/ios.scss b/src/components/action-menu/extensions/ios.scss
index 64f70354f1..6dd6dd4b46 100644
--- a/src/components/action-menu/extensions/ios.scss
+++ b/src/components/action-menu/extensions/ios.scss
@@ -41,23 +41,7 @@ $action-menu-ios-button-font-size:         2rem !default;
     background: $action-menu-ios-background-color;
     font-weight: 400;
 
-    &:after {
-      position: absolute;
-      top: auto;
-      right: auto;
-      bottom: 0;
-      left: 0;
-      z-index: $z-index-list-border;
-      display: block;
-
-      width: 100%;
-      height: 1px;
-      @include transform-origin(50%, 0);
-
-      background-color: $action-menu-ios-border-color;
-
-      content: '';
-    }
+    @include hairline(bottom, $action-menu-ios-border-color, $z-index-list-border);
   }
 
   .action-menu-label {
diff --git a/src/components/alert/extensions/ios.scss b/src/components/alert/extensions/ios.scss
index 5c5b9100b9..e8e45121da 100644
--- a/src/components/alert/extensions/ios.scss
+++ b/src/components/alert/extensions/ios.scss
@@ -5,6 +5,7 @@
 $alert-ios-min-height:               80px !default;
 $alert-ios-content-margin:           15px !default;
 $alert-ios-background-color:         #e8e8e8 !default;
+$alert-ios-border-color:             #b5b5b5 !default;
 $alert-ios-border-radius:            15px !default;
 $alert-ios-button-color:             #007aff !default;
 $alert-ios-button-font-size:         2rem !default;
@@ -28,23 +29,7 @@ $alert-ios-button-font-size:         2rem !default;
     padding: 0 $alert-ios-content-margin $alert-ios-content-margin;
     min-height: $alert-ios-min-height;
 
-    &:after {
-      position: absolute;
-      top: auto;
-      right: auto;
-      bottom: 0;
-      left: 0;
-      z-index: $z-index-list-border;
-      display: block;
-
-      width: 100%;
-      height: 1px;
-      @include transform-origin(50%, 0);
-
-      background-color: #b5b5b5;
-
-      content: '';
-    }
+    @include hairline(bottom, $alert-ios-border-color);
   }
 
   .alert-actions {
diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss
index d0b88d3667..982c31c6b6 100644
--- a/src/components/app/ionic.scss
+++ b/src/components/app/ionic.scss
@@ -45,6 +45,7 @@
 
 // iOS Components
 @import
+  "../toolbar/extensions/ios",
   "../action-menu/extensions/ios",
   "../alert/extensions/ios",
   "../button/extensions/ios",
@@ -55,7 +56,7 @@
   "../radio/extensions/ios",
   "../search-bar/extensions/ios",
   "../switch/extensions/ios",
-  "../toolbar/extensions/ios";
+  "../tabs/extensions/ios";
 
 
 // Material Design Components
@@ -64,6 +65,7 @@
   "../button/extensions/android",
   "../list/extensions/android",
   "../item/extensions/android",
+  "../tabs/extensions/android",
   "../toolbar/extensions/android";
 
 
diff --git a/src/components/app/mixins/_util.scss b/src/components/app/mixins/_util.scss
index cd8eced5a0..e23e85f9e6 100644
--- a/src/components/app/mixins/_util.scss
+++ b/src/components/app/mixins/_util.scss
@@ -64,3 +64,48 @@
   $url: url-encode($svg);
   background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
 }
+
+
+// Hairline
+// --------------------------------------------------
+
+@mixin hairline($placement, $line-color, $z-index: 999) {
+
+  @if $placement == top {
+
+    &:before {
+      position: absolute;
+      top: 0;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      z-index: $z-index;
+      display: block;
+      width: 100%;
+      height: 1px;
+      @include transform-origin(50%, 0%);
+      background-color: $line-color;
+      content: '';
+    }
+
+  } @else if $placement == bottom {
+
+    &:after {
+      position: absolute;
+      top: auto;
+      right: auto;
+      bottom: 0;
+      left: 0;
+      z-index: $z-index;
+      display: block;
+      width: 100%;
+      height: 1px;
+      @include transform-origin(50%, 0%);
+      background-color: $line-color;
+      content: '';
+    }
+
+  }
+
+
+}
diff --git a/src/components/item/extensions/ios.scss b/src/components/item/extensions/ios.scss
index d3d960917e..7505dd7d1f 100644
--- a/src/components/item/extensions/ios.scss
+++ b/src/components/item/extensions/ios.scss
@@ -28,24 +28,7 @@ $item-ios-border-color:          $list-ios-border-color !default;
   .item-content {
     min-height: $item-ios-min-height;
     padding: 0;
-
-    &:after {
-      position: absolute;
-      top: auto;
-      right: auto;
-      bottom: 0;
-      left: 0;
-      z-index: $z-index-list-border;
-      display: block;
-
-      width: 100%;
-      height: 1px;
-      @include transform-origin(50%, 0);
-
-      background-color: $item-ios-border-color;
-
-      content: '';
-    }
+    @include hairline(bottom, $item-ios-border-color, $z-index-list-border);
   }
 
   .item:last-of-type .item-content:after {
diff --git a/src/components/list/extensions/ios.scss b/src/components/list/extensions/ios.scss
index e1308f668b..12e847e81f 100644
--- a/src/components/list/extensions/ios.scss
+++ b/src/components/list/extensions/ios.scss
@@ -16,40 +16,12 @@ $list-ios-footer-color:          #8f8f94 !default;
 
 .view-ios {
 
-  .list:before {
-    position: absolute;
-    top: 0;
-    right: auto;
-    bottom: auto;
-    left: 0;
-    z-index: $z-index-list-border;
-    display: block;
-
-    width: 100%;
-    height: 1px;
-    @include transform-origin(50%, 0);
-
-    background-color: $list-ios-border-color;
-
-    content: '';
+  .list {
+    @include hairline(top, $list-ios-border-color, $z-index-list-border);
   }
 
-  .item:last-of-type:after {
-    position: absolute;
-    top: auto;
-    right: auto;
-    bottom: 0;
-    left: 0;
-    z-index: $z-index-list-border;
-    display: block;
-
-    width: 100%;
-    height: 1px;
-    @include transform-origin(50%, 0);
-
-    background-color: $list-ios-border-color;
-
-    content: '';
+  .item:last-of-type {
+    @include hairline(bottom, $list-ios-border-color, $z-index-list-border);
   }
 
   .list-header {
diff --git a/src/components/search-bar/extensions/ios.scss b/src/components/search-bar/extensions/ios.scss
index 53d2d61bdd..32ac6804ee 100644
--- a/src/components/search-bar/extensions/ios.scss
+++ b/src/components/search-bar/extensions/ios.scss
@@ -13,25 +13,7 @@ $search-bar-ios-background-size:      13px 13px !default;
 .search-bar-ios {
   padding: $search-bar-ios-padding;
   background: $search-bar-ios-background-color;
-
-
-  &:after {
-    position: absolute;
-    top: auto;
-    right: auto;
-    bottom: 0;
-    left: 0;
-    z-index: $z-index-list-border;
-    display: block;
-
-    width: 100%;
-    height: 1px;
-    @include transform-origin(50%, 0);
-
-    background-color: $list-ios-border-color;
-
-    content: '';
-  }
+  @include hairline(bottom, $search-bar-ios-border-color);
 
   .search-bar-input {
     height: $search-bar-ios-input-height;
diff --git a/src/components/tabs/extensions/android.scss b/src/components/tabs/extensions/android.scss
new file mode 100644
index 0000000000..fbe17abcfb
--- /dev/null
+++ b/src/components/tabs/extensions/android.scss
@@ -0,0 +1,14 @@
+
+// Android Toolbar
+// --------------------------------------------------
+
+$tab-bar-android-item-padding:             4px 10px !default;
+
+
+.tabs-android {
+
+  .tab-bar-item {
+    padding: $tab-bar-item-padding;
+  }
+
+}
diff --git a/src/components/tabs/extensions/ios.scss b/src/components/tabs/extensions/ios.scss
new file mode 100644
index 0000000000..bc03a842a7
--- /dev/null
+++ b/src/components/tabs/extensions/ios.scss
@@ -0,0 +1,28 @@
+
+// iOS Toolbar
+// --------------------------------------------------
+
+$tab-bar-ios-item-padding:             3px 10px !default;
+$tab-bar-ios-item-font-size:           11px !default;
+$tab-bar-ios-item-icon-size:           28px !default;
+
+
+.tabs-ios {
+
+  .tab-bar-item {
+    padding: $tab-bar-ios-item-padding;
+  }
+
+  .tab-bar-item-text {
+    font-size: $tab-bar-ios-item-font-size;
+  }
+
+  .tab-bar-item-icon {
+    font-size: $tab-bar-ios-item-icon-size;
+  }
+
+  > .tab-bar.toolbar-bottom {
+    @include hairline(top, $toolbar-ios-border-color);
+  }
+
+}
diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
index 255a6af9af..e3a18ba80d 100644
--- a/src/components/tabs/tabs.js
+++ b/src/components/tabs/tabs.js
@@ -9,7 +9,9 @@ import {IonicComponent} from 'ionic2/config/component'
 })
 @Template({
   inline: `
-    <div class="toolbar tab-bar toolbar-ios toolbar-bottom">
+    <div class="toolbar tab-bar"
+         [class.toolbar-top]="placement=='top'"
+         [class.toolbar-bottom]="placement=='bottom'">
       <div class="tab-bar-container">
         <a *for="#tab of tabs"
           class="tab-bar-item"
diff --git a/src/components/toolbar/extensions/ios.scss b/src/components/toolbar/extensions/ios.scss
index 7c3e99e140..4a11d24ba4 100644
--- a/src/components/toolbar/extensions/ios.scss
+++ b/src/components/toolbar/extensions/ios.scss
@@ -45,27 +45,10 @@ $toolbar-ios-button-background-color:       transparent !default;
     background: $toolbar-ios-button-background-color;
   }
 
-  // toolbar top, border bottom (default)
-  &:after {
-    position: absolute;
-    top: auto;
-    right: auto;
-    bottom: 0;
-    left: 0;
-    z-index: $z-index-toolbar-border;
-    display: block;
+  // toolbar on top, border on bottom (default)
+  @include hairline(bottom, $toolbar-ios-border-color);
 
-    width: 100%;
-    height: 1px;
-
-    background-color: $toolbar-ios-border-color;
-
-    @include transform-origin(50%, 100%);
-
-    content: '';
-  }
-
-  // toolbar bottom, border top
+  // toolbar on bottom, border on top
   &.toolbar-bottom:after {
     top: 0;
     bottom: auto;