toolbar/navbar/button updates

ionic/components/app/app.ts

@@ -125,25 +125,25 @@ export class IonicApp {
     });
   }
 
-  applyBodyCss(bodyClassList, platform, config) {
+  applyBodyCss(bodyEle, platform, config) {
     let versions = platform.versions();
     platform.platforms().forEach(platformName => {
       // platform-ios
       let platformClass = 'platform-' + platformName;
-      bodyClassList.add(platformClass);
+      bodyEle.classList.add(platformClass);
 
       let platformVersion = versions[platformName];
       if (platformVersion) {
         // platform-ios_8
         platformClass += '_' + platformVersion.major;
-        bodyClassList.add(platformClass);
+        bodyEle.classList.add(platformClass);
 
         // platform-ios_8_3
-        bodyClassList.add(platformClass + '_' + platformVersion.minor);
+        bodyEle.classList.add(platformClass + '_' + platformVersion.minor);
       }
     });
 
-    bodyClassList.add('mode-' + config.setting('mode'));
+    bodyEle.setAttribute('mode', config.setting('mode'));
   }
 
   isRTL(val) {
@@ -188,7 +188,7 @@ export function ionicBootstrap(component, config, router) {
 
       // config and platform settings have been figured out
       // apply the correct CSS to the app
-      app.applyBodyCss(document.body.classList, Platform, config);
+      app.applyBodyCss(document.body, Platform, config);
 
       // prepare the ready promise to fire....when ready
       Platform.prepareReady(config);

ionic/components/app/z-index.scss

@@ -1,16 +1,22 @@
 
 // Z-Index
 // --------------------------------------------------
+// Grouped by elements which would be siblings
 
-$z-index-content-container:      5 !default;
-$z-index-navbar-container:       10 !default;
-
-$z-index-content:                1 !default;
-$z-index-swipe-handle:           5 !default;
-
-$z-index-toolbar-border:         20 !default;
-$z-index-list-border:            50 !default;
 
 $z-index-aside-overlay:          80 !default;
 $z-index-overlay:                1000 !default;
 $z-index-click-block:            9999 !default;
+
+
+$z-index-content-container:      5 !default;
+$z-index-navbar-container:       10 !default;
+
+
+$z-index-content:                5 !default;
+$z-index-toolbar:                10 !default;
+$z-index-swipe-handle:           15 !default;
+
+
+$z-index-toolbar-border:         20 !default;
+$z-index-list-border:            50 !default;

ionic/components/button/extensions/material.scss

@@ -10,7 +10,8 @@ $button-material-box-shadow-active:        0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px
 $button-material-border-radius:            3px !default;
 
 
-.mode-md button, .mode-md [button] {
+[mode="md"] button,
+[mode="md"] [button] {
   border: 0;
   border-radius: $button-material-border-radius;
 

ionic/components/card/extensions/material.scss

@@ -9,7 +9,7 @@ $card-md-font-size:                 1.4rem !default;
 $card-md-item-content-padding:      15px !default;
 
 
-.mode-md .card {
+[mode="md"] .card {
   background: $card-md-background-color;
   box-shadow: $card-md-box-shadow;
   border-radius: $card-md-border-radius;

ionic/components/nav-bar/extensions/ios.scss

@@ -2,27 +2,12 @@
 // iOS Navbar
 // --------------------------------------------------
 
-$navbar-order-ios: (
-  back-button: 10,
-  primary: 20,
-  title: 30,
-  secondary: 40
-);
-
 $navbar-ios-height:                        4.4rem !default;
-$navbar-ios-background:                    #f7f7f8 !default;
 $navbar-ios-border-color:                  #c4c4c4 !default;
 
-$navbar-ios-title-font-size:               1.7rem !default;
-$navbar-ios-button-font-size:              1.7rem !default;
-$navbar-ios-button-text-color:             #007aff !default;
-$navbar-ios-button-background-color:       transparent !default;
-
 
 .nav[mode="ios"] .navbar-container {
-
   min-height: $navbar-ios-height;
-  background: $navbar-ios-background;
 
   // navbar on top, border on bottom (default)
   @include hairline(bottom, $navbar-ios-border-color);
@@ -32,49 +17,26 @@ $navbar-ios-button-background-color:       transparent !default;
     top: 0;
     bottom: auto;
   }
+}
 
-  .toolbar-title {
+.navbar[mode="ios"] {
-    order: map-get($navbar-order-ios, 'title');
-  }
-
-  .toolbar-primary-item {
-    order: map-get($navbar-order-ios, 'primary');
-  }
-
-  .toolbar-secondary-item {
-    order: map-get($navbar-order-ios, 'secondary');
-  }
-
-  ion-title {
-    order: map-get($navbar-order-ios, 'title');
-    font-size: $navbar-ios-title-font-size;
-    font-weight: 500;
-    text-align: center;
-  }
-
-  .back-button {
-    order: map-get($navbar-order-ios, 'back-button');
-    overflow: inherit;
-  }
 
   button,
   [button] {
-    font-size: $navbar-ios-button-font-size;
-    color: $navbar-ios-button-text-color;
-    border: none;
     padding: 0;
-    margin: 0 10px;
+    margin: 0 1rem;
+
     min-height: $navbar-ios-height;
     min-width: 0;
-    background: $navbar-ios-button-background-color;
   }
 
-  [icon] {
+  .back-button {
-    font-size: 2.5rem;
+    order: map-get($toolbar-order-ios, 'back-button');
+    overflow: inherit;
   }
 
   .back-button-icon {
-    padding-right: 6px;
+    padding-right: 0.6rem;
   }
 
 }

ionic/components/nav-bar/extensions/material.scss

@@ -2,67 +2,14 @@
 // Material Design Navbar
 // --------------------------------------------------
 
-$navbar-order-material: (
-  back-button: 10,
-  primary: 20,
-  title: 30,
-  secondary: 40
-);
-
 $navbar-material-height:                  5.6rem !default;
-$navbar-material-background:              get-color(primary, base) !default;
-
-$navbar-material-title-font-size:         2rem !default;
-$navbar-material-button-font-size:        24px !default;
-$navbar-material-button-text-color:       #fff !default; //#007aff !default;
 
 
 .nav[mode="md"] .navbar-container {
-  height: $navbar-material-height;
+  min-height: $navbar-material-height;
-  background: $navbar-material-background;
+}
 
-  .toolbar-inner-title {
+.navbar[mode="md"] {
-    padding: 0;
-  }
-
-  .toolbar-inner {
-    padding: 0px 16px;
-  }
-
-  .toolbar-title {
-    order: map-get($navbar-order-ios, 'title');
-  }
-
-  .toolbar-primary-item {
-    order: map-get($navbar-order-ios, 'primary');
-  }
-
-  .toolbar-secondary-item {
-    order: map-get($navbar-order-ios, 'secondary');
-  }
-
-  .toolbar-primary-item ion-nav-items button:first-child {
-    margin-left: 0;
-  }
-
-  ion-title {
-    font-size: $navbar-material-title-font-size;
-    font-weight: 500;
-  }
-
-  button,
-  [button] {
-    font-size: $navbar-material-button-font-size;
-    color: $navbar-material-button-text-color;
-    border: none;
-    box-shadow: none;
-
-    padding: 0;
-    margin: 0 10px;
-
-    min-height: $navbar-material-height;
-    min-width: 0;
-  }
 
   .back-button {
     margin: 0;
@@ -71,8 +18,8 @@ $navbar-material-button-text-color:       #fff !default; //#007aff !default;
   .back-button-icon {
     margin: 0;
     font-weight: normal;
-    font-size: 24px;
+    font-size: 2.4rem;
-    min-width: 56px;
+    min-width: 5.6rem;
     text-align: left;
   }
 

ionic/components/nav-bar/nav-bar.scss

@@ -3,26 +3,20 @@
 // --------------------------------------------------
 
 
-.navbar {
+.navbar.toolbar {
   position: absolute;
-  width: 100%;
+}
-  height: 100%;
-  min-height: 4.4rem;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  order: $flex-order-toolbar-top;
 
+.navbar {
   transform: translate3d(100%, 0px, 0px);
+
   &.show-navbar {
     transform: translate3d(0px, 0px, 0px);
   }
 }
 
 .back-button {
-  order: 10;
+  order: map-get($toolbar-order, backButton);;
   transform: translateZ(0px);
 
   display: none;
@@ -36,24 +30,6 @@
   align-items: center;
 }
 
-
+.transparent-navbar {
-// Core Nav Bar Color Generation
+  background-color: transparent !important;
-// --------------------------------------------------
-
-@each $color, $value in $colors {
-
-  .navbar[#{$color}] {
-    background-color: get-color($color, base);
-
-    ion-title,
-    button,
-    [button] {
-      color: get-color($color, inverse);
-    }
-  }
-
-}
-
-.transparent-navbar.navbar {
-  background-color: transparent;
 }

ionic/components/nav-bar/nav-bar.ts

@@ -10,7 +10,10 @@ import * as dom from '../../util/dom';
 
 
 @IonicComponent({
-  selector: 'ion-navbar'
+  selector: 'ion-navbar',
+  host: {
+    'class': 'toolbar'
+  }
 })
 @IonicView({
   template: `

ionic/components/nav/test/basic/pages/first-page.ts

@@ -9,12 +9,8 @@ import {ThirdPage} from './third-page';
   template: '' +
     '<ion-navbar *navbar primary>' +
       '<ion-title>First Page: {{ val }}</ion-title>' +
-      '<ion-nav-items primary>' +
-        '<button>P1</button>' +
-      '</ion-nav-items>' +
       '<ion-nav-items secondary>' +
         '<button>S1</button>' +
-        '<button icon><i class="icon ion-navicon"></i></button>' +
       '</ion-nav-items>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +

ionic/components/tabs/extensions/ios.scss

@@ -33,14 +33,14 @@ $tab-bar-ios-height:                   49px !default;
   }
 
   &[tab-bar-placement="bottom"] > .tab-bar-container {
-    @include hairline(top, $navbar-ios-border-color);
+    @include hairline(top, $toolbar-ios-border-color);
   }
 
   &[tab-bar-placement="top"] > .tab-bar-container {
-    @include hairline(bottom, $navbar-ios-border-color);
+    @include hairline(bottom, $toolbar-ios-border-color);
   }
 
-  &[tab-bar-placement="top"] > .navbar-container .navbar {
+  &[tab-bar-placement="top"] > .toolbar-container .toolbar {
     @include hairline(bottom, none);
   }
 

ionic/components/toolbar/extensions/ios.scss

@@ -1,68 +1,76 @@
-// iOS Navbar
+
+// iOS Toolbar
 // --------------------------------------------------
 
 $toolbar-order-ios: (
+  back-button: 10,
   primary: 20,
   title: 30,
   secondary: 40
 );
 
 $toolbar-ios-height:                        4.4rem !default;
-$toolbar-ios-background:                    #f7f7f8 !default;
 $toolbar-ios-border-color:                  #c4c4c4 !default;
-
-$toolbar-ios-title-font-size:               1.7rem !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
-$toolbar-ios-button-text-color:             #007aff !default;
+$toolbar-ios-title-font-size:               1.7rem !default;
-$toolbar-ios-button-background-color:       transparent !default;
-
-$toolbar-ios-padding: 0px 15px;
 
 
-.toolbar[mode="ios"] {
+.nav[mode="ios"] .toolbar-container {
-
+  min-height: $toolbar-ios-height;
-  padding: $toolbar-ios-padding;
-
-  height: $toolbar-ios-height;
-  background: $toolbar-ios-background;
 
   // toolbar on top, border on bottom (default)
   @include hairline(bottom, $toolbar-ios-border-color);
 
+
   // toolbar on bottom, border on top
-  &[position="bottom"]:after {
+  &.toolbar-bottom:after {
     top: 0;
     bottom: auto;
   }
+}
+
+.toolbar[mode="ios"] {
 
   .toolbar-title {
-    order: map-get($toolbar-order-ios, 'title');
+    order: map-get($toolbar-order-ios, title);
   }
 
   .toolbar-primary-item {
-    order: map-get($toolbar-order-ios, 'primary');
+    order: map-get($toolbar-order-ios, primary);
   }
 
   .toolbar-secondary-item {
-    order: map-get($toolbar-order-ios, 'secondary');
+    order: map-get($toolbar-order-ios, secondary);
   }
 
   ion-title {
-    order: map-get($toolbar-order-ios, 'title');
-    text-align: center;
     font-size: $toolbar-ios-title-font-size;
     font-weight: 500;
+    text-align: center;
+  }
+
+  .back-button {
+    order: map-get($toolbar-order-ios, 'back-button');
+    overflow: inherit;
   }
 
   button,
   [button] {
-    font-size: $toolbar-ios-button-font-size;
-    color: $toolbar-ios-button-text-color;
-    border: none;
     padding: 0;
-    margin: 0 10px;
+    margin: 0 1rem;
-    min-height: $toolbar-ios-height;
+
     min-width: 0;
-    background: $toolbar-ios-button-background-color;
+    min-height: $toolbar-ios-height;
+
+    font-size: $toolbar-ios-button-font-size;
   }
+
+  [icon] {
+    font-size: 2.5rem;
+  }
+
+  .back-button-icon {
+    padding-right: 0.6rem;
+  }
+
 }

ionic/components/toolbar/extensions/material.scss

@@ -1,14 +1,16 @@
-$toolbar-material-height:                  6.4rem !default;
+
-$toolbar-material-background:              get-color(primary, base) !default;//#f7f7f8 !default;
+// Material Design Toolbar
+// --------------------------------------------------
 
 $toolbar-material-title-font-size:         2rem !default;
-$toolbar-material-button-font-size:        2rem !default;
+$toolbar-material-button-font-size:        24px !default;
-$toolbar-material-button-text-color:       #007aff !default;
+
 
 .toolbar[mode="md"] {
-  padding: 0px 16px;
+
-  height: $toolbar-material-height;
+  .toolbar-inner {
-  background: $toolbar-material-background;
+    padding: 0px 16px;
+  }
 
   .toolbar-inner-title {
     padding: 0;
@@ -19,17 +21,19 @@ $toolbar-material-button-text-color:       #007aff !default;
     font-weight: 500;
   }
 
+  .toolbar-primary-item ion-nav-items button:first-child {
+    margin-left: 0;
+  }
+
   button,
   [button] {
-    font-size: $toolbar-material-button-font-size;
-    color: $toolbar-material-button-text-color;
-    border: none;
-    box-shadow: none;
-
     padding: 0;
-    margin: 0 10px;
+    margin: 0 1rem;
 
-    min-height: $toolbar-material-height;
     min-width: 0;
+
+    box-shadow: none;
+    font-size: $toolbar-material-button-font-size;
   }
+
 }

ionic/components/toolbar/toolbar.scss

@@ -3,17 +3,22 @@
 // --------------------------------------------------
 
 $toolbar-order: (
+  backButton: 10,
   title: 20,
   primary: 30,
   secondary: 40
 );
 
-$toolbar-zindex: 2;
+
+$toolbar-background:                    #f4f4f4 !default;
+$toolbar-button-text-color:             #007aff !default;
+$toolbar-title-text-color:              #000 !default;
 
 
-ion-toolbar {
+.toolbar {
-  z-index: $toolbar-zindex;
   position: relative;
+  z-index: $z-index-toolbar;
+
   width: 100%;
   height: 100%;
   min-height: 4.4rem;
@@ -23,9 +28,17 @@ ion-toolbar {
   align-items: center;
   justify-content: space-between;
   order: $flex-order-toolbar-top;
+
+  background-color: $toolbar-background;
+
+  button,
+  [button] {
+    color: $toolbar-button-text-color;
+    box-shadow: none;
+  }
 }
 
-ion-toolbar[position="bottom"] {
+.toolbar[position="bottom"] {
   order: $flex-order-toolbar-bottom;
 }
 
@@ -36,7 +49,7 @@ ion-toolbar[position="bottom"] {
 
 .toolbar-title {
   flex: 1;
-  order: map-get($toolbar-order, 'title');
+  order: map-get($toolbar-order, title);
 
   display: flex;
   align-items: center;
@@ -46,7 +59,7 @@ ion-toolbar[position="bottom"] {
 
 .toolbar-inner-title {
   width: 100%;
-  padding: 0 15px;
+  padding: 0 1.5rem;
 }
 
 ion-title {
@@ -61,15 +74,27 @@ ion-title {
 }
 
 .toolbar-primary-item {
-  order: map-get($toolbar-order, 'primary');
+  order: map-get($toolbar-order, primary);
 }
 
 .toolbar-secondary-item {
-  order: map-get($toolbar-order, 'secondary');
+  order: map-get($toolbar-order, secondary);
 }
 
-.toolbar button,
+
-.toolbar [button] {
+// Toolbar Color Generation
-  background: transparent;
+// --------------------------------------------------
-  border: none;
+
+@each $color, $value in $colors {
+
+  .toolbar[#{$color}] {
+    background-color: get-color($color, base);
+
+    ion-title,
+    button,
+    [button] {
+      color: get-color($color, inverse);
+    }
+  }
+
 }

ionic/config/annotations.ts

@@ -142,7 +142,7 @@ function appendConfig(cls, config) {
   cls.delegates = config.delegates;
 
   let componentId = config.classId || (config.selector && config.selector.replace('ion-', ''));
-  config.host['class'] = componentId;
+  config.host['class'] = ((config.host['class'] || '') + ' ' + componentId).trim();
 
   // the mode will get figured out when the component is constructed
   config.host['[attr.mode]'] = 'clsMode';

ionic/ionic.scss

@@ -23,6 +23,7 @@
 
 // Core Components
 @import
+  "components/toolbar/toolbar",
   "components/action-menu/action-menu",
   "components/alert/alert",
   "components/aside/aside",
@@ -48,13 +49,12 @@
   "components/segment/segment",
   "components/switch/switch",
   "components/tabs/tabs",
-  "components/toolbar/toolbar",
   "components/view/view";
 
 
 // iOS Components
 @import
-  "components/nav-bar/extensions/ios",
+  "components/toolbar/extensions/ios",
   "components/action-menu/extensions/ios",
   "components/alert/extensions/ios",
   "components/button/extensions/ios",
@@ -63,12 +63,12 @@
   "components/content/extensions/ios",
   "components/list/extensions/ios",
   "components/item/extensions/ios",
+  "components/nav-bar/extensions/ios",
   "components/radio/extensions/ios",
   "components/search-bar/extensions/ios",
   "components/segment/extensions/ios",
   "components/switch/extensions/ios",
-  "components/tabs/extensions/ios",
+  "components/tabs/extensions/ios";
-  "components/toolbar/extensions/ios";
 
 
 // Material Design Components
@@ -76,6 +76,7 @@
   "components/material/variables",
   "components/material/ripple",
 
+  "components/toolbar/extensions/material",
   "components/app/extensions/material",
   "components/action-menu/extensions/material",
   "components/alert/extensions/material",
@@ -85,8 +86,7 @@
   "components/item/extensions/material",
   "components/list/extensions/material",
   "components/nav-bar/extensions/material",
-  "components/tabs/extensions/material",
+  "components/tabs/extensions/material";
-  "components/toolbar/extensions/material";
 
 
 // Icons