From 470ac72b6a814aa39e418b5ac30151dd90a2c352 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 14:28:40 -0600
Subject: [PATCH] refactor(menu-toggle): use .bar-button-menu-toggle and not
 attr

---
 ionic/components/toolbar/modes/ios.scss      | 20 ++++++++++-----
 ionic/components/toolbar/modes/md.scss       | 27 ++++++++++----------
 ionic/components/toolbar/toolbar-button.scss | 11 +-------
 ionic/components/toolbar/toolbar.scss        |  2 +-
 4 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 4145e568a5..417c3e39af 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -274,17 +274,23 @@ ion-buttons[right] {
 // iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
-.toolbar {
-  [menu-toggle] {
-    order: map-get($toolbar-order-ios, menu-toggle-start);
-  }
+.bar-button-menu-toggle {
+  margin: 0 6px;
+  padding: 0;
+  min-width: 36px;
+  order: map-get($toolbar-order-ios, menu-toggle-start);
 
-  [menu-toggle][end],
-  [menu-toggle][right] {
-    order: map-get($toolbar-order-ios, menu-toggle-end);
+  icon {
+    padding: 0 6px;
+    font-size: 2.8rem;
   }
 }
 
+.bar-button-menu-toggle[end],
+.bar-button-menu-toggle[right] {
+  order: map-get($toolbar-order-ios, menu-toggle-end);
+}
+
 
 // iOS Toolbar Color Generation
 // --------------------------------------------------
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 8c7f84f239..00aa75102e 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -258,22 +258,23 @@ ion-buttons[right] {
 // Material Design Toolbar Menu Toggle
 // --------------------------------------------------
 
-.toolbar {
-  [menu-toggle],
-  [menu-toggle].activated {
-    padding: 0 2px;
-    min-width: 44px;
+.bar-button-menu-toggle {
+  margin: 0 6px;
+  padding: 0 2px;
+  min-width: 44px;
+  order: map-get($toolbar-order-md, menu-toggle-start);
 
-    icon {
-      font-size: 2.4rem;
-    }
+  icon {
+    padding: 0 6px;
+    font-size: 2.4rem;
   }
+}
 
-  [menu-toggle][secondary],
-  [menu-toggle][secondary].activated {
-    margin: 0 2px;
-    min-width: 28px;
-  }
+.bar-button-menu-toggle[end],
+.bar-button-menu-toggle[right] {
+  margin: 0 2px;
+  min-width: 28px;
+  order: map-get($toolbar-order-md, menu-toggle-end);
 }
 
 
diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss
index 3ba63610c8..44e52df3c0 100644
--- a/ionic/components/toolbar/toolbar-button.scss
+++ b/ionic/components/toolbar/toolbar-button.scss
@@ -33,18 +33,9 @@
 // Menu Toggle
 // --------------------------------------------------
 
-.toolbar [menu-toggle] {
+.bar-button-menu-toggle {
   display: flex;
   align-items: center;
-  margin: 0 6px;
-  padding: 0;
-  min-width: 36px;
-  box-shadow: none;
-}
-
-.toolbar [menu-toggle] icon {
-  padding: 0 6px;
-  font-size: 2.8rem;
 }
 
 
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 8b54064f2d..6ed890a307 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -65,7 +65,7 @@ ion-buttons div {
 
 // TODO this is a temp hack to fix segment overlapping ion-nav-item
 ion-buttons,
-[menu-toggle] {
+.bar-button-menu-toggle {
   z-index: 99;
 }