From 98e81641a71e98f806f89cc999d672dd9d76c3e5 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 16:02:25 -0600
Subject: [PATCH] fix toolbars

---
 ionic/components/app/structure.scss     |  1 -
 ionic/components/navbar/navbar.ts       |  8 ++++----
 ionic/components/toolbar/modes/ios.scss |  7 +++++--
 ionic/components/toolbar/modes/md.scss  |  9 ++++++---
 ionic/components/toolbar/toolbar.scss   | 15 +++------------
 ionic/components/toolbar/toolbar.ts     |  6 +++---
 6 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index f9354ac301..43f07a7184 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -182,7 +182,6 @@ ion-navbar-section ion-navbar.toolbar {
 ion-toolbar {
   display: block;
   width: 100%;
-  height: 50px;
 }
 
 ion-toolbar[position=bottom] {
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index dabe77ab62..9cabaaee46 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -49,7 +49,7 @@ class BackButtonText {
 
 
 @Directive({
-  selector: 'toolbar-background'
+  selector: '.toolbar-background'
 })
 class ToolbarBackground {
   constructor(
@@ -64,7 +64,7 @@ class ToolbarBackground {
 @Component({
   selector: 'ion-navbar',
   template:
-    '<toolbar-background></toolbar-background>' +
+    '<div class="toolbar-background"></div>' +
     '<button class="back-button" [hidden]="hideBackButton">' +
       '<icon class="back-button-icon" [name]="bbIcon"></icon>' +
       '<span class="back-button-text">' +
@@ -74,9 +74,9 @@ class ToolbarBackground {
     '<ng-content select="[menu-toggle]"></ng-content>' +
     '<ng-content select="ion-nav-items[primary]"></ng-content>' +
     '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-    '<toolbar-content>' +
+    '<div class="toolbar-content">' +
       '<ng-content></ng-content>' +
-    '</toolbar-content>',
+    '</div>',
   host: {
     '[hidden]': '_hidden',
     'class': 'toolbar'
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 5f5a0405e7..22533cad4d 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../globals.ios";
+@import "../toolbar";
 
 // iOS Toolbar
 // --------------------------------------------------
@@ -11,12 +12,14 @@ $toolbar-order-ios: (
   menu-toggle-secondary: 60,
 );
 
+$toolbar-ios-padding:                       4px !default;
 $toolbar-ios-height:                        4.4rem !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 
 
 .toolbar {
+  padding: $toolbar-ios-padding;
   min-height: $toolbar-ios-height;
 
   [menu-toggle] {
@@ -80,7 +83,7 @@ $toolbar-ios-title-font-size:               1.7rem !default;
   background-color: transparent;
 }
 
-.toolbar toolbar-background {
+.toolbar-background {
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-color: $toolbar-ios-border-color;
@@ -117,7 +120,7 @@ ion-nav-items[secondary] {
   order: map-get($toolbar-order-ios, secondary);
 }
 
-&.hairlines .toolbar toolbar-background {
+&.hairlines .toolbar-background {
   border-bottom-width: 0.55px;
 }
 
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 7e9c1957a0..9b3eab8250 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -1,14 +1,17 @@
 @import "../../../globals.md";
+@import "../toolbar";
 
 // Material Design Toolbar
 // --------------------------------------------------
 
+$toolbar-md-padding:                 4px !default;
 $toolbar-md-height:                  5.6rem !default;
 $toolbar-md-title-font-size:         2rem !default;
 $toolbar-md-button-font-size:        1.4rem !default;
 
 
 .toolbar {
+  padding: $toolbar-md-padding;
   min-height: $toolbar-md-height;
 
   button,
@@ -62,7 +65,7 @@ $toolbar-md-button-font-size:        1.4rem !default;
   background-color: transparent;
 }
 
-.toolbar toolbar-background {
+.toolbar-background {
   border-color: $toolbar-md-border-color;
   background-color: $toolbar-md-background-color;
 }
@@ -92,12 +95,12 @@ ion-navbar-section {
   min-height: $navbar-md-height;
 }
 
-.toolbar .back-button {
+.back-button {
   margin: 0 0 0 12px;
   box-shadow: none;
 }
 
-.toolbar .back-button-icon {
+.back-button-icon {
   margin: 0;
   min-width: 44px;
   font-size: 2.4rem;
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 38166b4e97..76ff2e55b2 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -3,8 +3,6 @@
 // Toolbar
 // --------------------------------------------------
 
-$toolbar-padding:        4px !default;
-
 $toolbar-order: (
   backButton: 10,
   menu-toggle-primary: 20,
@@ -26,18 +24,11 @@ $toolbar-order: (
   order: $flex-order-toolbar-top;
   flex: 0;
 
-  padding: $toolbar-padding;
   width: 100%;
   overflow: hidden;
-
-  button,
-  [button] {
-    background-color: transparent;
-    box-shadow: none;
-  }
 }
 
-.toolbar toolbar-background {
+.toolbar-background {
   position: absolute;
   left: 0;
   top: 0;
@@ -50,7 +41,7 @@ $toolbar-order: (
   pointer-events: none;
 }
 
-toolbar-content {
+.toolbar-content {
   display: block;
   flex: 1;
   order: map-get($toolbar-order, content);
@@ -148,7 +139,7 @@ ion-navbar.toolbar {
 
   .toolbar[#{$color-name}] {
 
-    toolbar-background {
+    .toolbar-background {
       background-color: $color-value;
       border-color: darken($color-value, 10%);
     }
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index 6d85e4ffe6..072780f3b8 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -77,13 +77,13 @@ export class ToolbarBase extends Ion  {
 @Component({
   selector: 'ion-toolbar',
   template:
-    '<toolbar-background></toolbar-background>' +
+    '<div class="toolbar-background"></div>' +
     '<ng-content select="[menu-toggle]"></ng-content>' +
     '<ng-content select="ion-nav-items[primary]"></ng-content>' +
     '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-    '<toolbar-content>' +
+    '<div class="toolbar-content">' +
       '<ng-content></ng-content>' +
-    '</toolbar-content>',
+    '</div>',
   host: {
     'class': 'toolbar'
   }