Merge branch 'master' of https://github.com/driftyco/ionic2

CHANGELOG.md

@@ -32,7 +32,8 @@
 
 ##### `<a menu-toggle>` should now be `<button menu-toggle>`
 
-
+* If a menu is not given an `id`, then it is automatically assigned an id, such as `leftMenu` or `rightMenu`.
+* If the menu toggle/close directives are not given a value then it tries the menu ids of `leftMenu` then `rightMenu`.
 
 ##### Bug Fixes
 

demos/component-docs/menus/basic/menu-events.html

@@ -1,6 +1,7 @@
+
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <button menu-toggle="leftMenu">
+  <button menu-toggle>
     <icon menu></icon>
   </button>
 

demos/component-docs/menus/basic/menu-home.html

@@ -1,6 +1,6 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <button menu-toggle="leftMenu">
+  <button menu-toggle>
     <icon menu></icon>
   </button>
 
@@ -12,5 +12,5 @@
 
 
 <ion-content padding>
-  <button block menu-toggle="leftMenu">Toggle Menu</button>
+  <button block menu-toggle>Toggle Menu</button>
 </ion-content>

ionic/components.ios.scss

@@ -5,22 +5,22 @@
 
 // iOS Components
 @import
-  "components/app/modes/ios",
-  "components/action-sheet/modes/ios",
-  "components/badge/modes/ios",
-  "components/button/modes/ios",
-  "components/card/modes/ios",
-  "components/checkbox/modes/ios",
-  "components/content/modes/ios",
-  "components/item/modes/ios",
-  "components/list/modes/ios",
-  "components/menu/modes/ios",
-  "components/modal/modes/ios",
-  "components/popup/modes/ios",
-  "components/radio/modes/ios",
-  "components/searchbar/modes/ios",
-  "components/segment/modes/ios",
-  "components/switch/modes/ios",
-  "components/tabs/modes/ios",
-  "components/text-input/modes/ios",
-  "components/toolbar/modes/ios";
+  "components/app/app.ios",
+  "components/action-sheet/action-sheet.ios",
+  "components/badge/badge.ios",
+  "components/button/button.ios",
+  "components/card/card.ios",
+  "components/checkbox/checkbox.ios",
+  "components/content/content.ios",
+  "components/item/item.ios",
+  "components/list/list.ios",
+  "components/menu/menu.ios",
+  "components/modal/modal.ios",
+  "components/popup/popup.ios",
+  "components/radio/radio.ios",
+  "components/searchbar/searchbar.ios",
+  "components/segment/segment.ios",
+  "components/switch/switch.ios",
+  "components/tabs/tabs.ios",
+  "components/text-input/text-input.ios",
+  "components/toolbar/toolbar.ios";

ionic/components.md.scss

@@ -5,23 +5,23 @@
 
 // Material Design Components
 @import
-  "components/app/modes/md",
-  "components/action-sheet/modes/md",
-  "components/badge/modes/md",
-  "components/button/modes/md",
-  "components/card/modes/md",
-  "components/checkbox/modes/md",
-  "components/content/modes/md",
-  "components/item/modes/md",
-  "components/list/modes/md",
-  "components/menu/modes/md",
-  "components/modal/modes/md",
-  "components/popup/modes/md",
-  "components/radio/modes/md",
+  "components/app/app.md",
+  "components/action-sheet/action-sheet.md",
+  "components/badge/badge.md",
+  "components/button/button.md",
+  "components/card/card.md",
+  "components/checkbox/checkbox.md",
+  "components/content/content.md",
+  "components/item/item.md",
+  "components/list/list.md",
+  "components/menu/menu.md",
+  "components/modal/modal.md",
+  "components/popup/popup.md",
+  "components/radio/radio.md",
   "components/tap-click/ripple",
-  "components/searchbar/modes/md",
-  "components/segment/modes/md",
-  "components/switch/modes/md",
-  "components/tabs/modes/md",
-  "components/text-input/modes/md",
-  "components/toolbar/modes/md";
+  "components/searchbar/searchbar.md",
+  "components/segment/segment.md",
+  "components/switch/switch.md",
+  "components/tabs/tabs.md",
+  "components/text-input/text-input.md",
+  "components/toolbar/toolbar.md";

ionic/components/action-sheet/action-sheet.ios.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.ios";
-@import "../action-sheet";
+@import "../../globals.ios";
+@import "./action-sheet";
 
 // iOS Action Sheet
 // --------------------------------------------------

ionic/components/action-sheet/action-sheet.md.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.md";
-@import "../action-sheet";
+@import "../../globals.md";
+@import "./action-sheet";
 
 // Material Design Action Sheet
 // --------------------------------------------------

ionic/components/app/app.ios.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.ios";
+@import "../../globals.ios";
 
 // iOS App
 // --------------------------------------------------

ionic/components/app/app.md.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.md";
+@import "../../globals.md";
 
 // Material Design App
 // --------------------------------------------------

ionic/components/badge/badge.ios.scss

@@ -1,4 +1,4 @@
-@import "../badge";
+@import "./badge";
 
 // iOS Badge
 // --------------------------------------------------

ionic/components/badge/badge.md.scss

@@ -1,4 +1,4 @@
-@import "../badge";
+@import "./badge";
 
 // Material Design Badge
 // --------------------------------------------------

ionic/components/button/button.ios.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.ios";
-@import "../button";
+@import "../../globals.ios";
+@import "./button";
 
 // iOS Button
 // --------------------------------------------------
@@ -216,5 +216,5 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // Core Button Overrides
 // --------------------------------------------------
 
-@import "../button-fab";
-@import "../button-icon";
+@import "./button-fab";
+@import "./button-icon";

ionic/components/button/button.md.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.md";
-@import "../button";
+@import "../../globals.md";
+@import "./button";
 
 // Material Design Button
 // --------------------------------------------------
@@ -258,5 +258,5 @@ $button-md-small-icon-font-size:           1.4em !default;
 // Core Button Overrides
 // --------------------------------------------------
 
-@import "../button-fab";
-@import "../button-icon";
+@import "./button-fab";
+@import "./button-icon";

ionic/components/card/card.ios.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.ios";
-@import "../card";
+@import "../../globals.ios";
+@import "./card";
 
 // iOS Card
 // --------------------------------------------------

ionic/components/card/card.md.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.md";
-@import "../card";
+@import "../../globals.md";
+@import "./card";
 
 // Material Design Card
 // --------------------------------------------------

ionic/components/checkbox/checkbox.ios.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.ios";
+@import "../../globals.ios";
 
 // iOS Checkbox Structure
 // --------------------------------------------------

ionic/components/checkbox/checkbox.md.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.md";
+@import "../../globals.md";
 
 // Material Design Checkbox
 // --------------------------------------------------

ionic/components/checkbox/checkbox.ts

@@ -70,6 +70,7 @@ export class Checkbox {
   }
 
   /**
+   * @private
    * Toggle the checked state of the checkbox. Calls onChange to pass the updated checked state to the model (Control).
    */
   toggle() {

ionic/components/content/content.ios.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.ios";
+@import "../../globals.ios";
 
 // iOS Content
 // --------------------------------------------------

ionic/components/content/content.md.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.md";
+@import "../../globals.md";
 
 // Material Design Content Padding
 // --------------------------------------------------

ionic/components/item/item.ios.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.ios";
-@import "../item";
+@import "../../globals.ios";
+@import "./item";
 
 // iOS Item
 // --------------------------------------------------

ionic/components/item/item.md.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.md";
-@import "../item";
+@import "../../globals.md";
+@import "./item";
 
 // Material Design Item
 // --------------------------------------------------

ionic/components/list/list.ios.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.ios";
-@import "../list";
+@import "../../globals.ios";
+@import "./list";
 
 // iOS List
 // --------------------------------------------------

ionic/components/list/list.md.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.md";
-@import "../list";
+@import "../../globals.md";
+@import "./list";
 
 // Material Design List
 // --------------------------------------------------

ionic/components/list/list.ts

@@ -77,22 +77,19 @@ export class List extends Ion {
   }
 
   enableSlidingItems(shouldEnable) {
-    if (this._init) {
+    if (this._enableSliding !== shouldEnable) {
+      this._enableSliding = shouldEnable;
 
-      if (this._enableSliding !== shouldEnable) {
-        this._enableSliding = shouldEnable;
-
-        if (shouldEnable) {
-          console.debug('enableSlidingItems');
-          this.zone.runOutsideAngular(() => {
-            setTimeout(() => {
-              this.slidingGesture = new ItemSlidingGesture(this, this.ele);
-            });
+      if (shouldEnable) {
+        console.debug('enableSlidingItems');
+        this.zone.runOutsideAngular(() => {
+          setTimeout(() => {
+            this.slidingGesture = new ItemSlidingGesture(this, this.ele);
           });
+        });
 
-        } else {
-          this.slidingGesture && this.slidingGesture.unlisten();
-        }
+      } else {
+        this.slidingGesture && this.slidingGesture.unlisten();
       }
     }
   }
@@ -101,15 +98,6 @@ export class List extends Ion {
     this.slidingGesture && this.slidingGesture.closeOpened();
   }
 
-  /**
-   * @private
-   */
-  ngAfterViewInit() {
-    this._init = true;
-    if (this._enableSliding) {
-      this.enableSlidingItems(true);
-    }
-  }
 }
 
 

ionic/components/menu/menu-close.ts

@@ -1,7 +1,7 @@
-import {Directive, ElementRef} from 'angular2/angular2';
+import {Directive} from 'angular2/angular2';
 
-import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
+import {Menu} from './menu';
 
 
 /**
@@ -18,18 +18,15 @@ import {IonicApp} from '../app/app';
     '(click)': 'close()'
   }
 })
-export class MenuClose extends Ion {
+export class MenuClose {
 
-  constructor(
-    app: IonicApp,
-    elementRef: ElementRef
-  ) {
-    super(elementRef, null);
-    this.app = app;
-  }
+  constructor(private app: IonicApp) {}
 
+  /**
+  * @private
+  */
   close() {
-    let menu = this.app.getComponent(this.menuClose || 'menu');
+    let menu = Menu.getById(this.app, this.menuClose);
     menu && menu.close();
   }
 

ionic/components/menu/menu-toggle.ts

@@ -1,9 +1,9 @@
 import {Directive, ElementRef, Optional} from 'angular2/angular2';
 
-import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
 import {ViewController} from '../nav/view-controller';
 import {Navbar} from '../navbar/navbar';
+import {Menu} from './menu';
 
 
 /**
@@ -22,7 +22,7 @@ import {Navbar} from '../navbar/navbar';
     'menu-toggle': '' //ensures the attr is there for css when using [menu-toggle]
   }
 })
-export class MenuToggle extends Ion {
+export class MenuToggle {
 
   constructor(
     app: IonicApp,
@@ -30,7 +30,6 @@ export class MenuToggle extends Ion {
     @Optional() viewCtrl: ViewController,
     @Optional() navbar: Navbar
   ) {
-    super(elementRef, null);
     this.app = app;
     this.viewCtrl = viewCtrl;
     this.withinNavbar = !!navbar;
@@ -42,14 +41,16 @@ export class MenuToggle extends Ion {
   }
 
   /**
-  * TODO
-  * @param {TODO} event  TODO
+  * @private
   */
   toggle() {
-    let menu = this.app.getComponent(this.menuToggle || 'menu');
+    let menu = Menu.getById(this.app, this.menuToggle);
     menu && menu.toggle();
   }
 
+  /**
+  * @private
+  */
   get isHidden() {
     if (this.withinNavbar && this.viewCtrl) {
       return !this.viewCtrl.isRoot();

ionic/components/menu/menu.ios.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.ios";
+@import "../../globals.ios";
 
 // iOS Menu
 // --------------------------------------------------

ionic/components/menu/menu.md.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.md";
+@import "../../globals.md";
 
 // Material Design Menu
 // --------------------------------------------------

ionic/components/menu/menu.ts

@@ -35,6 +35,14 @@ import * as gestures from  './menu-gestures';
  * <ion-menu [content]="contentRef" side="right"></ion-menu>
  * ```
  *
+ * Menus can optionally be given an `id` attribute which allows the app to
+ * to get ahold of menu references. If no `id` is given then the menu
+ * automatically receives an `id` created from the side it is on, such as
+ * `leftMenu` or `rightMenu`. When using more than one menu it is always
+ * recommended to give each menu a unique `id`. Additionally menu-toggle and
+ * menu-close directives should be given menu id values of their respective
+ * menu.
+ *
  * Menu supports two display styles: overlay, and reveal. Overlay
  * is the traditional Android drawer style, and Reveal is the traditional iOS
  * style. By default, Menu will adjust to the correct style for the platform,
@@ -109,7 +117,11 @@ export class Menu extends Ion {
 
     if (!self.id) {
       // Auto register
-      self.id = 'menu';
+      self.id = self.side + 'Menu';
+      if (self.app.getComponent(self.id)) {
+        // id already exists, make sure this one is unique
+        self.id += (++menuIds);
+      }
       self.app.register(self.id, self);
     }
 
@@ -360,9 +372,34 @@ export class Menu extends Ion {
     this._cntEle = null;
   }
 
+  static getById(app, menuId) {
+    let menu = null;
+
+    if (menuId) {
+      menu = app.getComponent(menuId);
+      if (!menu) {
+        console.error('Menu with id "' + menuId + '" cannot be found for menu-toggle');
+        return;
+      }
+
+    } else {
+      menu = app.getComponent('leftMenu');
+      if (!menu) {
+        menu = app.getComponent('rightMenu');
+      }
+      if (!menu) {
+        console.error('Menu with id "leftMenu" or "rightMenu" cannot be found for menu-toggle');
+        return;
+      }
+    }
+
+    return menu;
+  }
+
 }
 
 let menuTypes = {};
+let menuIds = 0;
 
 
 @Directive({

ionic/components/modal/modal.ios.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.ios";
+@import "../../globals.ios";
 
 // iOS Modals
 // --------------------------------------------------

ionic/components/modal/modal.md.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.md";
+@import "../../globals.md";
 
 // Material Design Modals
 // --------------------------------------------------

ionic/components/nav/nav-controller.ts

@@ -441,7 +441,7 @@ export class NavController extends Ion {
     viewCtrl.shouldDestroy = false;
     viewCtrl.shouldCache = false;
 
-    this._incrementId(viewCtrl);
+    this._incId(viewCtrl);
     this._views.splice(index, 0, viewCtrl);
 
     this._cleanup();
@@ -1271,14 +1271,14 @@ export class NavController extends Ion {
    * @private
    */
   _add(viewCtrl) {
-    this._incrementId(viewCtrl);
+    this._incId(viewCtrl);
     this._views.push(viewCtrl);
   }
 
   /**
    * @private
    */
-  _incrementId(viewCtrl) {
+  _incId(viewCtrl) {
     viewCtrl.id = this.id + '-' + (++this._ids);
   }
 
@@ -1435,12 +1435,23 @@ export class NavController extends Ion {
 
   /**
    * @private
-   * IS RETURNING UNDEFIND
    * @param {TODO} view  TODO
-   * @returns {TODO} TODO
+   * @returns {boolean}
    */
   isActive(viewCtrl) {
-    return (viewCtrl && viewCtrl.state === ACTIVE_STATE);
+    return !!(viewCtrl && viewCtrl.state === ACTIVE_STATE);
+  }
+
+  /**
+   * Returns the root NavController.
+   * @returns {NavController}
+   */
+  get rootNav() {
+    let nav = this;
+    while (nav.parent) {
+      nav = nav.parent;
+    }
+    return nav;
   }
 
   /**

ionic/components/popup/popup.ios.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.ios";
-@import "../popup";
+@import "../../globals.ios";
+@import "./popup";
 
 // iOS Popups
 // --------------------------------------------------

ionic/components/popup/popup.md.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.md";
-@import "../popup";
+@import "../../globals.md";
+@import "./popup";
 
 // Material Design Popups
 // --------------------------------------------------

ionic/components/radio/radio.ios.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.ios";
+@import "../../globals.ios";
 
 // iOS Radio
 // --------------------------------------------------

ionic/components/radio/radio.md.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.md";
+@import "../../globals.md";
 
 // Material Design Radio
 // --------------------------------------------------

ionic/components/searchbar/searchbar.ios.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.ios";
-@import "../searchbar";
+@import "../../globals.ios";
+@import "./searchbar";
 
 // iOS Searchbar
 // --------------------------------------------------

ionic/components/searchbar/searchbar.md.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.md";
-@import "../searchbar";
+@import "../../globals.md";
+@import "./searchbar";
 
 // Material Design Searchbar
 // --------------------------------------------------

ionic/components/segment/segment.ios.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.ios";
-@import "../segment";
+@import "../../globals.ios";
+@import "./segment";
 
 // iOS Segment
 // --------------------------------------------------

ionic/components/segment/segment.md.scss

@@ -1,5 +1,5 @@
-@import "../../../globals.md";
-@import "../segment";
+@import "../../globals.md";
+@import "./segment";
 
 // Material Design Segment
 // --------------------------------------------------

ionic/components/switch/switch.ios.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.ios";
+@import "../../globals.ios";
 
 // iOS Switch
 // --------------------------------------------------

ionic/components/switch/switch.md.scss

@@ -1,4 +1,4 @@
-@import "../../../globals.md";
+@import "../../globals.md";
 
 // Material Design Switch
 // --------------------------------------------------

ionic/components/switch/switch.ts

@@ -167,6 +167,7 @@ export class Switch {
   /**
    * Set checked state of this switch.
    * @param {boolean} value  Boolean to set this switch's checked state to.
+   * @private
    */
   check(value) {
     this.checked = !!value;
@@ -175,6 +176,7 @@ export class Switch {
 
   /**
    * Toggle the checked state of this switch.
+   * @private
    */
   toggle(ev) {
     this.check(!this.checked);

ionic/components/tabs/tabs.ios.scss

@@ -1,10 +1,10 @@
-@import "../../../globals.ios";
-@import "../tabs";
+@import "../../globals.ios";
+@import "./tabs";
 
 // iOS Tabs
 // --------------------------------------------------
 
-$tabbar-ios-background-color:         $toolbar-ios-background-color !default;
+$tabbar-ios-background:               $toolbar-ios-background !default;
 $tabbar-ios-item-padding:             0px 10px !default;
 $tabbar-ios-item-font-size:           10px !default;
 $tabbar-ios-item-icon-size:           32px !default;
@@ -18,7 +18,7 @@ $tab-button-ios-inactive-color:       $toolbar-ios-inactive-color !default;
 
 tabbar {
   border-top: 1px solid $toolbar-ios-border-color;
-  background: $tabbar-ios-background-color;
+  background: $tabbar-ios-background;
 }
 
 ion-tabs[tabbar-placement=top] tabbar {

ionic/components/tabs/tabs.md.scss

@@ -1,10 +1,10 @@
-@import "../../../globals.md";
-@import "../tabs";
+@import "../../globals.md";
+@import "./tabs";
 
 // Material Design Tabs
 // --------------------------------------------------
 
-$tabbar-md-background-color:         $toolbar-md-background-color !default;
+$tabbar-md-background:               $toolbar-md-background !default;
 $tabbar-md-item-padding:             12px 10px 5px 10px !default;
 $tabbar-md-item-font-size:           1.4rem !default;
 $tabbar-md-item-font-weight:         500 !default;
@@ -16,7 +16,7 @@ $tab-button-md-inactive-color:       $toolbar-md-inactive-color !default;
 
 
 tabbar {
-  background: $tabbar-md-background-color;
+  background: $tabbar-md-background;
 }
 
 

ionic/components/tabs/tabs.ts

@@ -246,6 +246,19 @@ export class Tabs extends Ion {
     return Promise.resolve();
   }
 
+  /**
+   * Returns the root NavController. Returns `null` if Tabs is not
+   * within a NavController.
+   * @returns {NavController}
+   */
+  get rootNav() {
+    let nav = this.parent;
+    while (nav.parent) {
+      nav = nav.parent;
+    }
+    return nav;
+  }
+
 }
 
 let tabIds = -1;

ionic/components/tabs/test/advanced/index.ts

@@ -73,9 +73,7 @@ class Tab1Page1 {
   }
 
   logout() {
-    let tabs = this.nav.parent;
-    let rootNav = tabs.parent;
-    rootNav.setRoot(SignIn, null, { animate: true, direction: 'back' });
+    this.nav.rootNav.setRoot(SignIn, null, { animate: true, direction: 'back' });
   }
 }
 

ionic/components/text-input/text-input.ios.scss

@@ -1,6 +1,6 @@
-@import "../../../globals.ios";
-@import "../label";
-@import "../text-input";
+@import "../../globals.ios";
+@import "./label";
+@import "./text-input";
 
 // iOS Text Input
 // --------------------------------------------------

ionic/components/text-input/text-input.md.scss

@@ -1,6 +1,6 @@
-@import "../../../globals.md";
-@import "../label";
-@import "../text-input";
+@import "../../globals.md";
+@import "./label";
+@import "./text-input";
 
 // Material Design Text Input
 // --------------------------------------------------

ionic/components/toolbar/toolbar.ios.scss

@@ -1,6 +1,6 @@
-@import "../../../globals.ios";
-@import "../toolbar";
-@import "../toolbar-button";
+@import "../../globals.ios";
+@import "./toolbar";
+@import "./toolbar-button";
 
 // iOS Toolbar
 // --------------------------------------------------
@@ -43,7 +43,7 @@ ion-navbar-section {
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-color: $toolbar-ios-border-color;
-  background-color: $toolbar-ios-background-color;
+  background: $toolbar-ios-background;
 }
 
 &.hairlines .toolbar-background {
@@ -82,7 +82,7 @@ ion-title {
   .toolbar[#{$color-name}] {
 
     .toolbar-background {
-      background-color: $color-value;
+      background: $color-value;
       border-color: darken($color-value, 10%);
     }
 

ionic/components/toolbar/toolbar.md.scss

@@ -1,6 +1,6 @@
-@import "../../../globals.md";
-@import "../toolbar";
-@import "../toolbar-button";
+@import "../../globals.md";
+@import "./toolbar";
+@import "./toolbar-button";
 
 // Material Design Toolbar
 // --------------------------------------------------
@@ -41,7 +41,7 @@ ion-navbar-section {
 
 .toolbar-background {
   border-color: $toolbar-md-border-color;
-  background-color: $toolbar-md-background-color;
+  background: $toolbar-md-background;
 }
 
 
@@ -67,7 +67,7 @@ ion-title {
   .toolbar[#{$color-name}] {
 
     .toolbar-background {
-      background-color: $color-value;
+      background: $color-value;
     }
 
     .toolbar-title,
@@ -112,7 +112,7 @@ ion-buttons[right] {
   margin-top: 0;
   margin-bottom: 0;
   margin-left: 0.2rem;
-  margin-right: 0.2rem;  
+  margin-right: 0.2rem;
   padding: 0 5px;
   min-height: 32px;
   border: 0;

ionic/themes/default.ios.scss

@@ -26,7 +26,7 @@ $font-size-ios-base:                   $font-size-base !default;
 // iOS Toolbar
 // --------------------------------------------------
 
-$toolbar-ios-background-color:         $toolbar-background-color !default;
+$toolbar-ios-background:               $toolbar-background !default;
 $toolbar-ios-border-color:             $toolbar-border-color !default;
 $toolbar-ios-text-color:               $toolbar-text-color !default;
 $toolbar-ios-active-color:             $toolbar-active-color !default;

ionic/themes/default.md.scss

@@ -26,7 +26,7 @@ $font-size-md-base:                   $font-size-base !default;
 // Material Design Toolbar
 // --------------------------------------------------
 
-$toolbar-md-background-color:         $toolbar-background-color !default;
+$toolbar-md-background:               $toolbar-background !default;
 $toolbar-md-border-color:             $toolbar-border-color !default;
 $toolbar-md-text-color:               $toolbar-text-color !default;
 $toolbar-md-active-color:             $toolbar-active-color !default;

ionic/themes/default.scss

@@ -21,7 +21,7 @@ $subdued-text-color:         #666 !default;
 $font-family-base:           -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
 $font-size-base:             1.4rem !default; // 1.4rem == 14px
 
-$toolbar-background-color:   #f8f8f8 !default;
+$toolbar-background:         #f8f8f8 !default;
 $toolbar-border-color:       #b2b2b2 !default;
 $toolbar-text-color:         $text-color !default;
 $toolbar-active-color:       $link-color !default;