tabs / hairlines

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 {
+    @include hairline(bottom, $action-menu-ios-border-color, $z-index-list-border);
-      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: '';
-    }
   }
 
   .action-menu-label {

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 {
+    @include hairline(bottom, $alert-ios-border-color);
-      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: '';
-    }
   }
 
   .alert-actions {

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

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: '';
+    }
+
+  }
+
+
+}

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;
-
+    @include hairline(bottom, $item-ios-border-color, $z-index-list-border);
-    &: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: '';
-    }
   }
 
   .item:last-of-type .item-content:after {

src/components/list/extensions/ios.scss

@@ -16,40 +16,12 @@ $list-ios-footer-color:          #8f8f94 !default;
 
 .view-ios {
 
-  .list:before {
+  .list {
-    position: absolute;
+    @include hairline(top, $list-ios-border-color, $z-index-list-border);
-    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: '';
   }
 
-  .item:last-of-type:after {
+  .item:last-of-type {
-    position: absolute;
+    @include hairline(bottom, $list-ios-border-color, $z-index-list-border);
-    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: '';
   }
 
   .list-header {

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;
-
+  @include hairline(bottom, $search-bar-ios-border-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: '';
-  }
 
   .search-bar-input {
     height: $search-bar-ios-input-height;

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;
+  }
+
+}

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

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"

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)
+  // toolbar on top, border on bottom (default)
-  &:after {
+  @include hairline(bottom, $toolbar-ios-border-color);
-    position: absolute;
-    top: auto;
-    right: auto;
-    bottom: 0;
-    left: 0;
-    z-index: $z-index-toolbar-border;
-    display: block;
 
-    width: 100%;
+  // toolbar on bottom, border on top
-    height: 1px;
-
-    background-color: $toolbar-ios-border-color;
-
-    @include transform-origin(50%, 100%);
-
-    content: '';
-  }
-
-  // toolbar bottom, border top
   &.toolbar-bottom:after {
     top: 0;
     bottom: auto;