From 709ff3d2ffe396412b66a9188afffbfc02725863 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 3 Dec 2015 14:43:32 -0600
Subject: [PATCH 001/100] create MD and iOS css files

---
 gulpfile.js              | 27 +++++++++++++++++++++------
 ionic/ionic.ios.scss     | 25 ++++++-------------------
 ionic/ionic.ios_OLD.scss | 23 +++++++++++++++++++++++
 ionic/ionic.md.scss      | 24 ++++++------------------
 ionic/ionic.md_OLD.scss  | 22 ++++++++++++++++++++++
 ionic/ionic.scss         |  4 ++--
 6 files changed, 80 insertions(+), 45 deletions(-)
 create mode 100644 ionic/ionic.ios_OLD.scss
 create mode 100644 ionic/ionic.md_OLD.scss

diff --git a/gulpfile.js b/gulpfile.js
index b721b71158..de01405bcb 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -340,23 +340,23 @@ gulp.task('e2e', function() {
 
   function createPlatformTests(file) {
     return through2.obj(function(file, enc, next) {
-      var self = this
-      var relativePath = path.dirname(file.path.replace(/^.*?ionic(\/|\\)components(\/|\\)/, ''))
-      var contents = file.contents.toString()
+      var self = this;
+      var relativePath = path.dirname(file.path.replace(/^.*?ionic(\/|\\)components(\/|\\)/, ''));
+      var contents = file.contents.toString();
       platforms.forEach(function(platform) {
         var platformContents = testTemplate({
           contents: contents,
           buildConfig: buildConfig,
           relativePath: relativePath,
           platform: platform
-        })
+        });
         self.push(new VinylFile({
           base: file.base,
           contents: new Buffer(platformContents),
           path: file.path.replace(/e2e.js$/, platform + '.e2e.js')
-        }))
+        }));
       })
-      next()
+      next();
     })
   }
 });
@@ -364,6 +364,21 @@ gulp.task('e2e', function() {
 gulp.task('sass', function() {
   var sass = require('gulp-sass');
   var autoprefixer = require('gulp-autoprefixer');
+
+  gulp.src('ionic/ionic.ios.scss')
+    .pipe(sass()
+      .on('error', sass.logError)
+    )
+    .pipe(autoprefixer(buildConfig.autoprefixer))
+    .pipe(gulp.dest('dist/css/'));
+
+  gulp.src('ionic/ionic.md.scss')
+    .pipe(sass()
+      .on('error', sass.logError)
+    )
+    .pipe(autoprefixer(buildConfig.autoprefixer))
+    .pipe(gulp.dest('dist/css/'));
+
   return gulp.src('ionic/ionic.scss')
     .pipe(sass()
       .on('error', sass.logError)
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index c29bfd9a79..fc34e616ac 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -1,24 +1,11 @@
 /*! Ionic: iOS */
+@charset "UTF-8";
+
+
+// Core Components
+@import "ionic.core";
 
 
 // iOS Components
 @import
-  "components/app/modes/ios",
-  "components/button/modes/ios",
-  "components/icon/modes/ios",
-  "components/item/modes/ios",
-  "components/toolbar/modes/ios",
-  "components/action-sheet/modes/ios",
-  "components/card/modes/ios",
-  "components/content/modes/ios",
-  "components/list/modes/ios",
-  "components/text-input/modes/ios",
-  "components/navbar/modes/ios",
-  "components/popup/modes/ios",
-  "components/checkbox/modes/ios",
-  "components/radio/modes/ios",
-  "components/searchbar/modes/ios",
-  "components/segment/modes/ios",
-  "components/switch/modes/ios",
-  "components/tabs/modes/ios",
-  "platform/cordova-ios";
+  "components/action-sheet/modes/ios";
diff --git a/ionic/ionic.ios_OLD.scss b/ionic/ionic.ios_OLD.scss
new file mode 100644
index 0000000000..862310d0d4
--- /dev/null
+++ b/ionic/ionic.ios_OLD.scss
@@ -0,0 +1,23 @@
+/*! Ionic: iOS */
+
+
+// iOS Components
+@import
+  "components/app/modes/ios",
+  "components/button/modes/ios",
+  "components/icon/modes/ios",
+  "components/item/modes/ios",
+  "components/toolbar/modes/ios",
+  "components/card/modes/ios",
+  "components/content/modes/ios",
+  "components/list/modes/ios",
+  "components/text-input/modes/ios",
+  "components/navbar/modes/ios",
+  "components/popup/modes/ios",
+  "components/checkbox/modes/ios",
+  "components/radio/modes/ios",
+  "components/searchbar/modes/ios",
+  "components/segment/modes/ios",
+  "components/switch/modes/ios",
+  "components/tabs/modes/ios",
+  "platform/cordova-ios";
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index fdeb5abe9d..c20ede7a79 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -1,23 +1,11 @@
 /*! Ionic: Material Design */
+@charset "UTF-8";
+
+
+// Core Components
+@import "ionic.core";
 
 
 // Material Design Components
 @import
-  "components/app/modes/md",
-  "components/toolbar/modes/md",
-  "components/action-sheet/modes/md",
-  "components/button/modes/md",
-  "components/content/modes/md",
-  "components/item/modes/md",
-  "components/list/modes/md",
-  "components/card/modes/md",
-  "components/checkbox/modes/md",
-  "components/text-input/modes/md",
-  "components/navbar/modes/md",
-  "components/popup/modes/md",
-  "components/radio/modes/md",
-  "components/searchbar/modes/md",
-  "components/segment/modes/md",
-  "components/switch/modes/md",
-  "components/tabs/modes/md",
-  "components/tap-click/ripple";
+  "components/action-sheet/modes/md";
diff --git a/ionic/ionic.md_OLD.scss b/ionic/ionic.md_OLD.scss
new file mode 100644
index 0000000000..1c52d2f105
--- /dev/null
+++ b/ionic/ionic.md_OLD.scss
@@ -0,0 +1,22 @@
+/*! Ionic: Material Design */
+
+
+// Material Design Components
+@import
+  "components/app/modes/md",
+  "components/toolbar/modes/md",
+  "components/button/modes/md",
+  "components/content/modes/md",
+  "components/item/modes/md",
+  "components/list/modes/md",
+  "components/card/modes/md",
+  "components/checkbox/modes/md",
+  "components/text-input/modes/md",
+  "components/navbar/modes/md",
+  "components/popup/modes/md",
+  "components/radio/modes/md",
+  "components/searchbar/modes/md",
+  "components/segment/modes/md",
+  "components/switch/modes/md",
+  "components/tabs/modes/md",
+  "components/tap-click/ripple";
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index b541ccbb4b..858799a586 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -7,13 +7,13 @@
 
 // iOS Components
 .ios {
-  @import "ionic.ios";
+  @import "ionic.ios_OLD";
 }
 
 
 // Material Design Components
 .md {
-  @import "ionic.md";
+  @import "ionic.md_OLD";
 }
 
 

From 6eb1ef5fb540fa36cfb4a1d55f8e7249fb9d28d8 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 3 Dec 2015 15:31:48 -0600
Subject: [PATCH 002/100] dynamically add link element for testing

---
 ionic/config/bootstrap.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts
index e575f2ddc9..3a7a98619d 100644
--- a/ionic/config/bootstrap.ts
+++ b/ionic/config/bootstrap.ts
@@ -98,7 +98,13 @@ function setupDom(window, document, config, platform, clickBlock, featureDetect)
 
   // set the mode class name
   // ios/md
-  bodyEle.classList.add(config.get('mode'));
+  let mode = config.get('mode');
+  bodyEle.classList.add(mode);
+
+  let linkEle = document.createElement('link');
+  linkEle.setAttribute('href', '../../../css/ionic.' + mode + '.css');
+  linkEle.setAttribute('ref', 'stylesheet');
+  document.head.appendChild(linkEle);
 
   // touch devices should not use :hover CSS pseudo
   // enable :hover CSS when the "hoverCSS" setting is not false

From 9cbb5895945e799f3438d182be0485a74bb2c543 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Thu, 3 Dec 2015 16:37:20 -0500
Subject: [PATCH 003/100] refactor(action-sheet): renamed elements to divs with
 classes

---
 .../components/action-sheet/action-sheet.scss |  2 +-
 ionic/components/action-sheet/action-sheet.ts | 30 ++++++++++---------
 ionic/components/action-sheet/modes/ios.scss  | 22 +++++++-------
 .../components/action-sheet/test/basic/e2e.ts |  2 +-
 ionic/util/util.scss                          |  2 +-
 5 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss
index 4a293b2c86..c73f8fb5af 100644
--- a/ionic/components/action-sheet/action-sheet.scss
+++ b/ionic/components/action-sheet/action-sheet.scss
@@ -24,7 +24,7 @@ ion-action-sheet {
   z-index: $z-index-overlay;
 }
 
-action-sheet-wrapper {
+.action-sheet-wrapper {
   position: absolute;
   z-index: $z-index-overlay-wrapper;
   bottom: 0;
diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index 8c55137457..44b80682ea 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -17,8 +17,8 @@ import {extend} from '../../util/util';
 @Component({
   selector: 'ion-action-sheet',
   template:
-    '<backdrop (click)="cancel()" tappable disable-activated></backdrop>' +
-    '<action-sheet-wrapper>' +
+    '<div (click)="cancel()" tappable disable-activated class="backdrop"></div>' +
+    '<div class="action-sheet-wrapper">' +
       '<div class="action-sheet-container">' +
         '<div class="action-sheet-group action-sheet-options">' +
           '<div class="action-sheet-title" *ng-if="d.titleText">{{d.titleText}}</div>' +
@@ -28,15 +28,17 @@ import {extend} from '../../util/util';
           '</button>' +
           '<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-destructive disable-hover">' +
             '<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon"></icon> ' +
-            '{{d.destructiveText}}</button>' +
+            '{{d.destructiveText}}' +
+          '</button>' +
         '</div>' +
         '<div class="action-sheet-group action-sheet-cancel" *ng-if="d.cancelText">' +
           '<button (click)="cancel()" class="disable-hover">' +
             '<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon"></icon> ' +
-            '{{d.cancelText}}</button>' +
+            '{{d.cancelText}}' +
+          '</button>' +
         '</div>' +
       '</div>' +
-    '</action-sheet-wrapper>',
+    '</div>',
   host: {
     'role': 'dialog'
   },
@@ -121,7 +123,7 @@ export class ActionSheet {
    *
    * @param {Object} [opts={}]  An object containing optional settings.
    * @param {String} [opts.pageType='action-sheet'] The page type that determines how the page renders and animates.
-   * @param {String} [opts.enterAnimation='action-sheet-slide-in'] The class used to animate an actionSheet that is entering. 
+   * @param {String} [opts.enterAnimation='action-sheet-slide-in'] The class used to animate an actionSheet that is entering.
    * @param {String} [opts.leaveAnimation='action-sheet-slide-out'] The class used to animate an actionSheet that is leaving.
    * @return {Promise} Promise that resolves when the action sheet is open.
    */
@@ -161,8 +163,8 @@ class ActionSheetSlideIn extends Animation {
     super(null, opts);
 
     let ele = enteringView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
 
     backdrop.fromTo('opacity', 0.01, 0.4);
     wrapper.fromTo('translateY', '100%', '0%');
@@ -178,8 +180,8 @@ class ActionSheetSlideOut extends Animation {
     super(null, opts);
 
     let ele = leavingView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
 
     backdrop.fromTo('opacity', 0.4, 0);
     wrapper.fromTo('translateY', '0%', '100%');
@@ -195,8 +197,8 @@ class ActionSheetMdSlideIn extends Animation {
     super(null, opts);
 
     let ele = enteringView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
 
     backdrop.fromTo('opacity', 0.01, 0.26);
     wrapper.fromTo('translateY', '100%', '0%');
@@ -212,8 +214,8 @@ class ActionSheetMdSlideOut extends Animation {
     super(null, opts);
 
     let ele = leavingView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('action-sheet-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.action-sheet-wrapper'));
 
     backdrop.fromTo('opacity', 0.26, 0);
     wrapper.fromTo('translateY', '0%', '100%');
diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index bbce0a734e..352a889ff4 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -26,17 +26,6 @@ ion-action-sheet {
   text-align: center;
 }
 
-.action-sheet-container {
-  padding: 0 $action-sheet-ios-group-margin;
-
-  button.activated {
-    box-shadow: none;
-    border-color: $action-sheet-options-border-color;
-    color: $action-sheet-options-text-color;
-    background: $action-sheet-options-background-active-color;
-  }
-}
-
 ion-action-sheet button {
   min-height: $action-sheet-ios-height;
   padding: $action-sheet-ios-padding;
@@ -51,6 +40,17 @@ ion-action-sheet button {
   }
 }
 
+.action-sheet-container {
+  padding: 0 $action-sheet-ios-group-margin;
+
+  button.activated {
+    box-shadow: none;
+    border-color: $action-sheet-options-border-color;
+    color: $action-sheet-options-text-color;
+    background: $action-sheet-options-background-active-color;
+  }
+}
+
 .action-sheet-group {
   margin-bottom: $action-sheet-ios-group-margin - 2;
   border-radius: $action-sheet-ios-border-radius;
diff --git a/ionic/components/action-sheet/test/basic/e2e.ts b/ionic/components/action-sheet/test/basic/e2e.ts
index 40d0efab03..cffef5a0be 100644
--- a/ionic/components/action-sheet/test/basic/e2e.ts
+++ b/ionic/components/action-sheet/test/basic/e2e.ts
@@ -4,5 +4,5 @@ it('should open action sheet', function() {
 });
 
 it('should close with backdrop click', function() {
-  element(by.css('backdrop')).click();
+  element(by.css('.backdrop')).click();
 });
diff --git a/ionic/util/util.scss b/ionic/util/util.scss
index 2534094725..cd70584b19 100755
--- a/ionic/util/util.scss
+++ b/ionic/util/util.scss
@@ -141,7 +141,7 @@ focus-ctrl {
 
 $backdrop-color:      #000 !default;
 
-backdrop {
+.backdrop {
   position: absolute;
   z-index: $z-index-backdrop;
   top: 0;

From 085671c84fc044301bc1bc1fe92fffd057a4792a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 3 Dec 2015 15:51:55 -0600
Subject: [PATCH 004/100] typing is hard

---
 ionic/config/bootstrap.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts
index 3a7a98619d..bb4c691bfe 100644
--- a/ionic/config/bootstrap.ts
+++ b/ionic/config/bootstrap.ts
@@ -103,7 +103,7 @@ function setupDom(window, document, config, platform, clickBlock, featureDetect)
 
   let linkEle = document.createElement('link');
   linkEle.setAttribute('href', '../../../css/ionic.' + mode + '.css');
-  linkEle.setAttribute('ref', 'stylesheet');
+  linkEle.setAttribute('rel', 'stylesheet');
   document.head.appendChild(linkEle);
 
   // touch devices should not use :hover CSS pseudo

From 04c79fab5cc26cb22b663e5bb3bd5ef69bba1010 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 3 Dec 2015 16:14:35 -0600
Subject: [PATCH 005/100] reset buttons

---
 ...utton-clear.scss => button-clear_OLD.scss} |   0
 .../{button-fab.scss => button-fab_OLD.scss}  |   0
 ...{button-icon.scss => button-icon_OLD.scss} |   0
 ...n-outline.scss => button-outline_OLD.scss} |   0
 ...{button-size.scss => button-size_OLD.scss} |   0
 ionic/components/button/button.scss           | 107 ------------
 ionic/components/button/button_OLD.scss       | 158 ++++++++++++++++++
 ionic/ionic.core.scss                         |  12 +-
 scripts/e2e/e2e.template.html                 |   2 +-
 9 files changed, 165 insertions(+), 114 deletions(-)
 rename ionic/components/button/{button-clear.scss => button-clear_OLD.scss} (100%)
 rename ionic/components/button/{button-fab.scss => button-fab_OLD.scss} (100%)
 rename ionic/components/button/{button-icon.scss => button-icon_OLD.scss} (100%)
 rename ionic/components/button/{button-outline.scss => button-outline_OLD.scss} (100%)
 rename ionic/components/button/{button-size.scss => button-size_OLD.scss} (100%)
 create mode 100644 ionic/components/button/button_OLD.scss

diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear_OLD.scss
similarity index 100%
rename from ionic/components/button/button-clear.scss
rename to ionic/components/button/button-clear_OLD.scss
diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab_OLD.scss
similarity index 100%
rename from ionic/components/button/button-fab.scss
rename to ionic/components/button/button-fab_OLD.scss
diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon_OLD.scss
similarity index 100%
rename from ionic/components/button/button-icon.scss
rename to ionic/components/button/button-icon_OLD.scss
diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline_OLD.scss
similarity index 100%
rename from ionic/components/button/button-outline.scss
rename to ionic/components/button/button-outline_OLD.scss
diff --git a/ionic/components/button/button-size.scss b/ionic/components/button/button-size_OLD.scss
similarity index 100%
rename from ionic/components/button/button-size.scss
rename to ionic/components/button/button-size_OLD.scss
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index e40c489e60..24f490093e 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -1,8 +1,5 @@
 @import "../../ionic.globals";
 
-// Button Variables
-// --------------------------------------------------
-
 $button-font-size:                1.6rem !default;
 $button-margin:                   0.4rem 0.2rem !default;
 $button-padding:                  0 1em !default;
@@ -18,9 +15,6 @@ $button-text-color:               inverse($button-color) !default;
 $button-hover-opacity:            0.8 !default;
 
 
-// Default Button
-// --------------------------------------------------
-
 button,
 [button] {
   position: relative;
@@ -29,17 +23,8 @@ button,
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
-
-  transition: background-color, opacity 100ms linear;
-
-  margin: $button-margin;
-  padding: $button-padding;
-  min-height: $button-height;
   line-height: 1;
 
-  border: 1px solid #ccc;
-  border: transparent;
-  border-radius: $button-border-radius;
 
   font-size: $button-font-size;
   font-family: inherit;
@@ -59,100 +44,8 @@ button,
   cursor: pointer;
   @include user-select-none();
   @include appearance(none);
-
-  background: $button-color;
-  color: $button-text-color;
-
-  &:hover:not(.disable-hover) {
-    opacity: $button-hover-opacity;
-    text-decoration: none;
-  }
-
-  &.activated {
-    opacity: 1;
-    background-color: $button-color-activated;
-  }
-
-
-  // Button Types
-  // --------------------------------------------------
-
-  &[block] {
-    display: flex;
-    clear: both;
-    margin-right: 0;
-    margin-left: 0;
-    width: 100%;
-
-    &:after {
-      clear: both;
-    }
-  }
-
-  &[full] {
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-    border-radius: 0;
-    border-right-width: 0;
-    border-left-width: 0;
-
-    &[outline] {
-      border-radius: 0;
-      border-right-width: 0;
-      border-left-width: 0;
-    }
-  }
-
-  &[round] {
-    border-radius: $button-round-border-radius;
-    padding: $button-round-padding;
-  }
-
-  &[disabled] {
-    opacity: 0.4;
-    cursor: default !important;
-    pointer-events: none;
-  }
-
 }
 
 a[button] {
   text-decoration: none;
 }
-
-[padding] > button[block]:first-child,
-[padding] > [button][block]:first-child {
-  margin-top: 0;
-}
-
-
-// Default Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-default($bg-color, $bg-color-activated, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  &.activated {
-    background-color: $bg-color-activated;
-  }
-}
-
-
-// Generate Default Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  button[#{$color-name}],
-  [button][#{$color-name}] {
-
-    $bg-color: $color-value;
-    $bg-color-activated: color-shade($bg-color);
-    $text-color: inverse($bg-color);
-    @include button-default($bg-color, $bg-color-activated, $text-color);
-
-  }
-
-}
diff --git a/ionic/components/button/button_OLD.scss b/ionic/components/button/button_OLD.scss
new file mode 100644
index 0000000000..e40c489e60
--- /dev/null
+++ b/ionic/components/button/button_OLD.scss
@@ -0,0 +1,158 @@
+@import "../../ionic.globals";
+
+// Button Variables
+// --------------------------------------------------
+
+$button-font-size:                1.6rem !default;
+$button-margin:                   0.4rem 0.2rem !default;
+$button-padding:                  0 1em !default;
+$button-height:                   2.8em !default;
+$button-border-radius:            4px !default;
+
+$button-round-padding:            0 2.6rem !default;
+$button-round-border-radius:      64px !default;
+
+$button-color:                    color(primary) !default;
+$button-color-activated:          color-shade($button-color) !default;
+$button-text-color:               inverse($button-color) !default;
+$button-hover-opacity:            0.8 !default;
+
+
+// Default Button
+// --------------------------------------------------
+
+button,
+[button] {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+
+  transition: background-color, opacity 100ms linear;
+
+  margin: $button-margin;
+  padding: $button-padding;
+  min-height: $button-height;
+  line-height: 1;
+
+  border: 1px solid #ccc;
+  border: transparent;
+  border-radius: $button-border-radius;
+
+  font-size: $button-font-size;
+  font-family: inherit;
+  font-variant: inherit;
+  font-style: inherit;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  text-align: center;
+  text-transform: none;
+
+  vertical-align: top; // the better option for most scenarios
+  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  cursor: pointer;
+  @include user-select-none();
+  @include appearance(none);
+
+  background: $button-color;
+  color: $button-text-color;
+
+  &:hover:not(.disable-hover) {
+    opacity: $button-hover-opacity;
+    text-decoration: none;
+  }
+
+  &.activated {
+    opacity: 1;
+    background-color: $button-color-activated;
+  }
+
+
+  // Button Types
+  // --------------------------------------------------
+
+  &[block] {
+    display: flex;
+    clear: both;
+    margin-right: 0;
+    margin-left: 0;
+    width: 100%;
+
+    &:after {
+      clear: both;
+    }
+  }
+
+  &[full] {
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+    border-radius: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+
+    &[outline] {
+      border-radius: 0;
+      border-right-width: 0;
+      border-left-width: 0;
+    }
+  }
+
+  &[round] {
+    border-radius: $button-round-border-radius;
+    padding: $button-round-padding;
+  }
+
+  &[disabled] {
+    opacity: 0.4;
+    cursor: default !important;
+    pointer-events: none;
+  }
+
+}
+
+a[button] {
+  text-decoration: none;
+}
+
+[padding] > button[block]:first-child,
+[padding] > [button][block]:first-child {
+  margin-top: 0;
+}
+
+
+// Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-default($bg-color, $bg-color-activated, $text-color) {
+  background-color: $bg-color;
+  color: $text-color;
+
+  &.activated {
+    background-color: $bg-color-activated;
+  }
+}
+
+
+// Generate Default Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors {
+
+  button[#{$color-name}],
+  [button][#{$color-name}] {
+
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $text-color: inverse($bg-color);
+    @include button-default($bg-color, $bg-color-activated, $text-color);
+
+  }
+
+}
diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss
index 7907347d6a..440938a695 100644
--- a/ionic/ionic.core.scss
+++ b/ionic/ionic.core.scss
@@ -12,12 +12,12 @@
   "components/toolbar/toolbar",
   "components/action-sheet/action-sheet",
   "components/badge/badge",
-  "components/button/button",
-  "components/button/button-clear",
-  "components/button/button-outline",
-  "components/button/button-size",
-  "components/button/button-icon",
-  "components/button/button-fab",
+  "components/button/button_OLD",
+  "components/button/button-clear_OLD",
+  "components/button/button-outline_OLD",
+  "components/button/button-size_OLD",
+  "components/button/button-icon_OLD",
+  "components/button/button-fab_OLD",
   "components/checkbox/checkbox",
   "components/icon/icon",
   "components/item/item",
diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html
index 01cd01b8ab..dedac953f5 100644
--- a/scripts/e2e/e2e.template.html
+++ b/scripts/e2e/e2e.template.html
@@ -4,7 +4,7 @@
   <title>Ionic E2E</title>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <link href="../../../css/ionic.css" rel="stylesheet">
+  <!-- <link href="../../../css/ionic.css" rel="stylesheet"> -->
 
   <script>
     if (!console.time) {

From 1871b46f8d1ae7f21dc5a63334107ab4e2ef3951 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Dec 2015 11:02:53 -0500
Subject: [PATCH 006/100] refactor(action-sheet): iOS changed action-sheet to
 use classes

references #689
---
 .../components/action-sheet/action-sheet.scss | 35 ++++------
 ionic/components/action-sheet/action-sheet.ts |  8 +--
 ionic/components/action-sheet/modes/ios.scss  | 47 ++++++-------
 ionic/components/action-sheet/modes/md.scss   | 66 +++++++++----------
 4 files changed, 71 insertions(+), 85 deletions(-)

diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss
index c73f8fb5af..1de53d58ac 100644
--- a/ionic/components/action-sheet/action-sheet.scss
+++ b/ionic/components/action-sheet/action-sheet.scss
@@ -41,25 +41,20 @@ ion-action-sheet {
 .action-sheet-container {
   width: auto;
   overflow: hidden;
+}
 
-  button {
-    display: block;
-    padding: 1px;
-    width: 100%;
-    margin: 0;
-    border-radius: 0;
-    border-color: $action-sheet-options-border-color;
-    background-color: transparent;
+.action-sheet-button {
+  display: block;
+  width: 100%;
+  margin: 0;
+  border-radius: 0;
+  border-color: $action-sheet-options-border-color;
+}
 
-    color: $action-sheet-options-text-color;
-    font-size: 21px;
-  }
-
-  button.activated {
-    box-shadow: none;
-    border-color: $action-sheet-options-border-color;
-    background: $action-sheet-options-background-active-color;
-  }
+.action-sheet-button.activated {
+  box-shadow: none;
+  border-color: $action-sheet-options-border-color;
+  background: $action-sheet-options-background-active-color;
 }
 
 .action-sheet-title {
@@ -73,11 +68,7 @@ ion-action-sheet {
   background-color: #fff;
   overflow: hidden;
 
-  button {
-    border-width: 1px 0px 0px 0px;
-  }
-
-  button:first-child:last-child {
+  .action-sheet-button:first-child:last-child {
     border-width: 0;
   }
 }
diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index 44b80682ea..068154b190 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -22,17 +22,17 @@ import {extend} from '../../util/util';
       '<div class="action-sheet-container">' +
         '<div class="action-sheet-group action-sheet-options">' +
           '<div class="action-sheet-title" *ng-if="d.titleText">{{d.titleText}}</div>' +
-          '<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-option disable-hover">' +
+          '<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-button action-sheet-option disable-hover">' +
             '<icon [name]="b.icon" *ng-if="b.icon"></icon> ' +
             '{{b.text}}' +
           '</button>' +
-          '<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-destructive disable-hover">' +
+          '<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-button action-sheet-destructive disable-hover">' +
             '<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon"></icon> ' +
             '{{d.destructiveText}}' +
           '</button>' +
         '</div>' +
-        '<div class="action-sheet-group action-sheet-cancel" *ng-if="d.cancelText">' +
-          '<button (click)="cancel()" class="disable-hover">' +
+        '<div class="action-sheet-group" *ng-if="d.cancelText">' +
+          '<button (click)="cancel()" class="action-sheet-button action-sheet-cancel disable-hover">' +
             '<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon"></icon> ' +
             '{{d.cancelText}}' +
           '</button>' +
diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index 352a889ff4..3bca8bafc5 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -26,29 +26,8 @@ ion-action-sheet {
   text-align: center;
 }
 
-ion-action-sheet button {
-  min-height: $action-sheet-ios-height;
-  padding: $action-sheet-ios-padding;
-
-  margin: 0;
-  border: 0;
-
-  background: transparent;
-
-  &.activated {
-    background: $action-sheet-ios-background-active-color;
-  }
-}
-
 .action-sheet-container {
   padding: 0 $action-sheet-ios-group-margin;
-
-  button.activated {
-    box-shadow: none;
-    border-color: $action-sheet-options-border-color;
-    color: $action-sheet-options-text-color;
-    background: $action-sheet-options-background-active-color;
-  }
 }
 
 .action-sheet-group {
@@ -70,8 +49,22 @@ ion-action-sheet button {
   border-bottom: 1px solid $action-sheet-ios-border-color;
 }
 
-.action-sheet-cancel button {
-  font-weight: bold;
+.action-sheet-button {
+  color: $action-sheet-ios-button-text-color;
+  min-height: $action-sheet-ios-height;
+  padding: $action-sheet-ios-padding;
+  font-size: 21px;
+  margin: 0;
+
+  background: transparent;
+
+  &.activated {
+    background: $action-sheet-ios-background-active-color;
+    box-shadow: none;
+    border-color: $action-sheet-options-border-color;
+    color: $action-sheet-options-text-color;
+    background: $action-sheet-options-background-active-color;
+  }
 }
 
 .action-sheet-title {
@@ -84,8 +77,6 @@ ion-action-sheet button {
 
 .action-sheet-option {
   font-size: $action-sheet-ios-button-font-size;
-  color: $action-sheet-ios-button-text-color;
-  border-radius: 0;
 }
 
 .action-sheet-title:first-child,
@@ -110,6 +101,10 @@ ion-action-sheet button {
   }
 }
 
-.action-sheet-destructive{
+.action-sheet-destructive {
   color: $action-sheet-ios-destructive-button-text-color;
 }
+
+.action-sheet-cancel  {
+  font-weight: bold;
+}
diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index 1680d4afc9..1f26ce8509 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -21,40 +21,18 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
 
 ion-action-sheet {
   margin: 0;
+
+  icon {
+    display: inline-block;
+    margin: $action-sheet-md-icon-margin;
+    min-width: 24px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: $action-sheet-md-icon-font-size;
+  }
 }
 
-.action-sheet-container {
-  margin: 0;
-}
-
-.action-sheet-title,
-.action-sheet-option,
-.action-sheet-destructive,
-.action-sheet-cancel button {
-  text-align: left;
-  border-color: transparent;
-  font-size: $action-sheet-md-button-font-size;
-  color: $action-sheet-md-button-text-color;
-  box-shadow: none;
-  text-transform: none;
-}
-
-ion-action-sheet icon {
-  display: inline-block;
-  margin: $action-sheet-md-icon-margin;
-  min-width: 24px;
-  text-align: center;
-  vertical-align: middle;
-  font-size: $action-sheet-md-icon-font-size;
-}
-
-.action-sheet-title {
-  padding: $action-sheet-md-title-padding;
-  font-size: $action-sheet-md-title-font-size;
-  color: $action-sheet-md-title-color;
-}
-
-ion-action-sheet button {
+.action-sheet-button {
   font-weight: normal;
   min-height: $action-sheet-md-height;
 
@@ -65,16 +43,38 @@ ion-action-sheet button {
   }
 }
 
+.action-sheet-container {
+  margin: 0;
+}
+
 .action-sheet-group {
   margin: 0;
   border-radius: 0;
   background-color: $action-sheet-md-background-color;
 
-  &:last-child button {
+  &:last-child .action-sheet-button {
     margin-bottom: 8px;
   }
 }
 
+.action-sheet-title {
+  padding: $action-sheet-md-title-padding;
+  font-size: $action-sheet-md-title-font-size;
+  color: $action-sheet-md-title-color;
+}
+
+.action-sheet-title,
+.action-sheet-option,
+.action-sheet-destructive,
+.action-sheet-cancel .action-sheet-button {
+  text-align: left;
+  border-color: transparent;
+  font-size: $action-sheet-md-button-font-size;
+  color: $action-sheet-md-button-text-color;
+  box-shadow: none;
+  text-transform: none;
+}
+
 .action-sheet-cancel {
   background-color: $action-sheet-md-background-color;
   width: auto;

From a965277ef3ae835c5182da752f49c4a3936a1c42 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Dec 2015 11:46:07 -0500
Subject: [PATCH 007/100] refactor(action-sheet): removed unused styles, fixed
 hairlines

references #689
---
 .../components/action-sheet/action-sheet.scss | 21 ++----
 ionic/components/action-sheet/modes/ios.scss  | 66 +++++++------------
 ionic/components/action-sheet/modes/md.scss   | 33 +++-------
 3 files changed, 38 insertions(+), 82 deletions(-)

diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss
index 1de53d58ac..ad7ae28ce7 100644
--- a/ionic/components/action-sheet/action-sheet.scss
+++ b/ionic/components/action-sheet/action-sheet.scss
@@ -49,28 +49,17 @@ ion-action-sheet {
   margin: 0;
   border-radius: 0;
   border-color: $action-sheet-options-border-color;
-}
 
-.action-sheet-button.activated {
-  box-shadow: none;
-  border-color: $action-sheet-options-border-color;
-  background: $action-sheet-options-background-active-color;
-}
-
-.action-sheet-title {
-  padding: 10px;
-  color: #8f8f8f;
-  text-align: center;
-  font-size: 13px;
+  &.activated {
+    box-shadow: none;
+    border-color: $action-sheet-options-border-color;
+    background: $action-sheet-options-background-active-color;
+  }
 }
 
 .action-sheet-group {
   background-color: #fff;
   overflow: hidden;
-
-  .action-sheet-button:first-child:last-child {
-    border-width: 0;
-  }
 }
 
 .action-sheet-options {
diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index 3bca8bafc5..d809680ee2 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -15,11 +15,11 @@ $action-sheet-ios-title-color:                    #5f5f5f !default;
 $action-sheet-ios-title-font-size:                1.2rem !default;
 
 $action-sheet-ios-button-text-color:              #007aff !default;
-$action-sheet-ios-button-font-size:               2rem !default;
+$action-sheet-ios-option-font-size:               2rem !default;
+$action-sheet-ios-button-font-size:               21px !default;
 $action-sheet-ios-background-active-color:        #e9e9e9 !default;
 
 $action-sheet-ios-destructive-button-text-color:  #f53d3d !default;
-$action-sheet-ios-icon-font-size:                 1.4em !default;
 
 
 ion-action-sheet {
@@ -33,19 +33,23 @@ ion-action-sheet {
 .action-sheet-group {
   margin-bottom: $action-sheet-ios-group-margin - 2;
   border-radius: $action-sheet-ios-border-radius;
+
+  &:last-child {
+    margin-bottom: $action-sheet-ios-group-margin;
+  }
 }
 
-.action-sheet-group:last-child {
-  margin-bottom: $action-sheet-ios-group-margin;
+.action-sheet-title {
+  padding: 2rem;
+  font-size: $action-sheet-ios-title-font-size;
+  font-weight: 500;
+  color: $action-sheet-ios-title-color;
+  border-radius: 0;
+  text-align: center;
 }
 
 .action-sheet-title,
 .action-sheet-option {
-  min-height: $action-sheet-ios-height;
-
-  background: $action-sheet-ios-background-color;
-  font-weight: 400;
-
   border-bottom: 1px solid $action-sheet-ios-border-color;
 }
 
@@ -53,8 +57,7 @@ ion-action-sheet {
   color: $action-sheet-ios-button-text-color;
   min-height: $action-sheet-ios-height;
   padding: $action-sheet-ios-padding;
-  font-size: 21px;
-  margin: 0;
+  font-size: $action-sheet-ios-button-font-size;
 
   background: transparent;
 
@@ -67,44 +70,21 @@ ion-action-sheet {
   }
 }
 
-.action-sheet-title {
-  padding: 2rem;
-  font-size: $action-sheet-ios-title-font-size;
-  font-weight: 500;
-  color: $action-sheet-ios-title-color;
-  border-radius: 0;
-}
-
 .action-sheet-option {
-  font-size: $action-sheet-ios-button-font-size;
-}
-
-.action-sheet-title:first-child,
-.action-sheet-button:first-child,
-.action-sheet-group button:first-child {
-  border-top-left-radius: $action-sheet-ios-border-radius;
-  border-top-right-radius: $action-sheet-ios-border-radius;
-}
-
-.action-sheet-title:last-child,
-.action-sheet-button:last-child,
-.action-sheet-group button:last-child {
-  border-bottom-left-radius: $action-sheet-ios-border-radius;
-  border-bottom-right-radius: $action-sheet-ios-border-radius;
-}
-
-
-&.hairlines .action-sheet {
-  .action-sheet-title,
-  .action-sheet-option {
-    border-bottom-width: 0.55px;
-  }
+  font-size: $action-sheet-ios-option-font-size;
 }
 
 .action-sheet-destructive {
   color: $action-sheet-ios-destructive-button-text-color;
 }
 
-.action-sheet-cancel  {
+.action-sheet-cancel {
   font-weight: bold;
 }
+
+&.hairlines {
+  .action-sheet-title,
+  .action-sheet-option {
+    border-bottom-width: 0.55px;
+  }
+}
diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index 1f26ce8509..923efbc38f 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -20,7 +20,6 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
 
 
 ion-action-sheet {
-  margin: 0;
 
   icon {
     display: inline-block;
@@ -32,9 +31,19 @@ ion-action-sheet {
   }
 }
 
+.action-sheet-title {
+  padding: $action-sheet-md-title-padding;
+  font-size: $action-sheet-md-title-font-size;
+  color: $action-sheet-md-title-color;
+  text-align: left;
+}
+
 .action-sheet-button {
+  background-color: transparent;
   font-weight: normal;
   min-height: $action-sheet-md-height;
+  color: $action-sheet-md-button-text-color;
+  text-align: left;
 
   &.activated {
     background: $action-sheet-md-background-active-color;
@@ -43,10 +52,6 @@ ion-action-sheet {
   }
 }
 
-.action-sheet-container {
-  margin: 0;
-}
-
 .action-sheet-group {
   margin: 0;
   border-radius: 0;
@@ -57,24 +62,6 @@ ion-action-sheet {
   }
 }
 
-.action-sheet-title {
-  padding: $action-sheet-md-title-padding;
-  font-size: $action-sheet-md-title-font-size;
-  color: $action-sheet-md-title-color;
-}
-
-.action-sheet-title,
-.action-sheet-option,
-.action-sheet-destructive,
-.action-sheet-cancel .action-sheet-button {
-  text-align: left;
-  border-color: transparent;
-  font-size: $action-sheet-md-button-font-size;
-  color: $action-sheet-md-button-text-color;
-  box-shadow: none;
-  text-transform: none;
-}
-
 .action-sheet-cancel {
   background-color: $action-sheet-md-background-color;
   width: auto;

From 9b1e0dc2911a36d2c41758d4f75a3857a35116a6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Dec 2015 12:54:36 -0500
Subject: [PATCH 008/100] refactor(action-sheet): adding a class to icons to
 style with

references #689
---
 ionic/components/action-sheet/action-sheet.ts |  6 +++---
 ionic/components/action-sheet/modes/md.scss   | 21 ++++++++-----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index 068154b190..e99fcf16a4 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -23,17 +23,17 @@ import {extend} from '../../util/util';
         '<div class="action-sheet-group action-sheet-options">' +
           '<div class="action-sheet-title" *ng-if="d.titleText">{{d.titleText}}</div>' +
           '<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-button action-sheet-option disable-hover">' +
-            '<icon [name]="b.icon" *ng-if="b.icon"></icon> ' +
+            '<icon [name]="b.icon" *ng-if="b.icon" class="action-sheet-icon"></icon> ' +
             '{{b.text}}' +
           '</button>' +
           '<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-button action-sheet-destructive disable-hover">' +
-            '<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon"></icon> ' +
+            '<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon" class="action-sheet-icon"></icon> ' +
             '{{d.destructiveText}}' +
           '</button>' +
         '</div>' +
         '<div class="action-sheet-group" *ng-if="d.cancelText">' +
           '<button (click)="cancel()" class="action-sheet-button action-sheet-cancel disable-hover">' +
-            '<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon"></icon> ' +
+            '<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon" class="action-sheet-icon"></icon> ' +
             '{{d.cancelText}}' +
           '</button>' +
         '</div>' +
diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index 923efbc38f..935ffb2009 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -19,18 +19,6 @@ $action-sheet-md-icon-font-size:           2.4rem !default;
 $action-sheet-md-icon-margin:              0 28px 0 0 !default;
 
 
-ion-action-sheet {
-
-  icon {
-    display: inline-block;
-    margin: $action-sheet-md-icon-margin;
-    min-width: 24px;
-    text-align: center;
-    vertical-align: middle;
-    font-size: $action-sheet-md-icon-font-size;
-  }
-}
-
 .action-sheet-title {
   padding: $action-sheet-md-title-padding;
   font-size: $action-sheet-md-title-font-size;
@@ -52,6 +40,15 @@ ion-action-sheet {
   }
 }
 
+.action-sheet-icon {
+  display: inline-block;
+  margin: $action-sheet-md-icon-margin;
+  min-width: 24px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: $action-sheet-md-icon-font-size;
+}
+
 .action-sheet-group {
   margin: 0;
   border-radius: 0;

From bc317f01237a145a7a6e01364c9fa1dfa4bd1176 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Dec 2015 13:36:17 -0500
Subject: [PATCH 009/100] refactor(badge): changed the element name for badges
 and added colors

references #689
---
 ionic/components/badge/badge.scss | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/ionic/components/badge/badge.scss b/ionic/components/badge/badge.scss
index b793f186d7..af59078381 100644
--- a/ionic/components/badge/badge.scss
+++ b/ionic/components/badge/badge.scss
@@ -8,7 +8,7 @@ $badge-font-weight:               bold !default;
 $badge-border-radius:             10px !default;
 
 
-item-badge {
+ion-badge {
   display: inline-block;
 
   padding: 3px 8px;
@@ -29,3 +29,15 @@ item-badge {
     display: none;
   }
 }
+
+// Generate Default Badge Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors {
+
+  .badge-#{$color-name} {
+    background-color: $color-value;
+    color: inverse($color-value);
+  }
+
+}

From 03f9b723b790b835b90ce1c9cc97168db43b3507 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Dec 2015 13:36:33 -0500
Subject: [PATCH 010/100] test(badge): added badge tests and updated item test
 to reflect new css names

references #689
---
 ionic/components/badge/test/basic/index.ts  | 10 ++++
 ionic/components/badge/test/basic/main.html | 64 +++++++++++++++++++++
 ionic/components/item/test/icons/main.html  |  4 +-
 3 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 ionic/components/badge/test/basic/index.ts
 create mode 100644 ionic/components/badge/test/basic/main.html

diff --git a/ionic/components/badge/test/basic/index.ts b/ionic/components/badge/test/basic/index.ts
new file mode 100644
index 0000000000..2dd534c468
--- /dev/null
+++ b/ionic/components/badge/test/basic/index.ts
@@ -0,0 +1,10 @@
+import {App, IonicApp} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+  }
+}
diff --git a/ionic/components/badge/test/basic/main.html b/ionic/components/badge/test/basic/main.html
new file mode 100644
index 0000000000..1fc4157054
--- /dev/null
+++ b/ionic/components/badge/test/basic/main.html
@@ -0,0 +1,64 @@
+<ion-toolbar>
+  <ion-title>Badges</ion-title>
+</ion-toolbar>
+
+<ion-content>
+  <ion-list>
+    <ion-header>
+      Badges Right
+    </ion-header>
+    <ion-item>
+      Default Badge
+      <ion-badge item-right>99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Primary Badge
+      <ion-badge item-right class="badge-primary">99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Secondary Badge
+      <ion-badge item-right class="badge-secondary">99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Danger Badge
+      <ion-badge item-right class="badge-danger">99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Light Badge
+      <ion-badge item-right class="badge-light">99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Dark Badge
+      <ion-badge item-right class="badge-dark">99</ion-badge>
+    </ion-item>
+  </ion-list>
+  <ion-list>
+    <ion-header>
+      Badges Left
+    </ion-header>
+    <ion-item>
+      Default Badge
+      <ion-badge item-left>99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Primary Badge
+      <ion-badge item-left class="badge-primary">99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Secondary Badge
+      <ion-badge item-left class="badge-secondary">99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Danger Badge
+      <ion-badge item-left class="badge-danger">99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Light Badge
+      <ion-badge item-left class="badge-light">99</ion-badge>
+    </ion-item>
+    <ion-item>
+      Dark Badge
+      <ion-badge item-left class="badge-dark">99</ion-badge>
+    </ion-item>
+  </ion-list>
+</ion-content>
diff --git a/ionic/components/item/test/icons/main.html b/ionic/components/item/test/icons/main.html
index e98b67a447..facaaf4b36 100644
--- a/ionic/components/item/test/icons/main.html
+++ b/ionic/components/item/test/icons/main.html
@@ -59,12 +59,12 @@
 
   <button ion-item>
     Red Balloons
-    <item-badge item-right>99</item-badge>
+    <ion-badge item-right>99</ion-badge>
   </button>
 
   <ion-item>
     Problems
-    <item-badge item-right>99</item-badge>
+    <ion-badge item-right>99</ion-badge>
   </ion-item>
 
 </ion-content>

From c5af9a608e5ae0e781b5e9795e88532e2b6a4bbe Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Dec 2015 13:40:28 -0500
Subject: [PATCH 011/100] derp: ion-header doesn't exist

---
 ionic/components/badge/test/basic/main.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ionic/components/badge/test/basic/main.html b/ionic/components/badge/test/basic/main.html
index 1fc4157054..80548bc1a2 100644
--- a/ionic/components/badge/test/basic/main.html
+++ b/ionic/components/badge/test/basic/main.html
@@ -4,9 +4,9 @@
 
 <ion-content>
   <ion-list>
-    <ion-header>
+    <ion-list-header>
       Badges Right
-    </ion-header>
+    </ion-list-header>
     <ion-item>
       Default Badge
       <ion-badge item-right>99</ion-badge>
@@ -33,9 +33,9 @@
     </ion-item>
   </ion-list>
   <ion-list>
-    <ion-header>
+    <ion-list-header>
       Badges Left
-    </ion-header>
+    </ion-list-header>
     <ion-item>
       Default Badge
       <ion-badge item-left>99</ion-badge>

From d833e747cb06573612269ed2c41746fe2db15527 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 13:07:37 -0600
Subject: [PATCH 012/100] refactor(): move core component imports to mode
 component files

---
 ionic/components/action-sheet/modes/ios.scss  |  1 +
 ionic/components/action-sheet/modes/md.scss   |  1 +
 ...utton-clear_OLD.scss => button-clear.scss} |  0
 .../{button-fab_OLD.scss => button-fab.scss}  |  0
 ...{button-icon_OLD.scss => button-icon.scss} |  0
 ...n-outline_OLD.scss => button-outline.scss} |  0
 ...{button-size_OLD.scss => button-size.scss} |  0
 ionic/components/button/modes/ios.scss        |  9 ++++
 ionic/components/button/modes/md.scss         |  7 +++
 ionic/components/card/modes/ios.scss          |  1 +
 ionic/components/card/modes/md.scss           |  1 +
 ionic/components/checkbox/modes/ios.scss      |  1 +
 ionic/components/checkbox/modes/md.scss       |  1 +
 ionic/components/icon/modes/ios.scss          |  1 +
 ionic/components/item/modes/ios.scss          |  1 +
 ionic/components/item/modes/md.scss           |  1 +
 ionic/components/list/modes/ios.scss          |  1 +
 ionic/components/list/modes/md.scss           |  1 +
 ionic/components/menu/menu-types.scss         | 50 -------------------
 ionic/components/menu/menu.scss               | 50 +++++++++++++++++++
 ionic/components/navbar/modes/ios.scss        | 15 ------
 ionic/components/navbar/modes/md.scss         | 24 ---------
 ionic/components/navbar/navbar.scss           | 23 ---------
 ionic/components/popup/modes/ios.scss         |  1 +
 ionic/components/popup/modes/md.scss          |  1 +
 ionic/components/radio/modes/ios.scss         |  1 +
 ionic/components/radio/modes/md.scss          |  1 +
 ionic/components/searchbar/modes/ios.scss     |  3 +-
 ionic/components/searchbar/modes/md.scss      |  3 +-
 ionic/components/segment/modes/ios.scss       | 10 ++--
 ionic/components/segment/modes/md.scss        |  1 +
 ionic/components/switch/modes/ios.scss        |  1 +
 ionic/components/switch/modes/md.scss         |  1 +
 ionic/components/tabs/modes/ios.scss          |  1 +
 ionic/components/tabs/modes/md.scss           |  1 +
 ionic/components/text-input/modes/ios.scss    |  2 +
 ionic/components/text-input/modes/md.scss     |  2 +
 ionic/components/toolbar/modes/ios.scss       | 15 ++++++
 ionic/components/toolbar/modes/md.scss        | 24 +++++++++
 ionic/components/toolbar/toolbar.scss         | 22 ++++++++
 ionic/ionic.core.scss                         | 31 +-----------
 ionic/ionic.ios_OLD.scss                      | 23 ---------
 ionic/ionic.md.scss                           |  3 +-
 ionic/ionic.md_OLD.scss                       | 22 --------
 ionic/ionic.scss                              | 22 --------
 45 files changed, 165 insertions(+), 215 deletions(-)
 rename ionic/components/button/{button-clear_OLD.scss => button-clear.scss} (100%)
 rename ionic/components/button/{button-fab_OLD.scss => button-fab.scss} (100%)
 rename ionic/components/button/{button-icon_OLD.scss => button-icon.scss} (100%)
 rename ionic/components/button/{button-outline_OLD.scss => button-outline.scss} (100%)
 rename ionic/components/button/{button-size_OLD.scss => button-size.scss} (100%)
 delete mode 100644 ionic/components/menu/menu-types.scss
 delete mode 100644 ionic/components/navbar/modes/ios.scss
 delete mode 100644 ionic/components/navbar/modes/md.scss
 delete mode 100644 ionic/components/navbar/navbar.scss
 delete mode 100644 ionic/ionic.ios_OLD.scss
 delete mode 100644 ionic/ionic.md_OLD.scss

diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index d809680ee2..d82136fd4c 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../action-sheet";
 
 // iOS Action Sheet
 // --------------------------------------------------
diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index 935ffb2009..d14e9d4e3b 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../action-sheet";
 
 // Material Design Action Sheet
 // --------------------------------------------------
diff --git a/ionic/components/button/button-clear_OLD.scss b/ionic/components/button/button-clear.scss
similarity index 100%
rename from ionic/components/button/button-clear_OLD.scss
rename to ionic/components/button/button-clear.scss
diff --git a/ionic/components/button/button-fab_OLD.scss b/ionic/components/button/button-fab.scss
similarity index 100%
rename from ionic/components/button/button-fab_OLD.scss
rename to ionic/components/button/button-fab.scss
diff --git a/ionic/components/button/button-icon_OLD.scss b/ionic/components/button/button-icon.scss
similarity index 100%
rename from ionic/components/button/button-icon_OLD.scss
rename to ionic/components/button/button-icon.scss
diff --git a/ionic/components/button/button-outline_OLD.scss b/ionic/components/button/button-outline.scss
similarity index 100%
rename from ionic/components/button/button-outline_OLD.scss
rename to ionic/components/button/button-outline.scss
diff --git a/ionic/components/button/button-size_OLD.scss b/ionic/components/button/button-size.scss
similarity index 100%
rename from ionic/components/button/button-size_OLD.scss
rename to ionic/components/button/button-size.scss
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index b8a5f1c3d4..962fd008f5 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -1,4 +1,13 @@
 @import "../../../ionic.globals";
+@import "../button";
+@import "../button-clear";
+@import "../button-fab";
+@import "../button-icon";
+@import "../button-outline";
+@import "../button-size";
+
+// iOS Button (largely the core button styles)
+// --------------------------------------------------
 
 button {
   &[block] {
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index a519d05bc5..28bef83dc6 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -1,4 +1,10 @@
 @import "../../../ionic.globals";
+@import "../button";
+@import "../button-clear";
+@import "../button-fab";
+@import "../button-icon";
+@import "../button-outline";
+@import "../button-size";
 
 // Material Design Button
 // --------------------------------------------------
@@ -19,6 +25,7 @@ $button-md-clear-active-background-color:  rgba(158, 158, 158, 0.2) !default;
 $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
 
+
 button,
 [button] {
   border-radius: $button-md-border-radius;
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index 4b81564b87..7e395a9a85 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../card";
 
 // iOS Card
 // --------------------------------------------------
diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss
index 9a28e1eef6..5b2c07324e 100644
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../card";
 
 // Material Design Card
 // --------------------------------------------------
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index a0d45a1a9f..e02c675d24 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../checkbox";
 
 // iOS Checkbox Structure
 // --------------------------------------------------
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index 41ea66feb3..5b2696e864 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../checkbox";
 
 // Material Design Checkbox
 // --------------------------------------------------
diff --git a/ionic/components/icon/modes/ios.scss b/ionic/components/icon/modes/ios.scss
index 32447b95a8..1603ea117e 100644
--- a/ionic/components/icon/modes/ios.scss
+++ b/ionic/components/icon/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../icon";
 
 // iOS Icon
 // --------------------------------------------------
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index bc3ca3d54c..8ff1df159c 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../item";
 
 // iOS Item
 // --------------------------------------------------
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 425f278248..01deb4125b 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../item";
 
 // Material Design Item
 // --------------------------------------------------
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index 3a00901946..3b6fb4f8ab 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../list";
 
 // iOS List
 // --------------------------------------------------
diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss
index 174ad3b1b1..3b8155dc3e 100644
--- a/ionic/components/list/modes/md.scss
+++ b/ionic/components/list/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../list";
 
 // Material Design List
 // --------------------------------------------------
diff --git a/ionic/components/menu/menu-types.scss b/ionic/components/menu/menu-types.scss
deleted file mode 100644
index ca9dab6504..0000000000
--- a/ionic/components/menu/menu-types.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "../../ionic.globals";
-
-// Menu Reveal
-// --------------------------------------------------
-// The content slides over to reveal the menu underneath.
-// The menu itself, which is under the content, does not move.
-
-ion-menu[type=reveal].show-menu {
-  transform: translate3d(0px, 0px, 0px);
-}
-
-.menu-content-reveal {
-  box-shadow: $menu-shadow;
-}
-
-.menu-content-push {
-  box-shadow: $menu-shadow;
-}
-
-
-// Menu Overlay
-// --------------------------------------------------
-// The menu slides over the content. The content
-// itself, which is under the menu, does not move.
-
-ion-menu[type=overlay] {
-  z-index: $z-index-menu-overlay;
-  box-shadow: $menu-shadow;
-  left: -8px; // make up for the box-shadow hanging over on the left
-
-  backdrop {
-    display: block;
-    transform: translate3d(-9999px, 0px, 0px);
-    opacity: 0.01;
-    left: -3000px;
-    width: 6000px;
-
-    &.show-backdrop {
-      transform: translate3d(0px, 0px, 0px);
-    }
-  }
-}
-
-ion-menu[type=overlay][side=right] {
-  left: 8px;
-}
-
-ion-menu[type=push][side=right] {
-  left: 0px;
-}
diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss
index acf4948532..d213016271 100644
--- a/ionic/components/menu/menu.scss
+++ b/ionic/components/menu/menu.scss
@@ -57,3 +57,53 @@ ion-menu backdrop {
   }
 
 }
+
+
+// Menu Reveal
+// --------------------------------------------------
+// The content slides over to reveal the menu underneath.
+// The menu itself, which is under the content, does not move.
+
+ion-menu[type=reveal].show-menu {
+  transform: translate3d(0px, 0px, 0px);
+}
+
+.menu-content-reveal {
+  box-shadow: $menu-shadow;
+}
+
+.menu-content-push {
+  box-shadow: $menu-shadow;
+}
+
+
+// Menu Overlay
+// --------------------------------------------------
+// The menu slides over the content. The content
+// itself, which is under the menu, does not move.
+
+ion-menu[type=overlay] {
+  z-index: $z-index-menu-overlay;
+  box-shadow: $menu-shadow;
+  left: -8px; // make up for the box-shadow hanging over on the left
+
+  backdrop {
+    display: block;
+    transform: translate3d(-9999px, 0px, 0px);
+    opacity: 0.01;
+    left: -3000px;
+    width: 6000px;
+
+    &.show-backdrop {
+      transform: translate3d(0px, 0px, 0px);
+    }
+  }
+}
+
+ion-menu[type=overlay][side=right] {
+  left: 8px;
+}
+
+ion-menu[type=push][side=right] {
+  left: 0px;
+}
diff --git a/ionic/components/navbar/modes/ios.scss b/ionic/components/navbar/modes/ios.scss
deleted file mode 100644
index 4a7fe89e62..0000000000
--- a/ionic/components/navbar/modes/ios.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "../../../ionic.globals";
-
-// iOS Navbar
-// --------------------------------------------------
-
-$navbar-ios-height:                        4.4rem !default;
-
-
-ion-navbar-section {
-  min-height: $navbar-ios-height;
-}
-
-.back-button {
-  transform: translateZ(0px);
-}
diff --git a/ionic/components/navbar/modes/md.scss b/ionic/components/navbar/modes/md.scss
deleted file mode 100644
index a89b786858..0000000000
--- a/ionic/components/navbar/modes/md.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import "../../../ionic.globals";
-
-// Material Design Navbar
-// --------------------------------------------------
-
-$navbar-md-height:                  5.6rem !default;
-
-
-ion-navbar-section {
-  min-height: $navbar-md-height;
-}
-
-.toolbar .back-button {
-  margin: 0 0 0 12px;
-  box-shadow: none;
-}
-
-.toolbar .back-button-icon {
-  margin: 0;
-  min-width: 44px;
-  font-size: 2.4rem;
-  font-weight: normal;
-  text-align: left;
-}
diff --git a/ionic/components/navbar/navbar.scss b/ionic/components/navbar/navbar.scss
deleted file mode 100644
index 07bd13bc53..0000000000
--- a/ionic/components/navbar/navbar.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import "../../ionic.globals";
-
-// Navbar
-// --------------------------------------------------
-
-
-ion-navbar.toolbar {
-  display: flex;
-}
-
-.back-button {
-  order: map-get($toolbar-order, backButton);
-
-  display: none;
-  &.show-back-button {
-    display: flex;
-  }
-}
-
-.back-button-text {
-  display: flex;
-  align-items: center;
-}
diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss
index 1d5dc5a112..3a3fc47773 100644
--- a/ionic/components/popup/modes/ios.scss
+++ b/ionic/components/popup/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../popup";
 
 // iOS Popups
 // --------------------------------------------------
diff --git a/ionic/components/popup/modes/md.scss b/ionic/components/popup/modes/md.scss
index 3fe71e26fc..73db6d7187 100644
--- a/ionic/components/popup/modes/md.scss
+++ b/ionic/components/popup/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../popup";
 
 // Material Design Popups
 // --------------------------------------------------
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 8ac6c73e1a..d13460e8ea 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../radio";
 
 // iOS Radio
 // --------------------------------------------------
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index 6da6f46c97..c6e301d2ff 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../radio";
 
 // Material Design Radio
 // --------------------------------------------------
diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index ff2a013db6..a9f3ec8467 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -1,6 +1,7 @@
 @import "../../../ionic.globals";
+@import "../searchbar";
 
-// iOS Search Bar
+// iOS Searchbar
 // --------------------------------------------------
 
 $searchbar-ios-padding-top-bottom:       0 !default;
diff --git a/ionic/components/searchbar/modes/md.scss b/ionic/components/searchbar/modes/md.scss
index c897b70091..201d17706c 100644
--- a/ionic/components/searchbar/modes/md.scss
+++ b/ionic/components/searchbar/modes/md.scss
@@ -1,6 +1,7 @@
 @import "../../../ionic.globals";
+@import "../searchbar";
 
-// Material Design Search Bar
+// Material Design Searchbar
 // --------------------------------------------------
 
 $searchbar-md-padding:                  8px !default;
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index e455aac04d..333a04d118 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../segment";
 
 // iOS Segment
 // --------------------------------------------------
@@ -8,6 +9,7 @@ $segment-button-ios-min-height:               3.0rem !default;
 $segment-button-ios-line-height:              3.0rem !default;
 $segment-button-ios-bg-color:                 transparent !default;
 $segment-button-ios-font-size:                1.3rem !default;
+$segment-button-ios-border-radius:            4px !default;
 
 $segment-button-ios-bg-color-activated:       color(primary) !default;
 $segment-button-ios-text-color:               inverse($segment-button-ios-bg-color-activated) !default;
@@ -49,17 +51,17 @@ ion-segment {
     }
 
     &:first-of-type {
-      border-radius: $button-border-radius 0px 0px $button-border-radius;
+      border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
       margin-right: 0;
     }
 
     &:not(:first-of-type) {
-      border-left-width: 0px;
+      border-left-width: 0;
     }
 
     &:last-of-type {
-      border-left-width: 0px;
-      border-radius: 0px $button-border-radius $button-border-radius 0px;
+      border-left-width: 0;
+      border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
       margin-left: 0;
     }
   }
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index 958a3b041d..80a6931d7a 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../segment";
 
 // iOS Segment
 // --------------------------------------------------
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index 2a504d56f1..9c1005049b 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../switch";
 
 // iOS Switch
 // --------------------------------------------------
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index 0d500ae0aa..6689b22e4a 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../switch";
 
 // Material Design Switch
 // --------------------------------------------------
diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss
index b4613ec8d0..1c08e2eeed 100644
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../tabs";
 
 // iOS Tabs
 // --------------------------------------------------
diff --git a/ionic/components/tabs/modes/md.scss b/ionic/components/tabs/modes/md.scss
index 2c020760fa..790b2e55e8 100644
--- a/ionic/components/tabs/modes/md.scss
+++ b/ionic/components/tabs/modes/md.scss
@@ -1,4 +1,5 @@
 @import "../../../ionic.globals";
+@import "../tabs";
 
 // Material Design Tabs
 // --------------------------------------------------
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
index a9b1ad727c..b6ef39cfe5 100644
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -1,4 +1,6 @@
 @import "../../../ionic.globals";
+@import "../label";
+@import "../text-input";
 
 // iOS Text Input
 // --------------------------------------------------
diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss
index 193e78fa60..ee210862e1 100644
--- a/ionic/components/text-input/modes/md.scss
+++ b/ionic/components/text-input/modes/md.scss
@@ -1,4 +1,6 @@
 @import "../../../ionic.globals";
+@import "../label";
+@import "../text-input";
 
 // Material Design Text Input
 // --------------------------------------------------
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 83da7c6293..96b46ca775 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -109,3 +109,18 @@ ion-nav-items[secondary] {
 &.hairlines .toolbar toolbar-background {
   border-bottom-width: 0.55px;
 }
+
+
+// iOS Navbar
+// --------------------------------------------------
+
+$navbar-ios-height:                        4.4rem !default;
+
+
+ion-navbar-section {
+  min-height: $navbar-ios-height;
+}
+
+.back-button {
+  transform: translateZ(0px);
+}
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 7568c17a5f..418118debf 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -62,3 +62,27 @@ ion-title {
 ion-nav-items[primary] button:first-child {
   margin-left: 0;
 }
+
+
+// Material Design Navbar
+// --------------------------------------------------
+
+$navbar-md-height:                  5.6rem !default;
+
+
+ion-navbar-section {
+  min-height: $navbar-md-height;
+}
+
+.toolbar .back-button {
+  margin: 0 0 0 12px;
+  box-shadow: none;
+}
+
+.toolbar .back-button-icon {
+  margin: 0;
+  min-width: 44px;
+  font-size: 2.4rem;
+  font-weight: normal;
+  text-align: left;
+}
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index d83b7d2c11..6c090b272d 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -130,6 +130,28 @@ ion-nav-items,
   z-index: 99;
 }
 
+// Navbar
+// --------------------------------------------------
+
+ion-navbar.toolbar {
+  display: flex;
+}
+
+.back-button {
+  order: map-get($toolbar-order, backButton);
+
+  display: none;
+  &.show-back-button {
+    display: flex;
+  }
+}
+
+.back-button-text {
+  display: flex;
+  align-items: center;
+}
+
+
 
 // Toolbar Color Generation
 // --------------------------------------------------
diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss
index 440938a695..57b01359dc 100644
--- a/ionic/ionic.core.scss
+++ b/ionic/ionic.core.scss
@@ -9,39 +9,12 @@
 
 // Core Components
 @import
-  "components/toolbar/toolbar",
-  "components/action-sheet/action-sheet",
-  "components/badge/badge",
-  "components/button/button_OLD",
-  "components/button/button-clear_OLD",
-  "components/button/button-outline_OLD",
-  "components/button/button-size_OLD",
-  "components/button/button-icon_OLD",
-  "components/button/button-fab_OLD",
-  "components/checkbox/checkbox",
-  "components/icon/icon",
-  "components/item/item",
-  "components/item/item-media",
-  "components/item/item-sliding",
   "components/grid/grid",
-  "components/text-input/text-input",
-  "components/text-input/label",
-  "components/list/list",
-  "components/card/card",
+  "components/icon/icon",
   "components/menu/menu",
-  "components/menu/menu-types",
   "components/modal/modal",
-  "components/navbar/navbar",
-  "components/popup/popup",
-  "components/slides/slides",
-  "components/radio/radio",
   "components/scroll/scroll",
-  "components/scroll/pull-to-refresh",
-  "components/scroll/scroll",
-  "components/searchbar/searchbar",
-  "components/segment/segment",
-  "components/switch/switch",
-  "components/tabs/tabs";
+  "components/slides/slides";
 
 
 // Ionicons
diff --git a/ionic/ionic.ios_OLD.scss b/ionic/ionic.ios_OLD.scss
deleted file mode 100644
index 862310d0d4..0000000000
--- a/ionic/ionic.ios_OLD.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*! Ionic: iOS */
-
-
-// iOS Components
-@import
-  "components/app/modes/ios",
-  "components/button/modes/ios",
-  "components/icon/modes/ios",
-  "components/item/modes/ios",
-  "components/toolbar/modes/ios",
-  "components/card/modes/ios",
-  "components/content/modes/ios",
-  "components/list/modes/ios",
-  "components/text-input/modes/ios",
-  "components/navbar/modes/ios",
-  "components/popup/modes/ios",
-  "components/checkbox/modes/ios",
-  "components/radio/modes/ios",
-  "components/searchbar/modes/ios",
-  "components/segment/modes/ios",
-  "components/switch/modes/ios",
-  "components/tabs/modes/ios",
-  "platform/cordova-ios";
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index c20ede7a79..753235b7fc 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -8,4 +8,5 @@
 
 // Material Design Components
 @import
-  "components/action-sheet/modes/md";
+  "components/action-sheet/modes/md",
+  "components/tap-click/ripple";
diff --git a/ionic/ionic.md_OLD.scss b/ionic/ionic.md_OLD.scss
deleted file mode 100644
index 1c52d2f105..0000000000
--- a/ionic/ionic.md_OLD.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*! Ionic: Material Design */
-
-
-// Material Design Components
-@import
-  "components/app/modes/md",
-  "components/toolbar/modes/md",
-  "components/button/modes/md",
-  "components/content/modes/md",
-  "components/item/modes/md",
-  "components/list/modes/md",
-  "components/card/modes/md",
-  "components/checkbox/modes/md",
-  "components/text-input/modes/md",
-  "components/navbar/modes/md",
-  "components/popup/modes/md",
-  "components/radio/modes/md",
-  "components/searchbar/modes/md",
-  "components/segment/modes/md",
-  "components/switch/modes/md",
-  "components/tabs/modes/md",
-  "components/tap-click/ripple";
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index 858799a586..9040d58ec7 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -3,25 +3,3 @@
 
 // Core Components
 @import "ionic.core";
-
-
-// iOS Components
-.ios {
-  @import "ionic.ios_OLD";
-}
-
-
-// Material Design Components
-.md {
-  @import "ionic.md_OLD";
-}
-
-
-// Roboto Font
-$roboto: true !default;
-@if ($roboto) {
-  @import "fonts/roboto";
-  .md {
-    font-family: "Roboto", "Helvetica Neue", sans-serif;
-  }
-}

From 58f401001ec8cf0a012420c34f9500efa6bf67f6 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 13:27:34 -0600
Subject: [PATCH 013/100] updates

---
 ionic/components/icon/modes/md.scss |  5 +++++
 ionic/components/item/modes/md.scss |  2 +-
 ionic/ionic.core.scss               |  1 -
 ionic/ionic.ios.scss                | 23 +++++++++++++++++++++--
 ionic/ionic.md.scss                 | 21 ++++++++++++++++++++-
 5 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 ionic/components/icon/modes/md.scss

diff --git a/ionic/components/icon/modes/md.scss b/ionic/components/icon/modes/md.scss
new file mode 100644
index 0000000000..969c07bdcb
--- /dev/null
+++ b/ionic/components/icon/modes/md.scss
@@ -0,0 +1,5 @@
+@import "../../../ionic.globals";
+@import "../icon";
+
+// Material Design Icon
+// --------------------------------------------------
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 01deb4125b..2481c6df74 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -186,7 +186,7 @@ ion-thumbnail {
 .item,
 a.item,
 button.item {
-  transition: background-color $button-md-transition-duration $button-md-animation-curve, transform 300ms;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
 }
 
 .item.activated,
diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss
index 57b01359dc..10f03024f4 100644
--- a/ionic/ionic.core.scss
+++ b/ionic/ionic.core.scss
@@ -10,7 +10,6 @@
 // Core Components
 @import
   "components/grid/grid",
-  "components/icon/icon",
   "components/menu/menu",
   "components/modal/modal",
   "components/scroll/scroll",
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index fc34e616ac..d02caa6cee 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -6,6 +6,25 @@
 @import "ionic.core";
 
 
-// iOS Components
+// iOS Required Components
 @import
-  "components/action-sheet/modes/ios";
+  "components/icon/modes/ios",
+  "components/item/modes/ios",
+  "components/list/modes/ios",
+  "components/toolbar/modes/ios";
+
+
+// iOS Optional Components
+@import
+  "components/action-sheet/modes/ios",
+  "components/button/modes/ios",
+  "components/card/modes/ios",
+  "components/checkbox/modes/ios",
+  "components/content/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";
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index 753235b7fc..2662a89559 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -7,6 +7,25 @@
 
 
 // Material Design Components
+@import
+  "components/icon/modes/md",
+  "components/item/modes/md",
+  "components/list/modes/md",
+  "components/toolbar/modes/md";
+
+
+// Material Design Optional Components
 @import
   "components/action-sheet/modes/md",
-  "components/tap-click/ripple";
+  "components/button/modes/md",
+  "components/card/modes/md",
+  "components/checkbox/modes/md",
+  "components/content/modes/md",
+  "components/popup/modes/md",
+  "components/radio/modes/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";

From 4f125354cc1a5bcc33932de2ca61d9ce649cd14f Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 14:09:44 -0600
Subject: [PATCH 014/100] mode theming

---
 ionic/components/icon/modes/ios.scss | 14 ------
 ionic/components/icon/modes/md.scss  |  5 ---
 ionic/components/item/modes/ios.scss | 15 -------
 ionic/ionic.core.scss                |  1 +
 ionic/ionic.globals.scss             |  4 --
 ionic/ionic.ios.scss                 | 19 ++++----
 ionic/ionic.md.scss                  |  5 ++-
 ionic/themes/default.ios.scss        | 65 ++++++++++++++++++++++++++++
 ionic/themes/default.md.scss         | 54 +++++++++++++++++++++++
 9 files changed, 133 insertions(+), 49 deletions(-)
 delete mode 100644 ionic/components/icon/modes/ios.scss
 delete mode 100644 ionic/components/icon/modes/md.scss
 create mode 100644 ionic/themes/default.ios.scss
 create mode 100644 ionic/themes/default.md.scss

diff --git a/ionic/components/icon/modes/ios.scss b/ionic/components/icon/modes/ios.scss
deleted file mode 100644
index 1603ea117e..0000000000
--- a/ionic/components/icon/modes/ios.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import "../../../ionic.globals";
-@import "../icon";
-
-// iOS Icon
-// --------------------------------------------------
-
-
-$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
-
-
-@mixin ios-detail-push-icon($fg-color) {
-  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
-  @include svg-background-image($svg);
-}
diff --git a/ionic/components/icon/modes/md.scss b/ionic/components/icon/modes/md.scss
deleted file mode 100644
index 969c07bdcb..0000000000
--- a/ionic/components/icon/modes/md.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "../../../ionic.globals";
-@import "../icon";
-
-// Material Design Icon
-// --------------------------------------------------
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 8ff1df159c..c873d5924b 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -4,21 +4,6 @@
 // iOS Item
 // --------------------------------------------------
 
-$item-ios-border-color:               $list-border-color !default;
-$item-ios-activated-background-color: #d9d9d9 !default;
-$item-ios-font-size:                  1.6rem !default;
-
-$item-ios-padding-top:                12px !default;
-$item-ios-padding-right:              16px !default;
-$item-ios-padding-bottom:             13px !default;
-$item-ios-padding-left:               16px !default;
-
-$item-ios-padding-media-top:          10px !default;
-$item-ios-padding-media-bottom:       10px !default;
-
-$item-ios-padding-icon-top:           10px !default;
-$item-ios-padding-icon-bottom:        9px !default;
-
 $item-ios-avatar-size:                3.6rem !default;
 $item-ios-thumbnail-size:             5.6rem !default;
 $item-ios-note-color:                 darken($item-ios-border-color, 10%) !default;
diff --git a/ionic/ionic.core.scss b/ionic/ionic.core.scss
index 10f03024f4..57b01359dc 100644
--- a/ionic/ionic.core.scss
+++ b/ionic/ionic.core.scss
@@ -10,6 +10,7 @@
 // Core Components
 @import
   "components/grid/grid",
+  "components/icon/icon",
   "components/menu/menu",
   "components/modal/modal",
   "components/scroll/scroll",
diff --git a/ionic/ionic.globals.scss b/ionic/ionic.globals.scss
index 1e6814bcc0..2d34a0a70d 100644
--- a/ionic/ionic.globals.scss
+++ b/ionic/ionic.globals.scss
@@ -1,8 +1,4 @@
 
-// Global Theme
-@import "themes/default";
-
-
 // Global Functions
 @import "util/functions";
 
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index d02caa6cee..95afd69ad2 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -2,29 +2,28 @@
 @charset "UTF-8";
 
 
+// iOS Theme
+@import "themes/default.ios";
+
+
 // Core Components
 @import "ionic.core";
 
 
-// iOS Required Components
-@import
-  "components/icon/modes/ios",
-  "components/item/modes/ios",
-  "components/list/modes/ios",
-  "components/toolbar/modes/ios";
-
-
-// iOS Optional Components
+// iOS Components
 @import
   "components/action-sheet/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/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/text-input/modes/ios",
+  "components/toolbar/modes/ios";
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index 2662a89559..84f3f504e6 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -2,13 +2,16 @@
 @charset "UTF-8";
 
 
+// Material Design Theme
+@import "themes/default.md";
+
+
 // Core Components
 @import "ionic.core";
 
 
 // Material Design Components
 @import
-  "components/icon/modes/md",
   "components/item/modes/md",
   "components/list/modes/md",
   "components/toolbar/modes/md";
diff --git a/ionic/themes/default.ios.scss b/ionic/themes/default.ios.scss
new file mode 100644
index 0000000000..ecab9adfaf
--- /dev/null
+++ b/ionic/themes/default.ios.scss
@@ -0,0 +1,65 @@
+@import "themes/default";
+
+// iOS Default Theme
+// ----------------------------------
+
+$colors: (
+
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+
+) !default;
+
+
+$text-ios-color:                 $text-color !default;
+$background-ios-color:           $background-color !default;
+$subdued-text-ios-color:         $subdued-text-color !default;
+
+$list-ios-text-color:            $text-ios-color !default;
+$list-ios-background-color:      $background-color !default;
+$list-ios-border-color:          $list-border-color !default;
+
+$link-ios-color:                 map-get($colors, primary) !default;
+
+
+// iOS Toolbar
+// --------------------------------------------------
+
+$toolbar-ios-background-color:   $toolbar-background-color !default;
+$toolbar-ios-border-color:       $toolbar-border-color !default;
+$toolbar-ios-text-color:         $text-ios-color !default;
+$toolbar-ios-active-color:       $link-ios-color !default;
+$toolbar-ios-inactive-color:     $toolbar-inactive-color !default;
+
+
+// iOS Item
+// --------------------------------------------------
+
+$item-ios-border-color:               $list-border-color !default;
+$item-ios-activated-background-color: #d9d9d9 !default;
+$item-ios-font-size:                  1.6rem !default;
+
+$item-ios-padding-top:                12px !default;
+$item-ios-padding-right:              16px !default;
+$item-ios-padding-bottom:             13px !default;
+$item-ios-padding-left:               16px !default;
+
+$item-ios-padding-media-top:          10px !default;
+$item-ios-padding-media-bottom:       10px !default;
+
+$item-ios-padding-icon-top:           10px !default;
+$item-ios-padding-icon-bottom:        9px !default;
+
+
+// iOS Icon
+// --------------------------------------------------
+
+$icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='fg-color'/></svg>" !default;
+
+@mixin ios-detail-push-icon($fg-color) {
+  $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
+  @include svg-background-image($svg);
+}
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
new file mode 100644
index 0000000000..f183d8416d
--- /dev/null
+++ b/ionic/themes/default.md.scss
@@ -0,0 +1,54 @@
+@import "themes/default";
+
+// Material Design Default Theme
+// ----------------------------------
+
+$colors: (
+
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+
+) !default;
+
+
+$text-md-color:                 $text-color !default;
+$background-md-color:           $background-color !default;
+$subdued-text-md-color:         $subdued-text-color !default;
+
+$list-md-text-color:            $text-md-color !default;
+$list-md-background-color:      $background-color !default;
+$list-md-border-color:          $list-border-color !default;
+
+$link-md-color:                 map-get($colors, primary) !default;
+
+
+// iOS Toolbar
+// --------------------------------------------------
+
+$toolbar-md-background-color:   $toolbar-background-color !default;
+$toolbar-md-border-color:       $toolbar-border-color !default;
+$toolbar-md-text-color:         $text-md-color !default;
+$toolbar-md-active-color:       $link-md-color !default;
+$toolbar-md-inactive-color:     $toolbar-inactive-color !default;
+
+
+// Material Design Item
+// --------------------------------------------------
+
+$item-md-border-color:               $list-border-color !default;
+$item-md-activated-background-color: #d9d9d9 !default;
+$item-md-font-size:                  1.6rem !default;
+
+$item-md-padding-top:                12px !default;
+$item-md-padding-right:              16px !default;
+$item-md-padding-bottom:             13px !default;
+$item-md-padding-left:               16px !default;
+
+$item-md-padding-media-top:          10px !default;
+$item-md-padding-media-bottom:       10px !default;
+
+$item-md-padding-icon-top:           10px !default;
+$item-md-padding-icon-bottom:        9px !default;

From 8148927c88beb1736ad8ba365248fc75a958eaef Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 14:34:24 -0600
Subject: [PATCH 015/100] updates

---
 ionic/components/app/structure.scss     |  2 --
 ionic/components/app/typography.scss    | 20 ------------------
 ionic/components/content/modes/ios.scss | 28 +++++++++++++++++++++++++
 ionic/components/menu/menu.scss         | 14 -------------
 ionic/components/menu/modes/ios.scss    | 24 +++++++++++++++++++++
 ionic/components/menu/modes/md.scss     | 24 +++++++++++++++++++++
 ionic/components/modal/modal.scss       |  4 ----
 ionic/components/modal/modes/ios.scss   | 11 ++++++++++
 ionic/components/modal/modes/md.scss    | 11 ++++++++++
 ionic/ionic.ios.scss                    |  2 ++
 ionic/ionic.md.scss                     | 14 ++++++-------
 11 files changed, 106 insertions(+), 48 deletions(-)
 create mode 100644 ionic/components/menu/modes/ios.scss
 create mode 100644 ionic/components/menu/modes/md.scss
 create mode 100644 ionic/components/modal/modes/ios.scss
 create mode 100644 ionic/components/modal/modes/md.scss

diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index 286cc13a77..d42d3fdb67 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -76,7 +76,6 @@ body {
   text-size-adjust: none;
 
   @include user-select-none();
-  background-color: $background-color;
 }
 
 ion-app,
@@ -127,7 +126,6 @@ ion-content {
   width: 100%;
   height: 100%;
   flex: 1;
-  background-color: $background-color;
 }
 
 scroll-content {
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index c314a8dfda..403f79e502 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -32,7 +32,6 @@ body {
 }
 
 a {
-  color: $link-color;
   background-color: transparent;
 }
 .enable-hover a:hover {
@@ -101,22 +100,3 @@ sup {
 sub {
   bottom: -0.25em;
 }
-
-@each $color-name, $color-value in $colors {
-  h1, h2, h3, h4, h5, h6,
-  p,
-  span,
-  a:not([button]),
-  small,
-  b,
-  i,
-  u,
-  strong,
-  em,
-  sub,
-  sup {
-    &[#{$color-name}] {
-      color: $color-value !important;
-    }
-  }
-}
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
index 1c4f165ff4..b09806ef91 100644
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -6,6 +6,15 @@
 $outer-content-md-background-color:         #efeff4 !default;
 
 
+body,
+ion-content {
+  background-color: $background-ios-color;
+}
+
+a {
+  color: $link-ios-color;
+}
+
 .outer-content {
   background: $outer-content-md-background-color;
 }
@@ -14,3 +23,22 @@ ion-nav.has-views,
 ion-tab.has-views {
   background: #000;
 }
+
+@each $color-name, $color-value in $colors {
+  h1, h2, h3, h4, h5, h6,
+  p,
+  span,
+  a:not([button]),
+  small,
+  b,
+  i,
+  u,
+  strong,
+  em,
+  sub,
+  sup {
+    &[#{$color-name}] {
+      color: $color-value !important;
+    }
+  }
+}
diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss
index d213016271..a5293db25a 100644
--- a/ionic/components/menu/menu.scss
+++ b/ionic/components/menu/menu.scss
@@ -6,9 +6,6 @@
 $menu-width:                 304px !default;
 $menu-small-width:           $menu-width - 40px !default;
 
-$menu-background:            $background-color !default;
-$menu-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
-
 
 ion-menu {
   position: absolute;
@@ -22,8 +19,6 @@ ion-menu {
   display: flex;
   flex-direction: column;
 
-  background: $menu-background;
-
   transform: translate3d(-9999px, 0px, 0px);
 }
 
@@ -68,14 +63,6 @@ ion-menu[type=reveal].show-menu {
   transform: translate3d(0px, 0px, 0px);
 }
 
-.menu-content-reveal {
-  box-shadow: $menu-shadow;
-}
-
-.menu-content-push {
-  box-shadow: $menu-shadow;
-}
-
 
 // Menu Overlay
 // --------------------------------------------------
@@ -84,7 +71,6 @@ ion-menu[type=reveal].show-menu {
 
 ion-menu[type=overlay] {
   z-index: $z-index-menu-overlay;
-  box-shadow: $menu-shadow;
   left: -8px; // make up for the box-shadow hanging over on the left
 
   backdrop {
diff --git a/ionic/components/menu/modes/ios.scss b/ionic/components/menu/modes/ios.scss
new file mode 100644
index 0000000000..827aa58d14
--- /dev/null
+++ b/ionic/components/menu/modes/ios.scss
@@ -0,0 +1,24 @@
+@import "../../../ionic.globals";
+
+// iOS Menu
+// --------------------------------------------------
+
+$menu-ios-background:            $background-ios-color !default;
+$menu-ios-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
+
+
+ion-menu {
+  background: $menu-ios-background;
+}
+
+.menu-content-reveal {
+  box-shadow: $menu-ios-shadow;
+}
+
+.menu-content-push {
+  box-shadow: $menu-ios-shadow;
+}
+
+ion-menu[type=overlay] {
+  box-shadow: $menu-ios-shadow;
+}
diff --git a/ionic/components/menu/modes/md.scss b/ionic/components/menu/modes/md.scss
new file mode 100644
index 0000000000..d6d9ec791d
--- /dev/null
+++ b/ionic/components/menu/modes/md.scss
@@ -0,0 +1,24 @@
+@import "../../../ionic.globals";
+
+// Material Design Menu
+// --------------------------------------------------
+
+$menu-md-background:            $background-md-color !default;
+$menu-md-shadow:                0px 0px 10px rgba(0, 0, 0, 0.25) !default;
+
+
+ion-menu {
+  background: $menu-md-background;
+}
+
+.menu-content-reveal {
+  box-shadow: $menu-md-shadow;
+}
+
+.menu-content-push {
+  box-shadow: $menu-md-shadow;
+}
+
+ion-menu[type=overlay] {
+  box-shadow: $menu-md-shadow;
+}
diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss
index 5d4f61c0da..63e5ce6929 100644
--- a/ionic/components/modal/modal.scss
+++ b/ionic/components/modal/modal.scss
@@ -3,11 +3,7 @@
 // Modals
 // --------------------------------------------------
 
-$modal-background-color:          $background-color !default;
-
-
 ion-page.modal {
-  background-color: $modal-background-color;
   z-index: $z-index-overlay;
 
   // hidden by default to prevent flickers, the animation will show it
diff --git a/ionic/components/modal/modes/ios.scss b/ionic/components/modal/modes/ios.scss
new file mode 100644
index 0000000000..f92f7cef4c
--- /dev/null
+++ b/ionic/components/modal/modes/ios.scss
@@ -0,0 +1,11 @@
+@import "../../../ionic.globals";
+
+// iOS Modals
+// --------------------------------------------------
+
+$modal-ios-background-color:          $background-ios-color !default;
+
+
+ion-page.modal {
+  background-color: $modal-ios-background-color;
+}
diff --git a/ionic/components/modal/modes/md.scss b/ionic/components/modal/modes/md.scss
new file mode 100644
index 0000000000..b479f9fe36
--- /dev/null
+++ b/ionic/components/modal/modes/md.scss
@@ -0,0 +1,11 @@
+@import "../../../ionic.globals";
+
+// Material Design Modals
+// --------------------------------------------------
+
+$modal-md-background-color:          $background-md-color !default;
+
+
+ion-page.modal {
+  background-color: $modal-md-background-color;
+}
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index 95afd69ad2..3c6b2a96e6 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -19,6 +19,8 @@
   "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",
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index 84f3f504e6..529d984164 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -11,19 +11,16 @@
 
 
 // Material Design Components
-@import
-  "components/item/modes/md",
-  "components/list/modes/md",
-  "components/toolbar/modes/md";
-
-
-// Material Design Optional Components
 @import
   "components/action-sheet/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/tap-click/ripple",
@@ -31,4 +28,5 @@
   "components/segment/modes/md",
   "components/switch/modes/md",
   "components/tabs/modes/md",
-  "components/text-input/modes/md";
+  "components/text-input/modes/md",
+  "components/toolbar/modes/md";

From 90ad47583623608128d22afe4d0ec221900e7ebf Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Dec 2015 15:44:37 -0500
Subject: [PATCH 016/100] refactor(button): changed button attributes to
 classes

references #689
---
 ionic/components/button/button-clear.scss     |  6 +-
 ionic/components/button/button-outline.scss   | 38 +++-----
 ionic/components/button/button-size.scss      | 25 ++---
 ionic/components/button/button.scss           | 91 ++++++++++++++++++-
 ionic/components/button/test/basic/main.html  | 20 ++--
 ionic/components/button/test/block/main.html  | 24 ++---
 ionic/components/button/test/clear/main.html  | 24 ++---
 ionic/components/button/test/full/main.html   | 16 ++--
 .../components/button/test/outline/main.html  | 32 +++----
 ionic/components/button/test/round/main.html  | 20 ++--
 ionic/components/button/test/sizes/main.html  | 24 ++---
 11 files changed, 195 insertions(+), 125 deletions(-)

diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
index 408b77cc41..59b158a131 100644
--- a/ionic/components/button/button-clear.scss
+++ b/ionic/components/button/button-clear.scss
@@ -3,8 +3,7 @@
 // Clear Button
 // --------------------------------------------------
 
-button[clear],
-[button][clear] {
+.button-clear {
   border-color: transparent;
   background: transparent;
   color: color-shade($button-color);
@@ -29,8 +28,7 @@ button[clear],
 
   $fg-color: color-shade($color-value);
 
-  button[clear][#{$color-name}],
-  [button][clear][#{$color-name}] {
+  .button-clear-#{$color-name} {
     border-color: transparent;
     background: transparent;
     color: $fg-color;
diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline.scss
index 0203fce104..3ec1f0a476 100644
--- a/ionic/components/button/button-outline.scss
+++ b/ionic/components/button/button-outline.scss
@@ -3,21 +3,16 @@
 // Outline Button
 // --------------------------------------------------
 
-button,
-[button] {
+.button-outline {
+  border: 1px solid $button-color;
+  background: transparent;
+  color: $button-color;
 
-  &[outline] {
-    border: 1px solid $button-color;
-    background: transparent;
-    color: $button-color;
-
-    &.activated {
-      opacity: 1;
-      color: $background-color;
-      background-color: $button-color;
-    }
+  &.activated {
+    opacity: 1;
+    color: $background-color;
+    background-color: $button-color;
   }
-
 }
 
 
@@ -26,15 +21,13 @@ button,
 
 @mixin button-outline($fg-color) {
 
-  &[outline] {
-    border-color: $fg-color;
-    background: transparent;
-    color: $fg-color;
+  border-color: $fg-color;
+  background: transparent;
+  color: $fg-color;
 
-    &.activated {
-      color: $background-color;
-      background-color: $fg-color;
-    }
+  &.activated {
+    color: $background-color;
+    background-color: $fg-color;
   }
 
 }
@@ -45,8 +38,7 @@ button,
 
 @each $color-name, $color-value in auxiliary-colors() {
 
-  button[#{$color-name}],
-  [button][#{$color-name}] {
+  .button-outline-#{$color-name} {
 
     $fg-color: color-shade($color-value, 5%);
     @include button-outline($fg-color);
diff --git a/ionic/components/button/button-size.scss b/ionic/components/button/button-size.scss
index 3f68bd9844..646d1f3c32 100644
--- a/ionic/components/button/button-size.scss
+++ b/ionic/components/button/button-size.scss
@@ -12,19 +12,14 @@ $button-small-height:             2.1em !default;
 $button-small-padding:            0.9em !default;
 
 
-button,
-[button] {
-
-  &[large] {
-    padding: 0 $button-large-padding;
-    min-height: $button-large-height;
-    font-size: $button-large-font-size;
-  }
-
-  &[small] {
-    padding: 0 $button-small-padding;
-    min-height: $button-small-height;
-    font-size: $button-small-font-size;
-  }
-
+.button-large {
+  padding: 0 $button-large-padding;
+  min-height: $button-large-height;
+  font-size: $button-large-font-size;
+}
+
+.button-small {
+  padding: 0 $button-small-padding;
+  min-height: $button-small-height;
+  font-size: $button-small-font-size;
 }
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 24f490093e..b4350f1a0a 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -14,9 +14,7 @@ $button-color-activated:          color-shade($button-color) !default;
 $button-text-color:               inverse($button-color) !default;
 $button-hover-opacity:            0.8 !default;
 
-
-button,
-[button] {
+.button {
   position: relative;
   display: inline-flex;
   flex-shrink: 0;
@@ -44,8 +42,95 @@ button,
   cursor: pointer;
   @include user-select-none();
   @include appearance(none);
+
+  // Button Types
+  // --------------------------------------------------
+
+  .button-block {
+    display: flex;
+    clear: both;
+    margin-right: 0;
+    margin-left: 0;
+    width: 100%;
+
+    &:after {
+      clear: both;
+    }
+  }
+
+  .button-full {
+    width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+    border-radius: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+  }
+
+  .button-round {
+    border-radius: $button-round-border-radius;
+    padding: $button-round-padding;
+  }
+
+  .button-disabled {
+    opacity: 0.4;
+    cursor: default !important;
+    pointer-events: none;
+  }
 }
 
 a[button] {
   text-decoration: none;
 }
+
+
+// TODO
+// button should have classes:
+// button, button-primary, button-secondary, etc.
+// button holds all styling with default primary color(will this affect outline/clear?) and
+// the other classes change the color
+//
+// button-clear should have classes:
+// button-clear, button-clear-primary, button-clear-secondary, etc.
+// button-clear holds all clear styling with default primary color and
+// the other classes change the color
+//
+// button-outline should have classes:
+// button-outline, button-outline-primary, button-outline-secondary, etc.
+// button-outline holds all outline styling with default primary color and
+// the other classes change the color
+//
+// button-block should stand alone
+// button-full should stand alone
+// button-round should stand alone
+// button-disabled should stand alone(?)
+// button-sizes should stand alone (button-small, button-large, etc)
+// button-fab errrrr
+
+
+// Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-default($bg-color, $bg-color-activated, $text-color) {
+  background-color: $bg-color;
+  color: $text-color;
+
+  &.activated {
+    background-color: $bg-color-activated;
+  }
+}
+
+
+// Generate Default Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $text-color: inverse($bg-color);
+    @include button-default($bg-color, $bg-color-activated, $text-color);
+  }
+
+}
diff --git a/ionic/components/button/test/basic/main.html b/ionic/components/button/test/basic/main.html
index 28341090bb..74d078849e 100644
--- a/ionic/components/button/test/basic/main.html
+++ b/ionic/components/button/test/basic/main.html
@@ -11,28 +11,28 @@
   </p>
 
   <p>
-    <button primary>Primary</button>
-    <button primary class="activated">Primary.activated</button>
+    <button class="button-primary">Primary</button>
+    <button class="button-primary activated">Primary.activated</button>
   </p>
 
   <p>
-    <button secondary>Secondary</button>
-    <button secondary class="activated">Secondary.activated</button>
+    <button class="button-secondary">Secondary</button>
+    <button class="button-secondary activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button danger>Danger</button>
-    <button danger class="activated">Danger.activated</button>
+    <button class="button-danger">Danger</button>
+    <button class="button-danger activated">Danger.activated</button>
   </p>
 
   <p>
-    <button light>Light</button>
-    <button light class="activated">Light.activated</button>
+    <button class="button-light">Light</button>
+    <button class="button-light activated">Light.activated</button>
   </p>
 
   <p>
-    <button dark>Dark</button>
-    <button dark class="activated">Dark.activated</button>
+    <button class="button-dark">Dark</button>
+    <button class="button-dark activated">Dark.activated</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/block/main.html b/ionic/components/button/test/block/main.html
index b99513a59d..389c58a396 100644
--- a/ionic/components/button/test/block/main.html
+++ b/ionic/components/button/test/block/main.html
@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <a button block href="#">a[button][block]</a>
-    <button block>button[block]</button>
+    <a button class="button-block" href="#">a[button].button-block</a>
+    <button block>button.button-block</button>
   </p>
 
   <p>
-    <a button block href="#"><icon help-circle></icon> a[button][block] icon</a>
-    <button block><icon help-circle></icon> button[block] icon</button>
+    <a button class="button-block" href="#"><icon help-circle></icon> a[button].button-block icon</a>
+    <button block><icon help-circle></icon> button.button-block icon</button>
   </p>
 
   <p>
-    <a button block outline secondary href="#">a[button][block][outline][secondary]</a>
-    <button block outline secondary>button[block][outline][secondary]</button>
+    <a button class="button-block button-outline-secondary" href="#">a[button].button-block.button-outline-secondary</a>
+    <button class="button-block button-outline-secondary">button.button-block.button-outline-secondary</button>
   </p>
 
   <p>
-    <a button block clear dark href="#">a[button][block][clear][dark]</a>
-    <button block clear dark>button[clear][block][dark]</button>
+    <a button class="button-block button-clear-dark" href="#">a[button].button-block.button-clear-dark</a>
+    <button class="button-block button-clear-dark">button.button-block.button-clear-dark</button>
   </p>
 
   <p>
-    <a button block round href="#">a[button][block][round]</a>
-    <button block round>button[block][round]</button>
+    <a button class="button-block button-round" href="#">a[button].button-block.button-round</a>
+    <button class="button-block button-round">button.button-block.button-round</button>
   </p>
 
   <p>
-    <a button block round outline href="#">a[button][block][round][outline]</a>
-    <button block round outline>button[block][round][outline]</button>
+    <a button class="button-block button-round button-outline" href="#">a[button].button-block.button-round.button-outline</a>
+    <button class="button-block button-round button-outline">button.button-block.button-round.button-outline</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/clear/main.html b/ionic/components/button/test/clear/main.html
index eaf85b301a..2b3181ed21 100644
--- a/ionic/components/button/test/clear/main.html
+++ b/ionic/components/button/test/clear/main.html
@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <button clear>Default</button>
-    <button clear class="activated">Default.activated</button>
+    <button class="button-clear">Default</button>
+    <button class="button-clear activated">Default.activated</button>
   </p>
 
   <p>
-    <button clear primary>Primary</button>
-    <button clear primary class="activated">Primary.activated</button>
+    <button class="button-clear-primary">Primary</button>
+    <button class="button-clear-primary activated">Primary.activated</button>
   </p>
 
   <p>
-    <button clear secondary>Secondary</button>
-    <button clear secondary class="activated">Secondary.activated</button>
+    <button class="button-clear-secondary">Secondary</button>
+    <button class="button-clear-secondary activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button clear danger>Danger</button>
-    <button clear danger class="activated">Danger.activated</button>
+    <button class="button-clear-danger">Danger</button>
+    <button class="button-clear-danger activated">Danger.activated</button>
   </p>
 
   <p>
-    <button clear light>Light</button>
-    <button clear light class="activated">Light.activated</button>
+    <button class="button-clear-light">Light</button>
+    <button class="button-clear-light activated">Light.activated</button>
   </p>
 
   <p>
-    <button clear dark>Dark</button>
-    <button clear dark class="activated">Dark.activated</button>
+    <button class="button-clear-dark">Dark</button>
+    <button class="button-clear-dark activated">Dark.activated</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/full/main.html b/ionic/components/button/test/full/main.html
index 15590211b5..30c2e902d4 100644
--- a/ionic/components/button/test/full/main.html
+++ b/ionic/components/button/test/full/main.html
@@ -6,23 +6,23 @@
 <ion-content>
 
   <div>
-    <a button full href="#">a[button][full]</a>
-    <button full>button[full]</button>
+    <a button class="button-full" href="#">a[button].button-full</a>
+    <button class="button-full">button.button-full</button>
   </div>
 
   <div>
-    <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
-    <button full outline secondary>button[full][outline][secondary]</button>
+    <a button class="button-full button-outline-secondary" href="#">a[button].button-full.button-outline-secondary</a>
+    <button class="button-full button-outline-secondary">button.button-full.button-outline-secondary</button>
   </div>
 
   <div>
-    <a button full clear light href="#">a[button][full][clear][light]</a>
-    <button full clear light>button[full][clear][light]</button>
+    <a button class="button-full button-clear-light" href="#">a[button].button-full.button-clear-light</a>
+    <button class="button-full button-clear-light">button.button-full.button-clear-light</button>
   </div>
 
   <div>
-    <a button full clear dark href="#">a[button][full][clear][dark]</a>
-    <button full clear dark>button[full][clear][dark]</button>
+    <a button class="button-full button-clear-dark" href="#">a[button].button-full.button-clear-dark</a>
+    <button class="button-full button-clear-dark">button.button-full.button-clear-dark</button>
   </div>
 
 </ion-content>
diff --git a/ionic/components/button/test/outline/main.html b/ionic/components/button/test/outline/main.html
index 04b4037645..b2c5d69247 100644
--- a/ionic/components/button/test/outline/main.html
+++ b/ionic/components/button/test/outline/main.html
@@ -6,49 +6,49 @@
 <ion-content padding style="text-align:center" class="outer-content">
 
   <p>
-    <button outline>Default</button>
-    <button outline class="activated">Default.activated</button>
+    <button class="button-outline">Default</button>
+    <button class="button-outline activated">Default.activated</button>
   </p>
 
   <p>
-    <button outline primary>Primary</button>
-    <button outline primary class="activated">Primary.activated</button>
+    <button class="button-outline-primary">Primary</button>
+    <button class="button-outline-primary activated">Primary.activated</button>
   </p>
 
   <p>
-    <button outline secondary>Secondary</button>
-    <button outline secondary class="activated">Secondary.activated</button>
+    <button class="button-outline-secondary">Secondary</button>
+    <button class="button-outline-secondary activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button outline danger>Danger</button>
-    <button outline danger class="activated">Danger.activated</button>
+    <button class="button-outline-danger">Danger</button>
+    <button class="button-outline-danger activated">Danger.activated</button>
   </p>
 
   <p>
-    <button outline light>Light</button>
-    <button outline light class="activated">Light.activated</button>
+    <button class="button-outline-light">Light</button>
+    <button class="button-outline-light activated">Light.activated</button>
   </p>
 
   <p>
-    <button outline dark>Dark</button>
-    <button outline dark class="activated">Dark.activated</button>
+    <button class="button-outline-dark">Dark</button>
+    <button class="button-outline-dark activated">Dark.activated</button>
   </p>
 
   <p>
-    <button outline block>button[outline][block]</button>
+    <button class="button-outline button-block">.button-outline.button-block</button>
   </p>
 
   <p>
-    <button outline block class="activated">[outline][block].activated</button>
+    <button class="button-outline button-block activated">.button-outline.button-block.activated</button>
   </p>
 
   <p>
-    <button outline block secondary>button[outline][block][secondary]</button>
+    <button class="button-outline-secondary button-block" >.button-outline-secondary.button-block</button>
   </p>
 
   <p>
-    <button outline block secondary class="activated">[outline][block][secondary].activated</button>
+    <button class="button-outline-secondary button-block activated">.button-outline-secondary.button-block.activated</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/round/main.html b/ionic/components/button/test/round/main.html
index f90d2f7b70..c163f7cdac 100644
--- a/ionic/components/button/test/round/main.html
+++ b/ionic/components/button/test/round/main.html
@@ -4,17 +4,17 @@
 </ion-toolbar>
 
 <ion-content padding>
-  <button round>button</button>
-  <button round light>button light</button>
-  <button round secondary>button secondary</button>
-  <button round danger>button danger</button>
-  <button round dark>button dark</button>
+  <button class="button-round">button</button>
+  <button class="button-round button-light">button light</button>
+  <button class="button-round button-secondary">button secondary</button>
+  <button class="button-round button-danger">button danger</button>
+  <button class="button-round button-dark">button dark</button>
 
-  <button round outline>button</button>
-  <button round light outline>button light</button>
-  <button round secondary outline>button secondary</button>
-  <button round danger outline>button danger</button>
-  <button round dark outline>button dark</button>
+  <button class="button-round button-outline">button</button>
+  <button class="button-round button-outline-light">button outline light</button>
+  <button class="button-round button-outline-secondary">button outline secondary</button>
+  <button class="button-round button-outline-danger">button outline danger</button>
+  <button class="button-round button-outline-dark">button outline dark</button>
 
 </ion-content>
 
diff --git a/ionic/components/button/test/sizes/main.html b/ionic/components/button/test/sizes/main.html
index 0db997df5a..5f9fff318d 100644
--- a/ionic/components/button/test/sizes/main.html
+++ b/ionic/components/button/test/sizes/main.html
@@ -11,23 +11,23 @@
   </p>
 
   <p>
-    <a button small href="#">a[button][small]</a>
-    <button small>button[small]</button>
+    <a button class="button-small" href="#">a[button].button-small</a>
+    <button class="button-small">button.button-small</button>
   </p>
 
   <p>
-    <a button outline small href="#">a[button][outline][small]</a>
-    <button outline small>button[outline][small]</button>
+    <a button class="button-outline button-small" href="#">a[button].button-outline.button-small</a>
+    <button class="button-outline button-small">button.button-outline.button-small</button>
   </p>
 
   <p>
-    <a button clear small href="#">a[button][clear][small]</a>
-    <button clear small>button[clear][small]</button>
+    <a button class="button-clear button-small" href="#">a[button].button-clear.button-small</a>
+    <button class="button-clear button-small">button.button-clear.button-small</button>
   </p>
 
   <p>
-    <button large>[large]</button>
-    <a button large href="#">
+    <button class="button-large">button.button-large</button>
+    <a button class="button-large" href="#">
       <span style="font-size:48px">H</span>
       <span style="font-size:38px">E</span>
       <span style="font-size:32px">L</span>
@@ -36,13 +36,13 @@
   </p>
 
   <p>
-    <a button outline large href="#">a[button][outline][large]</a>
-    <button outline large>button[outline][large]</button>
+    <a button class="button-outline button-large" href="#">a[button].button-outline.button-large</a>
+    <button class="button-outline button-large">button.button-outline.button-large</button>
   </p>
 
   <p>
-    <a button clear large href="#">a[clear][large]</a>
-    <button clear large>button[clear][large]</button>
+    <a button class="button-clear button-large" href="#">a.button-clear.button-large</a>
+    <button class="button-clear button-large">button.button-clear.button-large</button>
   </p>
 
 </ion-content>

From 5b0c174939ef01909aa8dbf8a5701ebc206496e8 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 14:56:54 -0600
Subject: [PATCH 017/100] component theme updates

---
 .../{ionic.core.scss => components.core.scss} |  0
 ionic/components.ios.scss                     | 24 +++++++++++++++++
 ionic/components.md.scss                      | 25 ++++++++++++++++++
 ionic/ionic.ios.scss                          | 25 ++----------------
 ionic/ionic.md.scss                           | 26 ++-----------------
 ionic/ionic.scss                              | 14 +++++++++-
 ionic/themes/default.scss                     | 13 ++++++++++
 ionic/util/functions.scss                     | 11 --------
 8 files changed, 79 insertions(+), 59 deletions(-)
 rename ionic/{ionic.core.scss => components.core.scss} (100%)
 create mode 100644 ionic/components.ios.scss
 create mode 100644 ionic/components.md.scss

diff --git a/ionic/ionic.core.scss b/ionic/components.core.scss
similarity index 100%
rename from ionic/ionic.core.scss
rename to ionic/components.core.scss
diff --git a/ionic/components.ios.scss b/ionic/components.ios.scss
new file mode 100644
index 0000000000..de8547e44f
--- /dev/null
+++ b/ionic/components.ios.scss
@@ -0,0 +1,24 @@
+
+// iOS Theme
+@import "themes/default.ios";
+
+
+// iOS Components
+@import
+  "components/action-sheet/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";
diff --git a/ionic/components.md.scss b/ionic/components.md.scss
new file mode 100644
index 0000000000..7697e05245
--- /dev/null
+++ b/ionic/components.md.scss
@@ -0,0 +1,25 @@
+
+// Material Design Theme
+@import "themes/default.md";
+
+
+// Material Design Components
+@import
+  "components/action-sheet/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/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";
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index 3c6b2a96e6..ed0c3cc51c 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -2,30 +2,9 @@
 @charset "UTF-8";
 
 
-// iOS Theme
-@import "themes/default.ios";
-
-
 // Core Components
-@import "ionic.core";
+@import "components.core";
 
 
 // iOS Components
-@import
-  "components/action-sheet/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";
+@import "components.ios";
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index 529d984164..e10e940ca8 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -2,31 +2,9 @@
 @charset "UTF-8";
 
 
-// Material Design Theme
-@import "themes/default.md";
-
-
 // Core Components
-@import "ionic.core";
+@import "components.core";
 
 
 // Material Design Components
-@import
-  "components/action-sheet/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/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";
+@import "components.md";
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index 9040d58ec7..361e8d522f 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -2,4 +2,16 @@
 
 
 // Core Components
-@import "ionic.core";
+@import "components.core";
+
+
+// iOS Components
+.ios {
+  @import "components.ios";
+}
+
+
+// Material Design Components
+.md {
+  @import "components.md";
+}
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index 733be5a230..c8c0a92b22 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -28,3 +28,16 @@ $toolbar-border-color:       #b2b2b2 !default;
 $toolbar-text-color:         $text-color !default;
 $toolbar-active-color:       $link-color !default;
 $toolbar-inactive-color:     #8c8c8c !default;
+
+
+
+
+@function color($color-name) {
+  @return map-get($colors, $color-name);
+}
+
+
+@function auxiliary-colors() {
+  // get a map of all the colors, except "primary"
+  @return map-remove($colors, primary);
+}
diff --git a/ionic/util/functions.scss b/ionic/util/functions.scss
index 8ef5e21cc9..95e2ea1550 100644
--- a/ionic/util/functions.scss
+++ b/ionic/util/functions.scss
@@ -28,17 +28,6 @@
 }
 
 
-@function color($color-name) {
-  @return map-get($colors, $color-name);
-}
-
-
-@function auxiliary-colors() {
-  // get a map of all the colors, except "primary"
-  @return map-remove($colors, primary);
-}
-
-
 // String Replace Function
 // --------------------------------------------------
 

From 5f221e273baff53f7499dcc3500904c4480b136c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Dec 2015 16:12:45 -0500
Subject: [PATCH 018/100] refactor(button): added button class to the button
 directive and got them working more

references #689
---
 ionic/components/button/button.scss          |  18 +++
 ionic/components/button/button.ts            |   5 +-
 ionic/components/button/modes/ios.scss       |   8 +-
 ionic/components/button/modes/md.scss        | 146 +++++++++----------
 ionic/components/button/test/block/main.html |  24 +--
 5 files changed, 106 insertions(+), 95 deletions(-)

diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index b4350f1a0a..96aaad3c9a 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -21,8 +21,15 @@ $button-hover-opacity:            0.8 !default;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
+  transition: background-color, opacity 100ms linear;
+  margin: $button-margin;
+  padding: $button-padding;
+  min-height: $button-height;
   line-height: 1;
 
+  border: 1px solid #ccc;
+  border: transparent;
+  border-radius: $button-border-radius;
 
   font-size: $button-font-size;
   font-family: inherit;
@@ -43,6 +50,17 @@ $button-hover-opacity:            0.8 !default;
   @include user-select-none();
   @include appearance(none);
 
+  background: $button-color;
+   color: $button-text-color;
+   &:hover:not(.disable-hover) {
+     opacity: $button-hover-opacity;
+     text-decoration: none;
+   }
+   &.activated {
+     opacity: 1;
+     background-color: $button-color-activated;
+   }
+
   // Button Types
   // --------------------------------------------------
 
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index b181c992d5..1daf65adb4 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -28,7 +28,10 @@ import {Config} from '../../config/config';
   * Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes.
  */
 @Directive({
-  selector: 'button,[button]'
+  selector: 'button,[button]',
+  host: {
+    'class': 'button'
+  }
 })
 export class Button {
 
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index 962fd008f5..ae3ee9ab77 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -9,9 +9,7 @@
 // iOS Button (largely the core button styles)
 // --------------------------------------------------
 
-button {
-  &[block] {
-    // This fixes an issue with flexbox and button on iOS Safari. See #225
-    display: block;
-  }
+.button-block {
+  // This fixes an issue with flexbox and button on iOS Safari. See #225
+  display: block;
 }
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 28bef83dc6..6af9a1b61b 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -26,8 +26,7 @@ $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4p
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
 
 
-button,
-[button] {
+.button {
   border-radius: $button-md-border-radius;
 
   min-height: $button-md-min-height;
@@ -46,96 +45,89 @@ button,
   &:hover:not(.disable-hover) {
     background-color: $button-md-clear-hover-background-color;
   }
-
-  &[full] {
-    border-radius: 0;
-  }
-
-  &[round] {
-    border-radius: $button-round-border-radius;
-    padding: $button-round-padding;
-  }
-
-  &[large] {
-    padding: 0 $button-large-padding;
-    min-height: $button-large-height;
-    font-size: $button-large-font-size;
-  }
-
-  &[small] {
-    padding: 0 $button-small-padding;
-    min-height: $button-small-height;
-    font-size: $button-small-font-size;
-  }
-
-  &.activated {
-    box-shadow: $button-md-box-shadow-active;
-  }
-
-  &[fab] {
-    border-radius: 50%;
-    box-shadow: $button-md-fab-box-shadow;
-
-    &.activated {
-      box-shadow: $button-md-fab-box-shadow-active;
-    }
-  }
-
-  &.icon-only {
-    padding: 0;
-  }
-
-  &[outline] {
-    box-shadow: none;
-
-    &.activated {
-      opacity: 1;
-    }
-
-    md-ripple {
-      background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
-    }
-  }
-
-  &[clear] {
-    opacity: 1;
-    box-shadow: none;
-
-    &.activated {
-      background-color: $button-md-clear-active-background-color;
-    }
-  }
-
 }
 
+.button-full {
+  border-radius: 0;
+}
+
+.button-round {
+  border-radius: $button-round-border-radius;
+  padding: $button-round-padding;
+}
+
+.button-large {
+  padding: 0 $button-large-padding;
+  min-height: $button-large-height;
+  font-size: $button-large-font-size;
+}
+
+.button-small {
+  padding: 0 $button-small-padding;
+  min-height: $button-small-height;
+  font-size: $button-small-font-size;
+}
+
+&.activated {
+  box-shadow: $button-md-box-shadow-active;
+}
+
+.button-fab {
+  border-radius: 50%;
+  box-shadow: $button-md-fab-box-shadow;
+
+  &.activated {
+    box-shadow: $button-md-fab-box-shadow-active;
+  }
+}
+
+.button-icon-only {
+  padding: 0;
+}
+
+.button-outline {
+  box-shadow: none;
+
+  &.activated {
+    opacity: 1;
+  }
+
+  md-ripple {
+    background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
+  }
+}
+
+.button-clear {
+  opacity: 1;
+  box-shadow: none;
+
+  &.activated {
+    background-color: $button-md-clear-active-background-color;
+  }
+}
 
 // Material Design Button Color Mixin
 // --------------------------------------------------
 
 @mixin button-theme-md($color-name, $color-value) {
 
-  button[#{$color-name}],
-  [button][#{$color-name}] {
+  .button-#{$color-name}.activated {
+    opacity: 1;
+  }
+
+  .button-outline {
+
+    md-ripple {
+      background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
+    }
 
     &.activated {
       opacity: 1;
-    }
-
-    &[outline] {
 
       md-ripple {
-        background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
-      }
-
-      &.activated {
-        opacity: 1;
-
-        md-ripple {
-          background: rgba(0, 0, 0, 0.1);
-        }
+        background: rgba(0, 0, 0, 0.1);
       }
     }
-
   }
 
 }
diff --git a/ionic/components/button/test/block/main.html b/ionic/components/button/test/block/main.html
index 389c58a396..7cca21f370 100644
--- a/ionic/components/button/test/block/main.html
+++ b/ionic/components/button/test/block/main.html
@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <a button class="button-block" href="#">a[button].button-block</a>
-    <button block>button.button-block</button>
+    <a button class="button-block" href="#">a block</a>
+    <button class="button-block">block</button>
   </p>
 
   <p>
-    <a button class="button-block" href="#"><icon help-circle></icon> a[button].button-block icon</a>
-    <button block><icon help-circle></icon> button.button-block icon</button>
+    <a button class="button-block" href="#"><icon help-circle></icon> a block icon</a>
+    <button class="button-block"><icon help-circle></icon> block icon</button>
   </p>
 
   <p>
-    <a button class="button-block button-outline-secondary" href="#">a[button].button-block.button-outline-secondary</a>
-    <button class="button-block button-outline-secondary">button.button-block.button-outline-secondary</button>
+    <a button class="button-block button-outline-secondary" href="#">a block outline secondary</a>
+    <button class="button-block button-outline-secondary">button block outline secondary</button>
   </p>
 
   <p>
-    <a button class="button-block button-clear-dark" href="#">a[button].button-block.button-clear-dark</a>
-    <button class="button-block button-clear-dark">button.button-block.button-clear-dark</button>
+    <a button class="button-block button-clear-dark" href="#">a block clear dark</a>
+    <button class="button-block button-clear-dark">button block clear dark</button>
   </p>
 
   <p>
-    <a button class="button-block button-round" href="#">a[button].button-block.button-round</a>
-    <button class="button-block button-round">button.button-block.button-round</button>
+    <a button class="button-block button-round" href="#">a block round</a>
+    <button class="button-block button-round">button block ound</button>
   </p>
 
   <p>
-    <a button class="button-block button-round button-outline" href="#">a[button].button-block.button-round.button-outline</a>
-    <button class="button-block button-round button-outline">button.button-block.button-round.button-outline</button>
+    <a button class="button-block button-round button-outline" href="#">a block round outline</a>
+    <button class="button-block button-round button-outline">button block round outline</button>
   </p>
 
 </ion-content>

From 74e1216cde853ad4f23c6682c62a2cb933cf50d2 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 15:23:43 -0600
Subject: [PATCH 019/100] do not dynamically create link element

---
 ionic/config/bootstrap.ts     | 8 +-------
 scripts/e2e/e2e.template.html | 2 +-
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts
index bb4c691bfe..e575f2ddc9 100644
--- a/ionic/config/bootstrap.ts
+++ b/ionic/config/bootstrap.ts
@@ -98,13 +98,7 @@ function setupDom(window, document, config, platform, clickBlock, featureDetect)
 
   // set the mode class name
   // ios/md
-  let mode = config.get('mode');
-  bodyEle.classList.add(mode);
-
-  let linkEle = document.createElement('link');
-  linkEle.setAttribute('href', '../../../css/ionic.' + mode + '.css');
-  linkEle.setAttribute('rel', 'stylesheet');
-  document.head.appendChild(linkEle);
+  bodyEle.classList.add(config.get('mode'));
 
   // touch devices should not use :hover CSS pseudo
   // enable :hover CSS when the "hoverCSS" setting is not false
diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html
index dedac953f5..01cd01b8ab 100644
--- a/scripts/e2e/e2e.template.html
+++ b/scripts/e2e/e2e.template.html
@@ -4,7 +4,7 @@
   <title>Ionic E2E</title>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <!-- <link href="../../../css/ionic.css" rel="stylesheet"> -->
+  <link href="../../../css/ionic.css" rel="stylesheet">
 
   <script>
     if (!console.time) {

From 6524ec69aa7648e3d7cea028452a5dfeeb22a485 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Fri, 4 Dec 2015 17:03:34 -0500
Subject: [PATCH 020/100] refactor(button): fixing some button css and adding
 in the fab scss

references #689
---
 ionic/components/button/button-clear.scss  |  6 ++
 ionic/components/button/button-fab.scss    | 79 ++++++++++------------
 ionic/components/button/button.scss        | 67 +++++++++---------
 ionic/components/button/modes/md.scss      |  2 +
 ionic/components/button/test/fab/main.html | 12 ++--
 5 files changed, 84 insertions(+), 82 deletions(-)

diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
index 59b158a131..bacc71a346 100644
--- a/ionic/components/button/button-clear.scss
+++ b/ionic/components/button/button-clear.scss
@@ -24,6 +24,7 @@
 // Generate Clear Button Colors
 // --------------------------------------------------
 
+// TODO primary activated is wrong
 @each $color-name, $color-value in auxiliary-colors() {
 
   $fg-color: color-shade($color-value);
@@ -33,6 +34,11 @@
     background: transparent;
     color: $fg-color;
 
+    &.activated {
+      opacity: 0.4;
+      background: transparent;
+    }
+
     &:hover:not(.disable-hover) {
       color: color-shade($fg-color);
     }
diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab.scss
index 25859d08e7..26f0b03884 100644
--- a/ionic/components/button/button-fab.scss
+++ b/ionic/components/button/button-fab.scss
@@ -6,53 +6,48 @@
 $button-fab-size:           56px !default;
 
 
-button,
-[button] {
+.button-fab {
+  position: absolute;
+  width: $button-fab-size;
+  height: $button-fab-size;
+  line-height: $button-fab-size;
+  min-width: 0;
+  vertical-align: middle;
 
-  &[fab] {
-    position: absolute;
-    width: $button-fab-size;
-    height: $button-fab-size;
-    line-height: $button-fab-size;
-    min-width: 0;
-    vertical-align: middle;
+  border-radius: 50%;
+  background-clip: padding-box;
 
-    border-radius: 50%;
-    background-clip: padding-box;
+  overflow: hidden;
 
-    overflow: hidden;
+  transition: .2s linear;
+  transition-property: background-color;
 
-    transition: .2s linear;
-    transition-property: background-color;
-
-    font-size: 14px;
-
-    &[fab-center] {
-      left: 50%;
-      margin-left: -$button-fab-size / 2;
-    }
-
-    &[fab-top] {
-      top: 16px;
-    }
-
-    &[fab-right] {
-      right: 16px;
-    }
-
-    &[fab-bottom] {
-      bottom: 16px;
-    }
-
-    &[fab-left] {
-      left: 16px;
-    }
-
-    icon {
-      flex: 1;
-      font-size: 2.8rem;
-    }
+  font-size: 14px;
 
+  icon {
+    flex: 1;
+    font-size: 2.8rem;
   }
 
 }
+
+.button-fab-center {
+  left: 50%;
+  margin-left: -$button-fab-size / 2;
+}
+
+.button-fab-top {
+  top: 16px;
+}
+
+.button-fab-right {
+  right: 16px;
+}
+
+.button-fab-bottom {
+  bottom: 16px;
+}
+
+.button-fab-left {
+  left: 16px;
+}
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 96aaad3c9a..c5cca7f981 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -14,6 +14,16 @@ $button-color-activated:          color-shade($button-color) !default;
 $button-text-color:               inverse($button-color) !default;
 $button-hover-opacity:            0.8 !default;
 
+.button-disabled {
+  opacity: 0.4;
+  cursor: default !important;
+  pointer-events: none;
+}
+
+a.button {
+  text-decoration: none;
+}
+
 .button {
   position: relative;
   display: inline-flex;
@@ -25,7 +35,7 @@ $button-hover-opacity:            0.8 !default;
   margin: $button-margin;
   padding: $button-padding;
   min-height: $button-height;
-  line-height: 1;
+  line-height: $button-height;
 
   border: 1px solid #ccc;
   border: transparent;
@@ -60,47 +70,36 @@ $button-hover-opacity:            0.8 !default;
      opacity: 1;
      background-color: $button-color-activated;
    }
+ }
 
-  // Button Types
-  // --------------------------------------------------
+// Button Types
+// --------------------------------------------------
 
-  .button-block {
-    display: flex;
+.button-block {
+  display: flex;
+  clear: both;
+  margin-right: 0;
+  margin-left: 0;
+  width: 100%;
+
+  &:after {
     clear: both;
-    margin-right: 0;
-    margin-left: 0;
-    width: 100%;
-
-    &:after {
-      clear: both;
-    }
-  }
-
-  .button-full {
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-    border-radius: 0;
-    border-right-width: 0;
-    border-left-width: 0;
-  }
-
-  .button-round {
-    border-radius: $button-round-border-radius;
-    padding: $button-round-padding;
-  }
-
-  .button-disabled {
-    opacity: 0.4;
-    cursor: default !important;
-    pointer-events: none;
   }
 }
 
-a[button] {
-  text-decoration: none;
+.button-full {
+  width: 100%;
+  margin-right: 0;
+  margin-left: 0;
+  border-radius: 0;
+  border-right-width: 0;
+  border-left-width: 0;
 }
 
+.button-round {
+  border-radius: $button-round-border-radius;
+  padding: $button-round-padding;
+}
 
 // TODO
 // button should have classes:
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 6af9a1b61b..e4aa925807 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -100,8 +100,10 @@ $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
 .button-clear {
   opacity: 1;
   box-shadow: none;
+  background: transparent;
 
   &.activated {
+    opacity: 0.4;
     background-color: $button-md-clear-active-background-color;
   }
 }
diff --git a/ionic/components/button/test/fab/main.html b/ionic/components/button/test/fab/main.html
index d081de4cd5..6753bf3364 100644
--- a/ionic/components/button/test/fab/main.html
+++ b/ionic/components/button/test/fab/main.html
@@ -1,24 +1,24 @@
 
-<button fab fab-left fab-top>
+<button class="button-fab button-fab-left button-fab-top">
   <icon add></icon>
 </button>
 
-<button fab fab-center fab-top secondary>
+<button class="button-fab button-fab-center button-fab-top button-secondary">
   <icon add></icon>
 </button>
 
-<button fab fab-right fab-top danger>
+<button class="button-fab button-fab-right button-fab-top button-danger">
   <icon add></icon>
 </button>
 
-<button fab fab-left fab-bottom light>
+<button class="button-fab button-fab-left button-fab-bottom button-light">
   <icon add></icon>
 </button>
 
-<button fab fab-center fab-bottom primary>
+<button class="button-fab button-fab-center button-fab-bottom button-primary">
   <icon add></icon>
 </button>
 
-<button fab fab-right fab-bottom dark>
+<button class="button-fab button-fab-right button-fab-bottom button-dark">
   <icon add></icon>
 </button>

From 831ec87308fa8084ca221f1903e2e9abaf537a53 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 21:34:27 -0600
Subject: [PATCH 021/100] import mode globals in all mode components

---
 ionic/components/action-sheet/action-sheet.scss | 2 +-
 ionic/components/action-sheet/modes/ios.scss    | 2 +-
 ionic/components/action-sheet/modes/md.scss     | 2 +-
 ionic/components/app/modes/ios.scss             | 2 +-
 ionic/components/app/modes/md.scss              | 2 +-
 ionic/components/app/structure.scss             | 2 +-
 ionic/components/app/typography.scss            | 2 +-
 ionic/components/badge/badge.scss               | 2 +-
 ionic/components/button/button-clear.scss       | 2 +-
 ionic/components/button/button-fab.scss         | 2 +-
 ionic/components/button/button-icon.scss        | 2 +-
 ionic/components/button/button-outline.scss     | 2 +-
 ionic/components/button/button-size.scss        | 2 +-
 ionic/components/button/button.scss             | 2 +-
 ionic/components/button/button_OLD.scss         | 2 +-
 ionic/components/button/modes/ios.scss          | 2 +-
 ionic/components/button/modes/md.scss           | 2 +-
 ionic/components/card/card.scss                 | 2 +-
 ionic/components/card/modes/ios.scss            | 2 +-
 ionic/components/card/modes/md.scss             | 2 +-
 ionic/components/checkbox/checkbox.scss         | 2 +-
 ionic/components/checkbox/modes/ios.scss        | 2 +-
 ionic/components/checkbox/modes/md.scss         | 2 +-
 ionic/components/content/modes/ios.scss         | 2 +-
 ionic/components/content/modes/md.scss          | 2 +-
 ionic/components/grid/grid.scss                 | 2 +-
 ionic/components/icon/icon.scss                 | 2 +-
 ionic/components/item/item-media.scss           | 2 +-
 ionic/components/item/item-sliding.scss         | 2 +-
 ionic/components/item/item.scss                 | 2 +-
 ionic/components/item/modes/ios.scss            | 2 +-
 ionic/components/item/modes/md.scss             | 2 +-
 ionic/components/list/list.scss                 | 2 +-
 ionic/components/list/modes/ios.scss            | 2 +-
 ionic/components/list/modes/md.scss             | 2 +-
 ionic/components/menu/menu.scss                 | 2 +-
 ionic/components/menu/modes/ios.scss            | 2 +-
 ionic/components/menu/modes/md.scss             | 2 +-
 ionic/components/modal/modal.scss               | 2 +-
 ionic/components/modal/modes/ios.scss           | 2 +-
 ionic/components/modal/modes/md.scss            | 2 +-
 ionic/components/popup/modes/ios.scss           | 2 +-
 ionic/components/popup/modes/md.scss            | 2 +-
 ionic/components/popup/popup.scss               | 2 +-
 ionic/components/radio/modes/ios.scss           | 2 +-
 ionic/components/radio/modes/md.scss            | 2 +-
 ionic/components/radio/radio.scss               | 2 +-
 ionic/components/scroll/scroll.scss             | 2 +-
 ionic/components/searchbar/modes/ios.scss       | 2 +-
 ionic/components/searchbar/modes/md.scss        | 2 +-
 ionic/components/searchbar/searchbar.scss       | 2 +-
 ionic/components/segment/modes/ios.scss         | 2 +-
 ionic/components/segment/modes/md.scss          | 2 +-
 ionic/components/segment/segment.scss           | 2 +-
 ionic/components/slides/slides.scss             | 2 +-
 ionic/components/switch/modes/ios.scss          | 2 +-
 ionic/components/switch/modes/md.scss           | 2 +-
 ionic/components/switch/switch.scss             | 2 +-
 ionic/components/tabs/modes/ios.scss            | 2 +-
 ionic/components/tabs/modes/md.scss             | 2 +-
 ionic/components/tabs/tabs.scss                 | 2 +-
 ionic/components/tap-click/ripple.scss          | 2 +-
 ionic/components/text-input/label.scss          | 2 +-
 ionic/components/text-input/modes/ios.scss      | 2 +-
 ionic/components/text-input/modes/md.scss       | 2 +-
 ionic/components/text-input/text-input.scss     | 2 +-
 ionic/components/toolbar/modes/ios.scss         | 2 +-
 ionic/components/toolbar/modes/md.scss          | 2 +-
 ionic/components/toolbar/toolbar.scss           | 2 +-
 ionic/{ionic.globals.scss => globals.core.scss} | 0
 ionic/globals.ios.scss                          | 7 +++++++
 ionic/globals.md.scss                           | 7 +++++++
 ionic/platform/cordova-ios.scss                 | 2 +-
 ionic/util/util.scss                            | 2 +-
 74 files changed, 85 insertions(+), 71 deletions(-)
 rename ionic/{ionic.globals.scss => globals.core.scss} (100%)
 create mode 100644 ionic/globals.ios.scss
 create mode 100644 ionic/globals.md.scss

diff --git a/ionic/components/action-sheet/action-sheet.scss b/ionic/components/action-sheet/action-sheet.scss
index ad7ae28ce7..cadcf1bbc3 100644
--- a/ionic/components/action-sheet/action-sheet.scss
+++ b/ionic/components/action-sheet/action-sheet.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Action Sheet
 // --------------------------------------------------
diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index d82136fd4c..a3cc41e673 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../action-sheet";
 
 // iOS Action Sheet
diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index d14e9d4e3b..127c4fea4c 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../action-sheet";
 
 // Material Design Action Sheet
diff --git a/ionic/components/app/modes/ios.scss b/ionic/components/app/modes/ios.scss
index 1b4d4174f3..40976c0d2a 100644
--- a/ionic/components/app/modes/ios.scss
+++ b/ionic/components/app/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 
 // iOS App
 // --------------------------------------------------
diff --git a/ionic/components/app/modes/md.scss b/ionic/components/app/modes/md.scss
index cd561d27e4..bc2b7e763b 100644
--- a/ionic/components/app/modes/md.scss
+++ b/ionic/components/app/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 
 // Material Design App
 // --------------------------------------------------
diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index d42d3fdb67..f9354ac301 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Z-Index
 // --------------------------------------------------
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index 403f79e502..f38e936a98 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Typography
 // -------------------------
diff --git a/ionic/components/badge/badge.scss b/ionic/components/badge/badge.scss
index af59078381..0af4a0c567 100644
--- a/ionic/components/badge/badge.scss
+++ b/ionic/components/badge/badge.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Badge
 // --------------------------------------------------
diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
index bacc71a346..205c3be62d 100644
--- a/ionic/components/button/button-clear.scss
+++ b/ionic/components/button/button-clear.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Clear Button
 // --------------------------------------------------
diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab.scss
index 26f0b03884..7494950782 100644
--- a/ionic/components/button/button-fab.scss
+++ b/ionic/components/button/button-fab.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // FABulous Buttons (Floating Action Button from material)
 // --------------------------------------------------
diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss
index a29bd14fd3..31645d1f0d 100644
--- a/ionic/components/button/button-icon.scss
+++ b/ionic/components/button/button-icon.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Button Icons
 // --------------------------------------------------
diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline.scss
index 3ec1f0a476..1cd0f07822 100644
--- a/ionic/components/button/button-outline.scss
+++ b/ionic/components/button/button-outline.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Outline Button
 // --------------------------------------------------
diff --git a/ionic/components/button/button-size.scss b/ionic/components/button/button-size.scss
index 646d1f3c32..db45559bb3 100644
--- a/ionic/components/button/button-size.scss
+++ b/ionic/components/button/button-size.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Button Sizes
 // --------------------------------------------------
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index c5cca7f981..03e460f1fa 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 $button-font-size:                1.6rem !default;
 $button-margin:                   0.4rem 0.2rem !default;
diff --git a/ionic/components/button/button_OLD.scss b/ionic/components/button/button_OLD.scss
index e40c489e60..17ba64c9f5 100644
--- a/ionic/components/button/button_OLD.scss
+++ b/ionic/components/button/button_OLD.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Button Variables
 // --------------------------------------------------
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index ae3ee9ab77..03e7f03d6b 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../button";
 @import "../button-clear";
 @import "../button-fab";
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index e4aa925807..b34f98b69f 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../button";
 @import "../button-clear";
 @import "../button-fab";
diff --git a/ionic/components/card/card.scss b/ionic/components/card/card.scss
index 9b7e726cfb..3b978ee45b 100644
--- a/ionic/components/card/card.scss
+++ b/ionic/components/card/card.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Card
 // --------------------------------------------------
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index 7e395a9a85..bc8f463cb2 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../card";
 
 // iOS Card
diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss
index 5b2c07324e..58a7c17886 100644
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../card";
 
 // Material Design Card
diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss
index 019ebc82b7..52d55bf78a 100644
--- a/ionic/components/checkbox/checkbox.scss
+++ b/ionic/components/checkbox/checkbox.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Checkbox
 // --------------------------------------------------
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index e02c675d24..39d265054b 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../checkbox";
 
 // iOS Checkbox Structure
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index 5b2696e864..0c97f7e514 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../checkbox";
 
 // Material Design Checkbox
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
index b09806ef91..198f032f27 100644
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 
 // iOS Content
 // --------------------------------------------------
diff --git a/ionic/components/content/modes/md.scss b/ionic/components/content/modes/md.scss
index 35f80f395f..c1ec178d3a 100644
--- a/ionic/components/content/modes/md.scss
+++ b/ionic/components/content/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 
 // Material Design Content Padding
 // --------------------------------------------------
diff --git a/ionic/components/grid/grid.scss b/ionic/components/grid/grid.scss
index d8e848beeb..7b85adff0d 100644
--- a/ionic/components/grid/grid.scss
+++ b/ionic/components/grid/grid.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Grid
 // --------------------------------------------------
diff --git a/ionic/components/icon/icon.scss b/ionic/components/icon/icon.scss
index 2532821cf6..516dcf5ff2 100644
--- a/ionic/components/icon/icon.scss
+++ b/ionic/components/icon/icon.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Icon
 // --------------------------------------------------
diff --git a/ionic/components/item/item-media.scss b/ionic/components/item/item-media.scss
index 70976886f0..c65f6aac5c 100644
--- a/ionic/components/item/item-media.scss
+++ b/ionic/components/item/item-media.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Item Media
 // --------------------------------------------------
diff --git a/ionic/components/item/item-sliding.scss b/ionic/components/item/item-sliding.scss
index 61a6c6d3fa..f6330677cd 100644
--- a/ionic/components/item/item-sliding.scss
+++ b/ionic/components/item/item-sliding.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 
 // The hidden right-side buttons that can be exposed under a list item with dragging.
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index f48f77ca7a..c8a75316b0 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Item
 // --------------------------------------------------
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index c873d5924b..7e05a1e032 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../item";
 
 // iOS Item
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 2481c6df74..aff884fed2 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../item";
 
 // Material Design Item
diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss
index 53b922e553..b17a9af89f 100644
--- a/ionic/components/list/list.scss
+++ b/ionic/components/list/list.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // List
 // --------------------------------------------------
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index 3b6fb4f8ab..56644ae858 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../list";
 
 // iOS List
diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss
index 3b8155dc3e..7a6b761d87 100644
--- a/ionic/components/list/modes/md.scss
+++ b/ionic/components/list/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../list";
 
 // Material Design List
diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss
index a5293db25a..9bf48a9441 100644
--- a/ionic/components/menu/menu.scss
+++ b/ionic/components/menu/menu.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Menu
 // --------------------------------------------------
diff --git a/ionic/components/menu/modes/ios.scss b/ionic/components/menu/modes/ios.scss
index 827aa58d14..d49a000483 100644
--- a/ionic/components/menu/modes/ios.scss
+++ b/ionic/components/menu/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 
 // iOS Menu
 // --------------------------------------------------
diff --git a/ionic/components/menu/modes/md.scss b/ionic/components/menu/modes/md.scss
index d6d9ec791d..cf1b68d53e 100644
--- a/ionic/components/menu/modes/md.scss
+++ b/ionic/components/menu/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 
 // Material Design Menu
 // --------------------------------------------------
diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss
index 63e5ce6929..cdf777bce8 100644
--- a/ionic/components/modal/modal.scss
+++ b/ionic/components/modal/modal.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Modals
 // --------------------------------------------------
diff --git a/ionic/components/modal/modes/ios.scss b/ionic/components/modal/modes/ios.scss
index f92f7cef4c..45c341c13f 100644
--- a/ionic/components/modal/modes/ios.scss
+++ b/ionic/components/modal/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 
 // iOS Modals
 // --------------------------------------------------
diff --git a/ionic/components/modal/modes/md.scss b/ionic/components/modal/modes/md.scss
index b479f9fe36..fd099ec018 100644
--- a/ionic/components/modal/modes/md.scss
+++ b/ionic/components/modal/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 
 // Material Design Modals
 // --------------------------------------------------
diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss
index 3a3fc47773..a1f7c298f0 100644
--- a/ionic/components/popup/modes/ios.scss
+++ b/ionic/components/popup/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../popup";
 
 // iOS Popups
diff --git a/ionic/components/popup/modes/md.scss b/ionic/components/popup/modes/md.scss
index 73db6d7187..75e49bba86 100644
--- a/ionic/components/popup/modes/md.scss
+++ b/ionic/components/popup/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../popup";
 
 // Material Design Popups
diff --git a/ionic/components/popup/popup.scss b/ionic/components/popup/popup.scss
index e41d71095b..4429b65223 100644
--- a/ionic/components/popup/popup.scss
+++ b/ionic/components/popup/popup.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Popups
 // --------------------------------------------------
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index d13460e8ea..59518488a2 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../radio";
 
 // iOS Radio
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index c6e301d2ff..dbe999d0dc 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../radio";
 
 // Material Design Radio
diff --git a/ionic/components/radio/radio.scss b/ionic/components/radio/radio.scss
index aa8578c546..6fcf12120d 100644
--- a/ionic/components/radio/radio.scss
+++ b/ionic/components/radio/radio.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Radio
 // --------------------------------------------------
diff --git a/ionic/components/scroll/scroll.scss b/ionic/components/scroll/scroll.scss
index fcfdc391b6..8b4557c491 100644
--- a/ionic/components/scroll/scroll.scss
+++ b/ionic/components/scroll/scroll.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 ion-scroll {
   position: relative;
diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index a9f3ec8467..acd600659d 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../searchbar";
 
 // iOS Searchbar
diff --git a/ionic/components/searchbar/modes/md.scss b/ionic/components/searchbar/modes/md.scss
index 201d17706c..d90cc29c98 100644
--- a/ionic/components/searchbar/modes/md.scss
+++ b/ionic/components/searchbar/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../searchbar";
 
 // Material Design Searchbar
diff --git a/ionic/components/searchbar/searchbar.scss b/ionic/components/searchbar/searchbar.scss
index 9b70f89662..1da21d8d86 100644
--- a/ionic/components/searchbar/searchbar.scss
+++ b/ionic/components/searchbar/searchbar.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Search Bar
 // --------------------------------------------------
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index 333a04d118..e6beac0bde 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../segment";
 
 // iOS Segment
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index f80c29dd53..6b3377c622 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../segment";
 
 // iOS Segment
diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss
index 54bec89cef..821d6da4b6 100644
--- a/ionic/components/segment/segment.scss
+++ b/ionic/components/segment/segment.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Segment
 // --------------------------------------------------
diff --git a/ionic/components/slides/slides.scss b/ionic/components/slides/slides.scss
index eb91036869..a1987c8185 100644
--- a/ionic/components/slides/slides.scss
+++ b/ionic/components/slides/slides.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 ion-swipe-slides {
   display: block;
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index 9c1005049b..901bf3dd52 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../switch";
 
 // iOS Switch
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index 6689b22e4a..fb581e3006 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../switch";
 
 // Material Design Switch
diff --git a/ionic/components/switch/switch.scss b/ionic/components/switch/switch.scss
index ddb264eba6..1dcec2e97a 100644
--- a/ionic/components/switch/switch.scss
+++ b/ionic/components/switch/switch.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Switch
 // --------------------------------------------------
diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss
index 1c08e2eeed..601a0517bd 100644
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../tabs";
 
 // iOS Tabs
diff --git a/ionic/components/tabs/modes/md.scss b/ionic/components/tabs/modes/md.scss
index 790b2e55e8..46f90e6156 100644
--- a/ionic/components/tabs/modes/md.scss
+++ b/ionic/components/tabs/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../tabs";
 
 // Material Design Tabs
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index 978263b012..ae26419ea9 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Tabs
 // --------------------------------------------------
diff --git a/ionic/components/tap-click/ripple.scss b/ionic/components/tap-click/ripple.scss
index 4dd25c5c52..b058893ca6 100644
--- a/ionic/components/tap-click/ripple.scss
+++ b/ionic/components/tap-click/ripple.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.md";
 
 // Material Design Ripple Effect
 // --------------------------------------------------
diff --git a/ionic/components/text-input/label.scss b/ionic/components/text-input/label.scss
index 5dfd1df34d..a1af3688b3 100644
--- a/ionic/components/text-input/label.scss
+++ b/ionic/components/text-input/label.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Label
 // --------------------------------------------------
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
index b6ef39cfe5..2b8ff5410a 100644
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 @import "../label";
 @import "../text-input";
 
diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss
index ee210862e1..e604bae33f 100644
--- a/ionic/components/text-input/modes/md.scss
+++ b/ionic/components/text-input/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 @import "../label";
 @import "../text-input";
 
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index d1bc7879b3..0b020aa81c 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Text Input
 // --------------------------------------------------
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 96b46ca775..e0e012acf7 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.ios";
 
 // iOS Toolbar
 // --------------------------------------------------
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 418118debf..bef35e0c6b 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -1,4 +1,4 @@
-@import "../../../ionic.globals";
+@import "../../../globals.md";
 
 // Material Design Toolbar
 // --------------------------------------------------
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 6c090b272d..e53669f031 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -1,4 +1,4 @@
-@import "../../ionic.globals";
+@import "../../globals.core";
 
 // Toolbar
 // --------------------------------------------------
diff --git a/ionic/ionic.globals.scss b/ionic/globals.core.scss
similarity index 100%
rename from ionic/ionic.globals.scss
rename to ionic/globals.core.scss
diff --git a/ionic/globals.ios.scss b/ionic/globals.ios.scss
new file mode 100644
index 0000000000..2b4e2f6a4e
--- /dev/null
+++ b/ionic/globals.ios.scss
@@ -0,0 +1,7 @@
+
+// Global Core
+@import "globals.core";
+
+
+// Global iOS
+@import "themes/default.ios";
diff --git a/ionic/globals.md.scss b/ionic/globals.md.scss
new file mode 100644
index 0000000000..9b16483290
--- /dev/null
+++ b/ionic/globals.md.scss
@@ -0,0 +1,7 @@
+
+// Core Globals
+@import "globals.core";
+
+
+// Material Design Globals
+@import "themes/default.md";
diff --git a/ionic/platform/cordova-ios.scss b/ionic/platform/cordova-ios.scss
index c7715e991a..25b7e84b1a 100644
--- a/ionic/platform/cordova-ios.scss
+++ b/ionic/platform/cordova-ios.scss
@@ -1,4 +1,4 @@
-@import "../ionic.globals";
+@import "../globals.core";
 
 // iOS Cordova
 // --------------------------------------------------
diff --git a/ionic/util/util.scss b/ionic/util/util.scss
index cd70584b19..70b65c4952 100755
--- a/ionic/util/util.scss
+++ b/ionic/util/util.scss
@@ -1,4 +1,4 @@
-@import "../ionic.globals";
+@import "../globals.core";
 
 .align-left {
   text-align: left;

From 78a3ce12b17e6acdf9cf502d0f629bac2d3e1257 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 21:53:48 -0600
Subject: [PATCH 022/100] move button colors to ios button

---
 ionic/components/button/button-clear.scss   | 27 ----------
 ionic/components/button/button-outline.scss | 32 -----------
 ionic/components/button/button.scss         |  2 +-
 ionic/components/button/modes/ios.scss      | 59 +++++++++++++++++++++
 ionic/components/button/modes/md.scss       |  2 +-
 ionic/components/checkbox/modes/ios.scss    |  6 +--
 ionic/components/checkbox/modes/md.scss     |  2 +-
 ionic/components/radio/modes/ios.scss       |  2 +-
 ionic/components/radio/modes/md.scss        |  2 +-
 ionic/components/segment/modes/ios.scss     |  2 +-
 ionic/components/switch/modes/ios.scss      |  2 +-
 ionic/components/switch/modes/md.scss       |  4 +-
 ionic/themes/dark.scss                      | 29 ----------
 ionic/themes/default.scss                   | 13 -----
 14 files changed, 71 insertions(+), 113 deletions(-)
 delete mode 100644 ionic/themes/dark.scss

diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
index 205c3be62d..254884bc4b 100644
--- a/ionic/components/button/button-clear.scss
+++ b/ionic/components/button/button-clear.scss
@@ -18,30 +18,3 @@
     color: color-shade($button-color);
   }
 }
-
-
-
-// Generate Clear Button Colors
-// --------------------------------------------------
-
-// TODO primary activated is wrong
-@each $color-name, $color-value in auxiliary-colors() {
-
-  $fg-color: color-shade($color-value);
-
-  .button-clear-#{$color-name} {
-    border-color: transparent;
-    background: transparent;
-    color: $fg-color;
-
-    &.activated {
-      opacity: 0.4;
-      background: transparent;
-    }
-
-    &:hover:not(.disable-hover) {
-      color: color-shade($fg-color);
-    }
-  }
-
-}
diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline.scss
index 1cd0f07822..6d5fa8a09a 100644
--- a/ionic/components/button/button-outline.scss
+++ b/ionic/components/button/button-outline.scss
@@ -14,35 +14,3 @@
     background-color: $button-color;
   }
 }
-
-
-// Outline Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-outline($fg-color) {
-
-  border-color: $fg-color;
-  background: transparent;
-  color: $fg-color;
-
-  &.activated {
-    color: $background-color;
-    background-color: $fg-color;
-  }
-
-}
-
-
-// Outline Clear Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in auxiliary-colors() {
-
-  .button-outline-#{$color-name} {
-
-    $fg-color: color-shade($color-value, 5%);
-    @include button-outline($fg-color);
-
-  }
-
-}
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 03e460f1fa..fda04738e1 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -9,7 +9,7 @@ $button-border-radius:            4px !default;
 $button-round-padding:            0 2.6rem !default;
 $button-round-border-radius:      64px !default;
 
-$button-color:                    color(primary) !default;
+$button-color:                    map-get($colors, primary) !default;
 $button-color-activated:          color-shade($button-color) !default;
 $button-text-color:               inverse($button-color) !default;
 $button-hover-opacity:            0.8 !default;
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index 03e7f03d6b..4e42d10b34 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -13,3 +13,62 @@
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
 }
+
+
+// Generate Clear Button Colors
+// --------------------------------------------------
+
+// TODO primary activated is wrong
+@each $color-name, $color-value in $colors {
+
+  $fg-color: color-shade($color-value);
+
+  .button-clear-#{$color-name} {
+    border-color: transparent;
+    background: transparent;
+    color: $fg-color;
+
+    &.activated {
+      opacity: 0.4;
+      background: transparent;
+    }
+
+    &:hover:not(.disable-hover) {
+      color: color-shade($fg-color);
+    }
+  }
+
+}
+
+
+
+// Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-outline($fg-color) {
+
+  border-color: $fg-color;
+  background: transparent;
+  color: $fg-color;
+
+  &.activated {
+    color: $background-color;
+    background-color: $fg-color;
+  }
+
+}
+
+
+// Outline Clear Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors {
+
+  .button-outline-#{$color-name} {
+
+    $fg-color: color-shade($color-value, 5%);
+    @include button-outline($fg-color);
+
+  }
+
+}
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index b34f98b69f..337926db57 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -138,7 +138,7 @@ $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
 // Generate Material Design Button Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in auxiliary-colors() {
+@each $color-name, $color-value in $colors {
 
   @include button-theme-md($color-name, $color-value);
 
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index 39d265054b..74c82081b0 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -7,8 +7,8 @@
 $checkbox-ios-icon-size:             21px !default;
 $checkbox-ios-background-color-off:  $list-background-color !default;
 $checkbox-ios-border-color-off:      $list-border-color !default;
-$checkbox-ios-background-color-on:   color(primary) !default;
-$checkbox-ios-border-color-on:       color(primary) !default;
+$checkbox-ios-background-color-on:   map-get($colors, primary) !default;
+$checkbox-ios-border-color-on:       map-get($colors, primary) !default;
 $checkbox-ios-checkmark-color-on:    $background-color !default;
 
 
@@ -70,7 +70,7 @@ checkbox-icon {
 // Generate iOS Checkbox Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in auxiliary-colors() {
+@each $color-name, $value in $colors {
 
   @include checkbox-theme-ios($color-name, $value);
 
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index 0c97f7e514..8e9d7526bc 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -79,7 +79,7 @@ checkbox-icon {
 // Generate Material Design Checkbox Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in auxiliary-colors() {
+@each $color-name, $color-value in $colors {
 
   @include checkbox-theme-md($color-name, $color-value);
 
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 59518488a2..7a04a099eb 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -68,7 +68,7 @@ radio-icon {
 // Generate iOS Radio Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in auxiliary-colors() {
+@each $color-name, $color-value in $colors {
 
   @include radio-theme-ios($color-name, $color-value);
 
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index dbe999d0dc..a2441f7456 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -88,7 +88,7 @@ media-radio {
 // Generate Material Design Radio Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in auxiliary-colors() {
+@each $color-name, $color-value in $colors {
 
   @include radio-theme-md($color-name, $color-value);
 
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index e6beac0bde..d633beba72 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -11,7 +11,7 @@ $segment-button-ios-bg-color:                 transparent !default;
 $segment-button-ios-font-size:                1.3rem !default;
 $segment-button-ios-border-radius:            4px !default;
 
-$segment-button-ios-bg-color-activated:       color(primary) !default;
+$segment-button-ios-bg-color-activated:       map-get($colors, primary) !default;
 $segment-button-ios-text-color:               inverse($segment-button-ios-bg-color-activated) !default;
 $segment-button-ios-activated-transition:     100ms all linear !default;
 $segment-button-ios-hover-opacity:            0.16 !default;
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index 901bf3dd52..a2b3a23fe7 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -145,7 +145,7 @@ ion-switch {
 // Generate iOS Switch Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in auxiliary-colors() {
+@each $color-name, $value in $colors {
 
   @include switch-theme-ios($color-name, $value);
 
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index fb581e3006..002976a84c 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -4,7 +4,7 @@
 // Material Design Switch
 // --------------------------------------------------
 
-$switch-md-active-color:                 color(primary) !default;
+$switch-md-active-color:                 map-get($colors, primary) !default;
 
 $switch-md-track-width:                  36px !default;
 $switch-md-track-height:                 14px !default;
@@ -105,7 +105,7 @@ ion-switch {
 // Generate Material Design Switch Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in auxiliary-colors() {
+@each $color-name, $value in $colors {
 
   @include switch-theme-md($color-name, $value);
 
diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss
deleted file mode 100644
index 38608c8cf7..0000000000
--- a/ionic/themes/dark.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-
-// Dark Theme
-// ----------------------------------
-
-$colors: (
-
-  primary:    #387ef5,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #fff,
-  dark:       #333,
-
-) !default;
-
-
-$text-color:                 #fff !default;
-$background-color:           #222 !default;
-
-$list-text-color:            $text-color !default;
-$list-background-color:      $background-color !default;
-$list-border-color:          #666 !default;
-
-$link-color:                 map-get($colors, primary) !default;
-
-$toolbar-background-color:   #111 !default;
-$toolbar-border-color:       #000 !default;
-$toolbar-text-color:         $text-color !default;
-$toolbar-active-color:       $link-color !default;
-$toolbar-inactive-color:     #8c8c8c !default;
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index c8c0a92b22..733be5a230 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -28,16 +28,3 @@ $toolbar-border-color:       #b2b2b2 !default;
 $toolbar-text-color:         $text-color !default;
 $toolbar-active-color:       $link-color !default;
 $toolbar-inactive-color:     #8c8c8c !default;
-
-
-
-
-@function color($color-name) {
-  @return map-get($colors, $color-name);
-}
-
-
-@function auxiliary-colors() {
-  // get a map of all the colors, except "primary"
-  @return map-remove($colors, primary);
-}

From d8f235d09d1d4686a6dc7e834e6242e3aaa5f3ee Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 23:23:55 -0600
Subject: [PATCH 023/100] fix color inheritance, core components should not
 contain colors

---
 ionic/components/button/button-clear.scss   |   5 -
 ionic/components/button/button-outline.scss |  16 --
 ionic/components/button/button.scss         |  46 +-----
 ionic/components/button/button_OLD.scss     | 158 --------------------
 ionic/components/button/modes/ios.scss      |  89 ++++++++++-
 ionic/components/button/modes/md.scss       |  26 +++-
 ionic/components/card/modes/ios.scss        |   2 +-
 ionic/components/card/modes/md.scss         |   2 +-
 ionic/components/checkbox/modes/ios.scss    |  14 +-
 ionic/components/checkbox/modes/md.scss     |  12 +-
 ionic/components/content/modes/ios.scss     |   6 +-
 ionic/components/item/item.scss             |   3 -
 ionic/components/item/modes/ios.scss        |   8 +-
 ionic/components/item/modes/md.scss         |   7 +-
 ionic/components/list/list.scss             |   4 -
 ionic/components/list/modes/ios.scss        |   2 -
 ionic/components/list/modes/md.scss         |   4 +
 ionic/components/popup/modes/md.scss        |   2 +-
 ionic/components/radio/modes/ios.scss       |   6 +-
 ionic/components/radio/modes/md.scss        |   6 +-
 ionic/components/searchbar/modes/ios.scss   |   2 +-
 ionic/components/segment/modes/ios.scss     |   6 +-
 ionic/components/segment/modes/md.scss      |   8 +-
 ionic/components/switch/modes/ios.scss      |  10 +-
 ionic/components/switch/modes/md.scss       |   6 +-
 ionic/components/tabs/modes/ios.scss        |  40 ++++-
 ionic/components/tabs/modes/md.scss         |  36 ++++-
 ionic/components/tabs/tabs.scss             |  40 -----
 ionic/components/text-input/modes/ios.scss  |   9 ++
 ionic/components/text-input/modes/md.scss   |  14 +-
 ionic/components/text-input/text-input.scss |  11 --
 ionic/components/toolbar/modes/ios.scss     |  13 +-
 ionic/components/toolbar/modes/md.scss      |  18 +++
 ionic/components/toolbar/toolbar.scss       |  12 --
 ionic/themes/default.ios.scss               |  15 +-
 ionic/themes/default.md.scss                |  17 +--
 ionic/themes/default.scss                   |   3 +-
 ionic/util/functions.scss                   |   8 +
 38 files changed, 313 insertions(+), 373 deletions(-)
 delete mode 100644 ionic/components/button/button-outline.scss
 delete mode 100644 ionic/components/button/button_OLD.scss

diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
index 254884bc4b..85c890bafa 100644
--- a/ionic/components/button/button-clear.scss
+++ b/ionic/components/button/button-clear.scss
@@ -6,15 +6,10 @@
 .button-clear {
   border-color: transparent;
   background: transparent;
-  color: color-shade($button-color);
 
   &.activated {
     opacity: 0.4;
     background: transparent;
   }
 
-  &:hover:not(.disable-hover) {
-    opacity: 0.6;
-    color: color-shade($button-color);
-  }
 }
diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline.scss
deleted file mode 100644
index 6d5fa8a09a..0000000000
--- a/ionic/components/button/button-outline.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "../../globals.core";
-
-// Outline Button
-// --------------------------------------------------
-
-.button-outline {
-  border: 1px solid $button-color;
-  background: transparent;
-  color: $button-color;
-
-  &.activated {
-    opacity: 1;
-    color: $background-color;
-    background-color: $button-color;
-  }
-}
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index fda04738e1..4ea3cdb47c 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -1,5 +1,8 @@
 @import "../../globals.core";
 
+// Buttons
+// --------------------------------------------------
+
 $button-font-size:                1.6rem !default;
 $button-margin:                   0.4rem 0.2rem !default;
 $button-padding:                  0 1em !default;
@@ -9,10 +12,6 @@ $button-border-radius:            4px !default;
 $button-round-padding:            0 2.6rem !default;
 $button-round-border-radius:      64px !default;
 
-$button-color:                    map-get($colors, primary) !default;
-$button-color-activated:          color-shade($button-color) !default;
-$button-text-color:               inverse($button-color) !default;
-$button-hover-opacity:            0.8 !default;
 
 .button-disabled {
   opacity: 0.4;
@@ -59,17 +58,6 @@ a.button {
   cursor: pointer;
   @include user-select-none();
   @include appearance(none);
-
-  background: $button-color;
-   color: $button-text-color;
-   &:hover:not(.disable-hover) {
-     opacity: $button-hover-opacity;
-     text-decoration: none;
-   }
-   &.activated {
-     opacity: 1;
-     background-color: $button-color-activated;
-   }
  }
 
 // Button Types
@@ -123,31 +111,3 @@ a.button {
 // button-disabled should stand alone(?)
 // button-sizes should stand alone (button-small, button-large, etc)
 // button-fab errrrr
-
-
-// Default Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-default($bg-color, $bg-color-activated, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  &.activated {
-    background-color: $bg-color-activated;
-  }
-}
-
-
-// Generate Default Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  .button-#{$color-name} {
-    $bg-color: $color-value;
-    $bg-color-activated: color-shade($bg-color);
-    $text-color: inverse($bg-color);
-    @include button-default($bg-color, $bg-color-activated, $text-color);
-  }
-
-}
diff --git a/ionic/components/button/button_OLD.scss b/ionic/components/button/button_OLD.scss
deleted file mode 100644
index 17ba64c9f5..0000000000
--- a/ionic/components/button/button_OLD.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-@import "../../globals.core";
-
-// Button Variables
-// --------------------------------------------------
-
-$button-font-size:                1.6rem !default;
-$button-margin:                   0.4rem 0.2rem !default;
-$button-padding:                  0 1em !default;
-$button-height:                   2.8em !default;
-$button-border-radius:            4px !default;
-
-$button-round-padding:            0 2.6rem !default;
-$button-round-border-radius:      64px !default;
-
-$button-color:                    color(primary) !default;
-$button-color-activated:          color-shade($button-color) !default;
-$button-text-color:               inverse($button-color) !default;
-$button-hover-opacity:            0.8 !default;
-
-
-// Default Button
-// --------------------------------------------------
-
-button,
-[button] {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-
-  transition: background-color, opacity 100ms linear;
-
-  margin: $button-margin;
-  padding: $button-padding;
-  min-height: $button-height;
-  line-height: 1;
-
-  border: 1px solid #ccc;
-  border: transparent;
-  border-radius: $button-border-radius;
-
-  font-size: $button-font-size;
-  font-family: inherit;
-  font-variant: inherit;
-  font-style: inherit;
-
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-
-  text-align: center;
-  text-transform: none;
-
-  vertical-align: top; // the better option for most scenarios
-  vertical-align: -webkit-baseline-middle; // the best for those that support it
-
-  cursor: pointer;
-  @include user-select-none();
-  @include appearance(none);
-
-  background: $button-color;
-  color: $button-text-color;
-
-  &:hover:not(.disable-hover) {
-    opacity: $button-hover-opacity;
-    text-decoration: none;
-  }
-
-  &.activated {
-    opacity: 1;
-    background-color: $button-color-activated;
-  }
-
-
-  // Button Types
-  // --------------------------------------------------
-
-  &[block] {
-    display: flex;
-    clear: both;
-    margin-right: 0;
-    margin-left: 0;
-    width: 100%;
-
-    &:after {
-      clear: both;
-    }
-  }
-
-  &[full] {
-    width: 100%;
-    margin-right: 0;
-    margin-left: 0;
-    border-radius: 0;
-    border-right-width: 0;
-    border-left-width: 0;
-
-    &[outline] {
-      border-radius: 0;
-      border-right-width: 0;
-      border-left-width: 0;
-    }
-  }
-
-  &[round] {
-    border-radius: $button-round-border-radius;
-    padding: $button-round-padding;
-  }
-
-  &[disabled] {
-    opacity: 0.4;
-    cursor: default !important;
-    pointer-events: none;
-  }
-
-}
-
-a[button] {
-  text-decoration: none;
-}
-
-[padding] > button[block]:first-child,
-[padding] > [button][block]:first-child {
-  margin-top: 0;
-}
-
-
-// Default Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-default($bg-color, $bg-color-activated, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  &.activated {
-    background-color: $bg-color-activated;
-  }
-}
-
-
-// Generate Default Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  button[#{$color-name}],
-  [button][#{$color-name}] {
-
-    $bg-color: $color-value;
-    $bg-color-activated: color-shade($bg-color);
-    $text-color: inverse($bg-color);
-    @include button-default($bg-color, $bg-color-activated, $text-color);
-
-  }
-
-}
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index 4e42d10b34..d46ce704d3 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -3,23 +3,102 @@
 @import "../button-clear";
 @import "../button-fab";
 @import "../button-icon";
-@import "../button-outline";
 @import "../button-size";
 
-// iOS Button (largely the core button styles)
+// iOS Button
 // --------------------------------------------------
 
+$button-ios-color:                    map-get($colors-ios, primary) !default;
+$button-ios-color-activated:          color-shade($button-ios-color) !default;
+$button-ios-text-color:               inverse($button-ios-color) !default;
+$button-ios-hover-opacity:            0.8 !default;
+
+
+.button {
+  background: $button-ios-color;
+  color: $button-ios-text-color;
+
+  &:hover:not(.disable-hover) {
+     opacity: $button-ios-hover-opacity;
+     text-decoration: none;
+   }
+
+   &.activated {
+     opacity: 1;
+     background-color: $button-ios-color-activated;
+   }
+}
+
+
 .button-block {
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
 }
 
 
+// Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  color: color-shade($button-ios-color);
+
+  &:hover:not(.disable-hover) {
+    opacity: 0.6;
+    color: color-shade($button-ios-color);
+  }
+}
+
+
+// Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border: 1px solid $button-ios-color;
+  background: transparent;
+  color: $button-ios-color;
+
+  &.activated {
+    opacity: 1;
+    color: $background-ios-color;
+    background-color: $button-ios-color;
+  }
+}
+
+
+
+// Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-default($bg-color, $bg-color-activated, $fg-color) {
+  background-color: $bg-color;
+  color: $fg-color;
+
+  &.activated {
+    background-color: $bg-color-activated;
+  }
+}
+
+
+// Generate Default Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $fg-color: inverse($bg-color);
+    @include button-default($bg-color, $bg-color-activated, $fg-color);
+  }
+
+}
+
+
 // Generate Clear Button Colors
 // --------------------------------------------------
 
 // TODO primary activated is wrong
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
 
   $fg-color: color-shade($color-value);
 
@@ -52,7 +131,7 @@
   color: $fg-color;
 
   &.activated {
-    color: $background-color;
+    color: $background-ios-color;
     background-color: $fg-color;
   }
 
@@ -62,7 +141,7 @@
 // Outline Clear Button Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
 
   .button-outline-#{$color-name} {
 
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 337926db57..4d4050ffa1 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -3,7 +3,6 @@
 @import "../button-clear";
 @import "../button-fab";
 @import "../button-icon";
-@import "../button-outline";
 @import "../button-size";
 
 // Material Design Button
@@ -25,6 +24,11 @@ $button-md-clear-active-background-color:  rgba(158, 158, 158, 0.2) !default;
 $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1) !default;
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
 
+$button-md-color:                          map-get($colors-md, primary) !default;
+$button-md-color-activated:                color-shade($button-md-color) !default;
+$button-md-text-color:                     inverse($button-md-color) !default;
+$button-md-hover-opacity:                  0.8 !default;
+
 
 .button {
   border-radius: $button-md-border-radius;
@@ -93,7 +97,7 @@ $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
   }
 
   md-ripple {
-    background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
+    background: rgba( red($button-md-color), green($button-md-color), blue($button-md-color), 0.1);
   }
 }
 
@@ -108,6 +112,22 @@ $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
   }
 }
 
+
+// Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border: 1px solid $button-md-color;
+  background: transparent;
+  color: $button-md-color;
+
+  &.activated {
+    opacity: 1;
+    color: $background-md-color;
+    background-color: $button-md-color;
+  }
+}
+
 // Material Design Button Color Mixin
 // --------------------------------------------------
 
@@ -138,7 +158,7 @@ $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4p
 // Generate Material Design Button Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-md {
 
   @include button-theme-md($color-name, $color-value);
 
diff --git a/ionic/components/card/modes/ios.scss b/ionic/components/card/modes/ios.scss
index bc8f463cb2..a26627c934 100644
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -17,7 +17,7 @@ $card-ios-padding-left:                16px !default;
 $card-ios-padding-media-top:           10px !default;
 $card-ios-padding-media-bottom:        9px !default;
 
-$card-ios-background-color:            $list-background-color !default;
+$card-ios-background-color:            $list-ios-background-color !default;
 $card-ios-box-shadow:                  0 1px 2px rgba(0,0,0,.3) !default;
 $card-ios-border-radius:               2px !default;
 $card-ios-font-size:                   1.4rem !default;
diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss
index 58a7c17886..43b1537ae7 100644
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -20,7 +20,7 @@ $card-md-padding-media-bottom:        10px !default;
 $card-md-avatar-size:                 4rem !default;
 $card-md-thumbnail-size:              8rem !default;
 
-$card-md-background-color:            $list-background-color !default;
+$card-md-background-color:            $list-md-background-color !default;
 $card-md-box-shadow:                  0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 $card-md-border-radius:               2px !default;
 $card-md-font-size:                   1.4rem !default;
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index 74c82081b0..721c1a6fa4 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -5,11 +5,11 @@
 // --------------------------------------------------
 
 $checkbox-ios-icon-size:             21px !default;
-$checkbox-ios-background-color-off:  $list-background-color !default;
-$checkbox-ios-border-color-off:      $list-border-color !default;
-$checkbox-ios-background-color-on:   map-get($colors, primary) !default;
-$checkbox-ios-border-color-on:       map-get($colors, primary) !default;
-$checkbox-ios-checkmark-color-on:    $background-color !default;
+$checkbox-ios-background-color-off:  $list-ios-background-color !default;
+$checkbox-ios-border-color-off:      $list-ios-border-color !default;
+$checkbox-ios-background-color-on:   map-get($colors-ios, primary) !default;
+$checkbox-ios-border-color-on:       map-get($colors-ios, primary) !default;
+$checkbox-ios-checkmark-color-on:    $background-ios-color !default;
 
 
 ion-checkbox {
@@ -33,7 +33,7 @@ ion-checkbox {
   }
 
   &.item.activated {
-    background-color: $list-background-color;
+    background-color: $list-ios-background-color;
   }
 
 }
@@ -70,7 +70,7 @@ checkbox-icon {
 // Generate iOS Checkbox Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors {
+@each $color-name, $value in $colors-ios {
 
   @include checkbox-theme-ios($color-name, $value);
 
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index 8e9d7526bc..f0df3b9a06 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -5,13 +5,13 @@
 // --------------------------------------------------
 
 $checkbox-md-icon-size:             16px !default;
-$checkbox-md-background-color-off:  $list-background-color !default;
+$checkbox-md-background-color-off:  $list-md-background-color !default;
 $checkbox-md-border-width:          2px !default;
 $checkbox-md-border-radius:         2px !default;
 $checkbox-md-border-color-off:      darken($item-md-border-color, 40%) !default;
-$checkbox-md-background-color-on:   color(primary) !default;
-$checkbox-md-border-color-on:       color(primary) !default;
-$checkbox-md-checkmark-color-on:    $background-color !default;
+$checkbox-md-background-color-on:   map-get($colors-md, primary) !default;
+$checkbox-md-border-color-on:       map-get($colors-md, primary) !default;
+$checkbox-md-checkmark-color-on:    $background-md-color !default;
 
 
 ion-checkbox {
@@ -76,10 +76,10 @@ checkbox-icon {
 }
 
 
-// Generate Material Design Checkbox Auxiliary Colors
+// Generate Material Design Checkbox Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-md {
 
   @include checkbox-theme-md($color-name, $color-value);
 
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
index 198f032f27..0ac8f94ce6 100644
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -3,7 +3,7 @@
 // iOS Content
 // --------------------------------------------------
 
-$outer-content-md-background-color:         #efeff4 !default;
+$outer-content-ios-background-color:         #efeff4 !default;
 
 
 body,
@@ -16,7 +16,7 @@ a {
 }
 
 .outer-content {
-  background: $outer-content-md-background-color;
+  background: $outer-content-ios-background-color;
 }
 
 ion-nav.has-views,
@@ -24,7 +24,7 @@ ion-tab.has-views {
   background: #000;
 }
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
   h1, h2, h3, h4, h5, h6,
   p,
   span,
diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index c8a75316b0..c7e4998fda 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -17,9 +17,6 @@
   text-align: initial;
   overflow: hidden;
 
-  background-color: $list-background-color;
-  color: $list-text-color;
-
   box-sizing: border-box;
 
   &[no-lines] {
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 7e05a1e032..ea92fe34f4 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -13,10 +13,16 @@ $item-ios-divider-bg:                 #f7f7f7 !default;
 $item-ios-divider-color:              #222 !default;
 $item-ios-divider-padding:            5px 15px !default;
 
-$item-ios-sliding-content-bg:         $background-color !default;
+$item-ios-sliding-content-bg:         $background-ios-color !default;
 $item-ios-sliding-transition:         transform 250ms ease-in-out !default;
 
 
+.item {
+  background-color: $list-ios-background-color;
+  color: $list-ios-text-color;
+}
+
+
 ion-item-group {
   .item:first-child {
     .item-inner {
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index aff884fed2..28a83da50c 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -4,7 +4,7 @@
 // Material Design Item
 // --------------------------------------------------
 
-$item-md-border-color:                grayscale(lighten($list-border-color, 8%)) !default;
+$item-md-border-color:                grayscale(lighten($list-md-border-color, 8%)) !default;
 $item-md-activated-background-color:  #f1f1f1 !default;
 $item-md-font-size:                   1.6rem !default;
 
@@ -30,7 +30,7 @@ $item-md-divider-bg:                 #fff !default;
 $item-md-divider-color:              #222 !default;
 $item-md-divider-padding:            5px 15px !default;
 
-$item-md-sliding-content-bg:         $background-color !default;
+$item-md-sliding-content-bg:         $background-md-color !default;
 $item-md-sliding-transition:         transform 250ms ease-in-out !default;
 
 
@@ -53,6 +53,9 @@ ion-note {
   font-weight: normal;
   box-shadow: none;
 
+  background-color: $list-md-background-color;
+  color: $list-md-text-color;
+
   h1 {
     margin: 0 0 2px;
     font-size: 2.4rem;
diff --git a/ionic/components/list/list.scss b/ionic/components/list/list.scss
index b17a9af89f..147dd359b0 100644
--- a/ionic/components/list/list.scss
+++ b/ionic/components/list/list.scss
@@ -20,8 +20,4 @@ ion-list {
 ion-list[inset] {
   overflow: hidden;
   transform: translateZ(0);
-
-  ion-list-header {
-    background-color: $list-background-color;
-  }
 }
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index 56644ae858..f377a826fd 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -21,8 +21,6 @@ $list-ios-header-font-weight:         500 !default;
 $list-ios-header-letter-spacing:      0.1rem !default;
 $list-ios-header-color:               #333 !default;
 
-$list-ios-border-color:               $list-border-color !default;
-
 
 /****************/
 /* DEFAULT LIST */
diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss
index 7a6b761d87..b8b720a424 100644
--- a/ionic/components/list/modes/md.scss
+++ b/ionic/components/list/modes/md.scss
@@ -130,6 +130,10 @@ ion-list[inset] {
   + ion-list[inset] {
     margin-top: 0;
   }
+
+  ion-list-header {
+    background-color: $list-md-background-color;
+  }
 }
 
 
diff --git a/ionic/components/popup/modes/md.scss b/ionic/components/popup/modes/md.scss
index 75e49bba86..5e57c9f567 100644
--- a/ionic/components/popup/modes/md.scss
+++ b/ionic/components/popup/modes/md.scss
@@ -18,7 +18,7 @@ $popup-md-button-min-height:              36px !default;
 
 $popup-md-prompt-input-border-color:      #dedede !default;
 $popup-md-prompt-input-text-color:        #000000 !default;
-$popup-md-prompt-input-highlight-color:   map-get($colors, primary) !default;
+$popup-md-prompt-input-highlight-color:   map-get($colors-md, primary) !default;
 $popup-md-prompt-input-placeholder-color: #b9b9b9 !default;
 $popup-md-prompt-input-margin-top:        5px !default;
 $popup-md-prompt-input-margin-bottom:     5px !default;
diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 7a04a099eb..50dbafa0c3 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -4,7 +4,7 @@
 // iOS Radio
 // --------------------------------------------------
 
-$radio-ios-color-on:       color(primary) !default;
+$radio-ios-color-on:       map-get($colors-ios, primary) !default;
 
 
 ion-radio {
@@ -27,7 +27,7 @@ ion-radio {
   }
 
   &.item.activated {
-    background-color: $list-background-color;
+    background-color: $list-ios-background-color;
   }
 
 }
@@ -68,7 +68,7 @@ radio-icon {
 // Generate iOS Radio Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
 
   @include radio-theme-ios($color-name, $color-value);
 
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index a2441f7456..050b5804b8 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -4,7 +4,7 @@
 // Material Design Radio
 // --------------------------------------------------
 
-$radio-md-color-on:               color(primary) !default;
+$radio-md-color-on:               map-get($colors-md, primary) !default;
 
 $radio-md-icon-size:              16px !default;
 $radio-md-border-width:           2px !default;
@@ -85,10 +85,10 @@ media-radio {
 }
 
 
-// Generate Material Design Radio Auxiliary Colors
+// Generate Material Design Radio Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-md {
 
   @include radio-theme-md($color-name, $color-value);
 
diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index acd600659d..e4ab7fd12f 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -139,7 +139,7 @@ ion-searchbar.left-align {
 // Generate Default Search Bar Colors
 // --------------------------------------------------
 
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
 
   ion-searchbar[#{$color-name}] {
 
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index d633beba72..51269fc009 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -11,7 +11,7 @@ $segment-button-ios-bg-color:                 transparent !default;
 $segment-button-ios-font-size:                1.3rem !default;
 $segment-button-ios-border-radius:            4px !default;
 
-$segment-button-ios-bg-color-activated:       map-get($colors, primary) !default;
+$segment-button-ios-bg-color-activated:       map-get($colors-ios, primary) !default;
 $segment-button-ios-text-color:               inverse($segment-button-ios-bg-color-activated) !default;
 $segment-button-ios-activated-transition:     100ms all linear !default;
 $segment-button-ios-hover-opacity:            0.16 !default;
@@ -112,7 +112,7 @@ ion-segment {
 // Loop through all of the colors to change the segment colors
 // based on the toolbar color or if it isn't in a toolbar then based on
 // the segment color value
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-ios {
   $inverse-color-value: inverse($color-value);
 
   .toolbar[#{$color-name}] {
@@ -126,7 +126,7 @@ ion-segment {
     // Loop through all of the colors again to change the segment colors
     // for each toolbar based on the segment color
     // this will take priority over the default toolbar colors
-    @each $color-name, $color-value in $colors {
+    @each $color-name, $color-value in $colors-ios {
       $inverse-color-value: inverse($color-value);
 
       ion-segment[#{$color-name}] {
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index 6b3377c622..896a7b63a2 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -8,8 +8,8 @@ $segment-button-md-font-size:                  1.2rem !default;
 $segment-button-md-min-height:                 4.0rem !default;
 $segment-button-md-line-height:                4.0rem !default;
 
-$segment-button-md-text-color-activated:       color(primary) !default;
-$segment-button-md-border-color-activated:     color(primary) !default;
+$segment-button-md-text-color-activated:       map-get($colors-md, primary) !default;
+$segment-button-md-border-color-activated:     map-get($colors-md, primary) !default;
 $segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;
 
 
@@ -72,7 +72,7 @@ ion-segment {
 // Loop through all of the colors to change the segment colors
 // based on the toolbar color or if it isn't in a toolbar then based on
 // the segment color value
-@each $color-name, $color-value in $colors {
+@each $color-name, $color-value in $colors-md {
   $inverse-color-value: inverse($color-value);
 
   .toolbar[#{$color-name}] {
@@ -86,7 +86,7 @@ ion-segment {
     // Loop through all of the colors again to change the segment colors
     // for each toolbar based on the segment color
     // this will take priority over the default toolbar colors
-    @each $color-name, $color-value in $colors {
+    @each $color-name, $color-value in $colors-md {
       ion-segment[#{$color-name}] {
         ion-segment-button[button] {
           @include segment-button($color-value);
diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index a2b3a23fe7..e1d29da473 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -9,10 +9,10 @@ $switch-ios-height:                    32px !default;
 $switch-ios-border-width:              2px !default;
 $switch-ios-border-radius:             $switch-ios-height / 2 !default;
 
-$switch-ios-background-color-off:      $list-background-color !default;
-$switch-ios-border-color-off:          grayscale(lighten($list-border-color, 11%)) !default;
+$switch-ios-background-color-off:      $list-ios-background-color !default;
+$switch-ios-border-color-off:          grayscale(lighten($list-ios-border-color, 11%)) !default;
 
-$switch-ios-background-color-on:       color(primary) !default;
+$switch-ios-background-color-on:       map-get($colors-ios, primary) !default;
 
 $switch-ios-handle-width:              $switch-ios-height - ($switch-ios-border-width * 2) !default;
 $switch-ios-handle-height:             $switch-ios-handle-width !default;
@@ -27,7 +27,7 @@ $switch-ios-transition-duration:       300ms !default;
 ion-switch {
 
   &.item.activated {
-    background: $list-background-color;
+    background: $list-ios-background-color;
   }
 
   media-switch {
@@ -145,7 +145,7 @@ ion-switch {
 // Generate iOS Switch Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors {
+@each $color-name, $value in $colors-ios {
 
   @include switch-theme-ios($color-name, $value);
 
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index 002976a84c..e938bd48bd 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -4,7 +4,7 @@
 // Material Design Switch
 // --------------------------------------------------
 
-$switch-md-active-color:                 map-get($colors, primary) !default;
+$switch-md-active-color:                 map-get($colors-md, primary) !default;
 
 $switch-md-track-width:                  36px !default;
 $switch-md-track-height:                 14px !default;
@@ -13,7 +13,7 @@ $switch-md-track-background-color-on:    lighten($switch-md-active-color, 25%) !
 
 $switch-md-handle-width:                 20px !default;
 $switch-md-handle-height:                20px !default;
-$switch-md-handle-background-color-off:  $background-color !default;
+$switch-md-handle-background-color-off:  $background-md-color !default;
 $switch-md-handle-background-color-on:   $switch-md-active-color !default;
 $switch-md-handle-box-shadow:            0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 
@@ -105,7 +105,7 @@ ion-switch {
 // Generate Material Design Switch Auxiliary Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors {
+@each $color-name, $value in $colors-md {
 
   @include switch-theme-md($color-name, $value);
 
diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss
index 601a0517bd..dbb301d3f7 100644
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -4,14 +4,21 @@
 // iOS Tabs
 // --------------------------------------------------
 
+$tabbar-ios-background-color:         $toolbar-ios-background-color !default;
 $tabbar-ios-item-padding:             0px 10px !default;
 $tabbar-ios-item-font-size:           10px !default;
 $tabbar-ios-item-icon-size:           32px !default;
 $tabbar-ios-height:                   49px !default;
 
+$tab-button-ios-min-width:            80px !default;
+$tab-button-ios-max-width:            240px !default;
+$tab-button-ios-active-color:         $toolbar-ios-active-color !default;
+$tab-button-ios-inactive-color:       $toolbar-ios-inactive-color !default;
+
 
 tabbar {
   border-top: 1px solid $toolbar-ios-border-color;
+  background: $tabbar-ios-background-color;
 }
 
 ion-tabs[tabbar-placement=top] tabbar {
@@ -21,7 +28,16 @@ ion-tabs[tabbar-placement=top] tabbar {
 
 .tab-button {
   padding: $tabbar-ios-item-padding;
+  min-width: $tab-button-ios-min-width;
+  max-width: $tab-button-ios-max-width;
   min-height: $tabbar-ios-height;
+
+  color: $tab-button-ios-inactive-color;
+}
+
+.tab-button:hover:not(.disable-hover),
+.tab-button[aria-selected=true] {
+  color: $tab-button-ios-active-color;
 }
 
 .tab-button-text {
@@ -91,10 +107,32 @@ ion-tabs[tabbar-placement=top] tabbar {
 
 }
 
-@each $color-name, $color-value in $colors {
+
+// iOS Tabbar Color Mixin
+// --------------------------------------------------
+
+@mixin tabbar-ios($color-name, $color-value) {
 
   tabbar[#{$color-name}] {
     border-color: darken($color-value, 10%);
+    background-color: $color-value;
+
+    .tab-button {
+      color: inverse($color-value);
+    }
+
+    .tab-button:hover:not(.disable-hover),
+    .tab-button[aria-selected=true] {
+      color: inverse($color-value);
+    }
   }
 
 }
+
+
+// iOS Tabbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-ios {
+  @include tabbar-ios($color-name, $color-value);
+}
diff --git a/ionic/components/tabs/modes/md.scss b/ionic/components/tabs/modes/md.scss
index 46f90e6156..38b09d5d5c 100644
--- a/ionic/components/tabs/modes/md.scss
+++ b/ionic/components/tabs/modes/md.scss
@@ -4,12 +4,21 @@
 // Material Design Tabs
 // --------------------------------------------------
 
+$tabbar-md-background-color:         $toolbar-md-background-color !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;
 $tabbar-md-item-icon-size:           2.4rem !default;
 $tabbar-md-item-height:              4.8rem !default;
 
+$tab-button-md-active-color:         $toolbar-md-active-color !default;
+$tab-button-md-inactive-color:       $toolbar-md-inactive-color !default;
+
+
+tabbar {
+  background: $tabbar-md-background-color;
+}
+
 
 .tab-button {
   padding: $tabbar-md-item-padding;
@@ -21,6 +30,7 @@ $tabbar-md-item-height:              4.8rem !default;
   box-shadow: none;
   border-radius: 0;
   border-bottom: 2px solid transparent;
+  color: $tab-button-md-inactive-color;
 
   &[aria-selected=true] {
     opacity: 1.0;
@@ -64,7 +74,7 @@ tab-highlight {
   width: 1px;
   bottom: 0;
   left: 0;
-  background: $tab-button-active-color;
+  background: $tab-button-md-active-color;
   transform-origin: 0 0;
   transform: translateZ(0);
 
@@ -78,14 +88,34 @@ tab-highlight {
 }
 
 
-@each $color-name, $color-value in $colors {
+// Material Design  Tabbar Color Mixin
+// --------------------------------------------------
+
+@mixin tabbar-md($color-name, $color-value) {
 
   tabbar[#{$color-name}] {
+    background-color: $color-value;
+
+    .tab-button {
+      color: inverse($color-value);
+    }
+
+    .tab-button:hover:not(.disable-hover),
+    .tab-button[aria-selected=true] {
+      color: inverse($color-value);
+    }
 
     tab-highlight {
       background: inverse($color-value);
     }
-
   }
 
 }
+
+
+// Material Design Tabbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+  @include tabbar-md($color-name, $color-value);
+}
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index ae26419ea9..4da71363b6 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -3,15 +3,6 @@
 // Tabs
 // --------------------------------------------------
 
-$tabbar-background-color:        $toolbar-background-color !default;
-
-$tab-button-text-color:           $toolbar-text-color !default;
-$tab-button-active-color:         $toolbar-active-color !default;
-$tab-button-inactive-color:       $toolbar-inactive-color !default;
-$tab-button-padding:              10px !default;
-$tab-button-min-width:            80px !default;
-$tab-button-max-width:            240px !default;
-
 
 ion-tabs {
   display: flex;
@@ -61,7 +52,6 @@ tabbar {
   display: flex;
   justify-content: center;
   overflow: hidden;
-  background: $tabbar-background-color;
 }
 
 .tab-button {
@@ -76,25 +66,16 @@ tabbar {
   align-items: center;
 
   margin: 0;
-  padding: $tab-button-padding;
-  min-width: $tab-button-min-width;
-  max-width: $tab-button-max-width;
 
   text-align: center;
   cursor: pointer;
   @include user-select-none();
 
-  color: $tab-button-inactive-color;
   border: 0;
   border-radius: 0;
   background: none;
 }
 
-.tab-button:hover:not(.disable-hover),
-.tab-button[aria-selected=true] {
-  color: $tab-button-active-color;
-}
-
 .tab-button-text {
   margin-top: 3px;
   margin-bottom: 2px;
@@ -155,24 +136,3 @@ tab-highlight {
 [tabbar-icons=hide] .tab-button-icon {
   display: none;
 }
-
-
-// Tabbar Color Generation
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  tabbar[#{$color-name}] {
-    background-color: $color-value;
-
-    .tab-button {
-      color: inverse($color-value);
-    }
-
-    .tab-button:hover:not(.disable-hover),
-    .tab-button[aria-selected=true] {
-      color: inverse($color-value);
-    }
-  }
-
-}
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
index 2b8ff5410a..f6ebb8adbb 100644
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -5,12 +5,14 @@
 // iOS Text Input
 // --------------------------------------------------
 
+$text-input-ios-background-color:    $list-ios-background-color !default;
 $text-input-ios-label-color:         #7f7f7f !default;
 
 
 [text-input] {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
   padding: 0;
+  background-color: $text-input-ios-background-color;
 }
 
 ion-input[inset] [text-input] {
@@ -50,3 +52,10 @@ ion-label + [text-input] {
 [floating-label].has-value ion-label  {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
+
+
+@each $color-name, $color-value in $colors-ios {
+  ion-label[#{$color-name}] {
+    color: $color-value !important;
+  }
+}
diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss
index e604bae33f..23a728c389 100644
--- a/ionic/components/text-input/modes/md.scss
+++ b/ionic/components/text-input/modes/md.scss
@@ -5,15 +5,17 @@
 // Material Design Text Input
 // --------------------------------------------------
 
+$text-input-md-background-color:            $list-md-background-color !default;
 $text-input-md-label-color:                 #999 !default;
-$text-input-md-highlight-color:             color(primary) !default;
-$text-input-md-hightlight-color-valid:      color(secondary) !default;
-$text-input-md-hightlight-color-invalid:    color(danger) !default;
+$text-input-md-highlight-color:             map-get($colors-md, primary) !default;
+$text-input-md-hightlight-color-valid:      map-get($colors-md, secondary) !default;
+$text-input-md-hightlight-color-invalid:    map-get($colors-md, danger) !default;
 
 
 [text-input] {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
   padding: 0;
+  background-color: $text-input-md-background-color;
 }
 
 ion-input[inset] [text-input] {
@@ -80,3 +82,9 @@ ion-input.ng-invalid.ng-touched:after {
 [floating-label].has-value ion-label  {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
+
+@each $color-name, $color-value in $colors-md {
+  ion-label[#{$color-name}] {
+    color: $color-value !important;
+  }
+}
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index 0b020aa81c..2f3d9cab20 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -3,8 +3,6 @@
 // Text Input
 // --------------------------------------------------
 
-$text-input-background-color:   $list-background-color !default;
-
 
 ion-input {
 
@@ -33,7 +31,6 @@ ion-input {
 
 ion-input [text-input] {
   flex: 1;
-  background-color: $text-input-background-color;
   pointer-events: none;
 }
 
@@ -71,11 +68,3 @@ input,
 textarea {
   @include placeholder();
 }
-
-@each $color-name, $color-value in $colors {
-  ion-label {
-    &[#{$color-name}] {
-      color: $color-value !important;
-    }
-  }
-}
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index e0e012acf7..5f5a0405e7 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -12,7 +12,6 @@ $toolbar-order-ios: (
 );
 
 $toolbar-ios-height:                        4.4rem !default;
-$toolbar-ios-border-color:                  $toolbar-border-color !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 
@@ -41,6 +40,7 @@ $toolbar-ios-title-font-size:               1.7rem !default;
     margin-bottom: 0;
     padding: 0 5px;
     min-height: 32px;
+    color: $toolbar-ios-active-color;
   }
 
   button.icon-only,
@@ -72,9 +72,19 @@ $toolbar-ios-title-font-size:               1.7rem !default;
 
 }
 
+.toolbar button:hover:not(.disable-hover),
+.toolbar [button]:hover:not(.disable-hover),
+.toolbar button.activated,
+.toolbar [button].activated {
+  color: $toolbar-ios-active-color;
+  background-color: transparent;
+}
+
 .toolbar toolbar-background {
   border-bottom-width: 1px;
   border-bottom-style: solid;
+  border-color: $toolbar-ios-border-color;
+  background-color: $toolbar-ios-background-color;
 }
 
 ion-title {
@@ -93,6 +103,7 @@ ion-title {
   font-weight: 500;
   text-align: center;
   pointer-events: auto;
+  color: $toolbar-ios-text-color;
 }
 
 ion-nav-items {
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index bef35e0c6b..7e9c1957a0 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -21,6 +21,7 @@ $toolbar-md-button-font-size:        1.4rem !default;
     min-height: 32px;
     box-shadow: none;
     overflow: visible;
+    color: $toolbar-md-active-color;
   }
 
   button.icon-only,
@@ -53,12 +54,29 @@ $toolbar-md-button-font-size:        1.4rem !default;
 
 }
 
+.toolbar button:hover:not(.disable-hover),
+.toolbar [button]:hover:not(.disable-hover),
+.toolbar button.activated,
+.toolbar [button].activated {
+  color: $toolbar-md-active-color;
+  background-color: transparent;
+}
+
+.toolbar toolbar-background {
+  border-color: $toolbar-md-border-color;
+  background-color: $toolbar-md-background-color;
+}
+
 ion-title {
   padding: 0 12px;
   font-size: $toolbar-md-title-font-size;
   font-weight: 500;
 }
 
+.toolbar-title {
+  color: $toolbar-md-text-color;
+}
+
 ion-nav-items[primary] button:first-child {
   margin-left: 0;
 }
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index e53669f031..38166b4e97 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -33,7 +33,6 @@ $toolbar-order: (
   button,
   [button] {
     background-color: transparent;
-    color: $toolbar-active-color;
     box-shadow: none;
   }
 }
@@ -47,8 +46,6 @@ $toolbar-order: (
   z-index: $z-index-toolbar-background;
 
   border: 0;
-  border-color: $toolbar-border-color;
-  background-color: $toolbar-background-color;
 
   pointer-events: none;
 }
@@ -59,14 +56,6 @@ toolbar-content {
   order: map-get($toolbar-order, content);
 }
 
-.toolbar button:hover:not(.disable-hover),
-.toolbar [button]:hover:not(.disable-hover),
-.toolbar button.activated,
-.toolbar [button].activated {
-  color: $toolbar-active-color;
-  background-color: transparent;
-}
-
 .toolbar[position=bottom] {
   order: $flex-order-toolbar-bottom;
 }
@@ -83,7 +72,6 @@ ion-title {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  color: $toolbar-text-color;
 }
 
 .toolbar [menu-toggle] {
diff --git a/ionic/themes/default.ios.scss b/ionic/themes/default.ios.scss
index ecab9adfaf..799dc2ff72 100644
--- a/ionic/themes/default.ios.scss
+++ b/ionic/themes/default.ios.scss
@@ -3,7 +3,7 @@
 // iOS Default Theme
 // ----------------------------------
 
-$colors: (
+$colors-ios: (
 
   primary:    #387ef5,
   secondary:  #32db64,
@@ -15,30 +15,29 @@ $colors: (
 
 
 $text-ios-color:                 $text-color !default;
+$link-ios-color:                 map-get($colors-ios, primary) !default;
 $background-ios-color:           $background-color !default;
 $subdued-text-ios-color:         $subdued-text-color !default;
 
-$list-ios-text-color:            $text-ios-color !default;
-$list-ios-background-color:      $background-color !default;
+$list-ios-text-color:            $list-text-color !default;
+$list-ios-background-color:      $list-background-color !default;
 $list-ios-border-color:          $list-border-color !default;
 
-$link-ios-color:                 map-get($colors, primary) !default;
-
 
 // iOS Toolbar
 // --------------------------------------------------
 
 $toolbar-ios-background-color:   $toolbar-background-color !default;
 $toolbar-ios-border-color:       $toolbar-border-color !default;
-$toolbar-ios-text-color:         $text-ios-color !default;
-$toolbar-ios-active-color:       $link-ios-color !default;
+$toolbar-ios-text-color:         $toolbar-text-color !default;
+$toolbar-ios-active-color:       $toolbar-active-color !default;
 $toolbar-ios-inactive-color:     $toolbar-inactive-color !default;
 
 
 // iOS Item
 // --------------------------------------------------
 
-$item-ios-border-color:               $list-border-color !default;
+$item-ios-border-color:               $list-ios-border-color !default;
 $item-ios-activated-background-color: #d9d9d9 !default;
 $item-ios-font-size:                  1.6rem !default;
 
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index f183d8416d..c3ee7214e8 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -3,7 +3,7 @@
 // Material Design Default Theme
 // ----------------------------------
 
-$colors: (
+$colors-md: (
 
   primary:    #387ef5,
   secondary:  #32db64,
@@ -15,30 +15,29 @@ $colors: (
 
 
 $text-md-color:                 $text-color !default;
+$link-md-color:                 map-get($colors-md, primary) !default;
 $background-md-color:           $background-color !default;
 $subdued-text-md-color:         $subdued-text-color !default;
 
-$list-md-text-color:            $text-md-color !default;
-$list-md-background-color:      $background-color !default;
+$list-md-text-color:            $list-text-color !default;
+$list-md-background-color:      $list-background-color !default;
 $list-md-border-color:          $list-border-color !default;
 
-$link-md-color:                 map-get($colors, primary) !default;
 
-
-// iOS Toolbar
+// Material Design Toolbar
 // --------------------------------------------------
 
 $toolbar-md-background-color:   $toolbar-background-color !default;
 $toolbar-md-border-color:       $toolbar-border-color !default;
-$toolbar-md-text-color:         $text-md-color !default;
-$toolbar-md-active-color:       $link-md-color !default;
+$toolbar-md-text-color:         $toolbar-text-color !default;
+$toolbar-md-active-color:       $toolbar-active-color !default;
 $toolbar-md-inactive-color:     $toolbar-inactive-color !default;
 
 
 // Material Design Item
 // --------------------------------------------------
 
-$item-md-border-color:               $list-border-color !default;
+$item-md-border-color:               $list-md-border-color !default;
 $item-md-activated-background-color: #d9d9d9 !default;
 $item-md-font-size:                  1.6rem !default;
 
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index 733be5a230..d4f3fd9f63 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -14,6 +14,7 @@ $colors: (
 
 
 $text-color:                 #000 !default;
+$link-color:                 map-get($colors, primary) !default;
 $background-color:           #fff !default;
 $subdued-text-color:         #666 !default;
 
@@ -21,8 +22,6 @@ $list-text-color:            $text-color !default;
 $list-background-color:      $background-color !default;
 $list-border-color:          #c8c7cc !default;
 
-$link-color:                 map-get($colors, primary) !default;
-
 $toolbar-background-color:   #f8f8f8 !default;
 $toolbar-border-color:       #b2b2b2 !default;
 $toolbar-text-color:         $text-color !default;
diff --git a/ionic/util/functions.scss b/ionic/util/functions.scss
index 95e2ea1550..e0ed83e369 100644
--- a/ionic/util/functions.scss
+++ b/ionic/util/functions.scss
@@ -28,6 +28,14 @@
 }
 
 
+// Copy Colors Map
+// --------------------------------------------------
+
+@function copy-colors($colors-map) {
+  @return map-merge($colors-map, ());
+}
+
+
 // String Replace Function
 // --------------------------------------------------
 

From 022d873723735fc98586e8ebfcf1d66ae7405e0a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Dec 2015 23:45:39 -0600
Subject: [PATCH 024/100] update item/list variable setup

---
 ionic/components/card/modes/md.scss     |  2 +-
 ionic/components/checkbox/modes/md.scss |  4 +-
 ionic/components/item/modes/ios.scss    |  9 +++--
 ionic/components/item/modes/md.scss     | 22 ++--------
 ionic/components/list/modes/md.scss     |  2 -
 ionic/components/radio/modes/md.scss    |  2 +-
 ionic/components/switch/modes/md.scss   |  2 +-
 ionic/themes/default.ios.scss           | 37 +++++++++--------
 ionic/themes/default.md.scss            | 53 ++++++++++++-------------
 ionic/themes/default.scss               |  8 ++--
 10 files changed, 62 insertions(+), 79 deletions(-)

diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss
index 43b1537ae7..4c7a2d22c0 100644
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -62,7 +62,7 @@ ion-card {
   }
 
   .item {
-    font-size: $item-md-font-size;
+    font-size: $card-md-font-size;
   }
 
   .item-inner {
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index f0df3b9a06..ca7067bc9c 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -8,7 +8,7 @@ $checkbox-md-icon-size:             16px !default;
 $checkbox-md-background-color-off:  $list-md-background-color !default;
 $checkbox-md-border-width:          2px !default;
 $checkbox-md-border-radius:         2px !default;
-$checkbox-md-border-color-off:      darken($item-md-border-color, 40%) !default;
+$checkbox-md-border-color-off:      darken($list-md-border-color, 40%) !default;
 $checkbox-md-background-color-on:   map-get($colors-md, primary) !default;
 $checkbox-md-border-color-on:       map-get($colors-md, primary) !default;
 $checkbox-md-checkmark-color-on:    $background-md-color !default;
@@ -21,7 +21,7 @@ ion-checkbox {
   }
 
   ion-item-content {
-    border-bottom: 1px solid $item-md-border-color;
+    border-bottom: 1px solid $list-md-border-color;
     margin: 0;
     padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
   }
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index ea92fe34f4..fa5c82242a 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -4,10 +4,11 @@
 // iOS Item
 // --------------------------------------------------
 
+$item-ios-font-size:                  1.6rem !default;
 $item-ios-avatar-size:                3.6rem !default;
 $item-ios-thumbnail-size:             5.6rem !default;
-$item-ios-note-color:                 darken($item-ios-border-color, 10%) !default;
-$item-ios-detail-push-color:          $item-ios-border-color !default;
+$item-ios-note-color:                 darken($list-ios-border-color, 10%) !default;
+$item-ios-detail-push-color:          $list-ios-border-color !default;
 
 $item-ios-divider-bg:                 #f7f7f7 !default;
 $item-ios-divider-color:              #222 !default;
@@ -55,7 +56,7 @@ ion-note {
 .item.activated,
 a.item.activated,
 button.item.activated {
-  background-color: $item-ios-activated-background-color;
+  background-color: $list-ios-activated-background-color;
   transition-duration: 0ms;
 }
 
@@ -67,7 +68,7 @@ button.item {
 
 .item-inner {
   padding-right: ($item-ios-padding-right / 2);
-  border-bottom: 1px solid $item-ios-border-color;
+  border-bottom: 1px solid $list-ios-border-color;
 }
 
 ion-item-content {
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 28a83da50c..a45526063d 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -4,27 +4,13 @@
 // Material Design Item
 // --------------------------------------------------
 
-$item-md-border-color:                grayscale(lighten($list-md-border-color, 8%)) !default;
-$item-md-activated-background-color:  #f1f1f1 !default;
-$item-md-font-size:                   1.6rem !default;
-
-$item-md-padding-top:                 13px !default;
-$item-md-padding-right:               16px !default;
-$item-md-padding-bottom:              13px !default;
-$item-md-padding-left:                16px !default;
-
-$item-md-padding-media-top:           9px !default;
-$item-md-padding-media-bottom:        9px !default;
-
-$item-md-padding-icon-top:            11px !default;
-$item-md-padding-icon-bottom:         10px !default;
-
 $item-md-body-text-font-size:         1.4rem !default;
 $item-md-body-text-line-height:       1.5 !default;
 
+$item-md-font-size:                   1.6rem !default;
 $item-md-avatar-size:                 4rem !default;
 $item-md-thumbnail-size:              8rem !default;
-$item-md-note-color:                  darken($item-md-border-color, 10%) !default;
+$item-md-note-color:                  darken($list-md-border-color, 10%) !default;
 
 $item-md-divider-bg:                 #fff !default;
 $item-md-divider-color:              #222 !default;
@@ -87,7 +73,7 @@ ion-note {
 }
 
 .item-inner {
-  border-bottom: 1px solid $item-md-border-color;
+  border-bottom: 1px solid $list-md-border-color;
   padding-right: ($item-md-padding-right / 2);
 }
 
@@ -195,7 +181,7 @@ button.item {
 .item.activated,
 a.item.activated,
 button.item.activated {
-  background-color: $item-md-activated-background-color;
+  background-color: $list-md-activated-background-color;
   box-shadow: none;
 }
 
diff --git a/ionic/components/list/modes/md.scss b/ionic/components/list/modes/md.scss
index b8b720a424..93ffcc7d5f 100644
--- a/ionic/components/list/modes/md.scss
+++ b/ionic/components/list/modes/md.scss
@@ -19,8 +19,6 @@ $list-md-header-padding:         16px $item-md-padding-right 16px $item-md-paddi
 $list-md-header-font-size:       1.4rem !default;
 $list-md-header-color:           #858585 !default;
 
-$list-md-border-color:          $item-md-border-color !default;
-
 
 /****************/
 /* DEFAULT LIST */
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index 050b5804b8..43a1a39e6d 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -8,7 +8,7 @@ $radio-md-color-on:               map-get($colors-md, primary) !default;
 
 $radio-md-icon-size:              16px !default;
 $radio-md-border-width:           2px !default;
-$radio-md-color-off:              darken($item-md-border-color, 40%) !default;
+$radio-md-color-off:              darken($list-md-border-color, 40%) !default;
 
 $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index e938bd48bd..92e61a56d6 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -8,7 +8,7 @@ $switch-md-active-color:                 map-get($colors-md, primary) !default;
 
 $switch-md-track-width:                  36px !default;
 $switch-md-track-height:                 14px !default;
-$switch-md-track-background-color-off:   $item-md-border-color !default;
+$switch-md-track-background-color-off:   $list-md-border-color !default;
 $switch-md-track-background-color-on:    lighten($switch-md-active-color, 25%) !default;
 
 $switch-md-handle-width:                 20px !default;
diff --git a/ionic/themes/default.ios.scss b/ionic/themes/default.ios.scss
index 799dc2ff72..48e506710e 100644
--- a/ionic/themes/default.ios.scss
+++ b/ionic/themes/default.ios.scss
@@ -14,41 +14,40 @@ $colors-ios: (
 ) !default;
 
 
-$text-ios-color:                 $text-color !default;
-$link-ios-color:                 map-get($colors-ios, primary) !default;
-$background-ios-color:           $background-color !default;
-$subdued-text-ios-color:         $subdued-text-color !default;
-
-$list-ios-text-color:            $list-text-color !default;
-$list-ios-background-color:      $list-background-color !default;
-$list-ios-border-color:          $list-border-color !default;
+$text-ios-color:                       $text-color !default;
+$link-ios-color:                       map-get($colors-ios, primary) !default;
+$background-ios-color:                 $background-color !default;
+$subdued-text-ios-color:               $subdued-text-color !default;
 
 
 // iOS Toolbar
 // --------------------------------------------------
 
-$toolbar-ios-background-color:   $toolbar-background-color !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;
-$toolbar-ios-inactive-color:     $toolbar-inactive-color !default;
+$toolbar-ios-background-color:         $toolbar-background-color !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;
+$toolbar-ios-inactive-color:           $toolbar-inactive-color !default;
+
+
+// iOS List
+// --------------------------------------------------
+
+$list-ios-text-color:                  $list-text-color !default;
+$list-ios-border-color:                $list-border-color !default;
+$list-ios-background-color:            $list-background-color !default;
+$list-ios-activated-background-color:  #d9d9d9 !default;
 
 
 // iOS Item
 // --------------------------------------------------
 
-$item-ios-border-color:               $list-ios-border-color !default;
-$item-ios-activated-background-color: #d9d9d9 !default;
-$item-ios-font-size:                  1.6rem !default;
-
 $item-ios-padding-top:                12px !default;
 $item-ios-padding-right:              16px !default;
 $item-ios-padding-bottom:             13px !default;
 $item-ios-padding-left:               16px !default;
-
 $item-ios-padding-media-top:          10px !default;
 $item-ios-padding-media-bottom:       10px !default;
-
 $item-ios-padding-icon-top:           10px !default;
 $item-ios-padding-icon-bottom:        9px !default;
 
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index c3ee7214e8..20cc7518a9 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -14,40 +14,39 @@ $colors-md: (
 ) !default;
 
 
-$text-md-color:                 $text-color !default;
-$link-md-color:                 map-get($colors-md, primary) !default;
-$background-md-color:           $background-color !default;
-$subdued-text-md-color:         $subdued-text-color !default;
-
-$list-md-text-color:            $list-text-color !default;
-$list-md-background-color:      $list-background-color !default;
-$list-md-border-color:          $list-border-color !default;
+$text-md-color:                       $text-color !default;
+$link-md-color:                       map-get($colors-md, primary) !default;
+$background-md-color:                 $background-color !default;
+$subdued-text-md-color:               $subdued-text-color !default;
 
 
 // Material Design Toolbar
 // --------------------------------------------------
 
-$toolbar-md-background-color:   $toolbar-background-color !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;
-$toolbar-md-inactive-color:     $toolbar-inactive-color !default;
+$toolbar-md-background-color:         $toolbar-background-color !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;
+$toolbar-md-inactive-color:           $toolbar-inactive-color !default;
+
+
+// Material Design List
+// --------------------------------------------------
+
+$list-md-text-color:                  $list-text-color !default;
+$list-md-border-color:                $list-border-color !default;
+$list-md-background-color:            $list-background-color !default;
+$list-md-activated-background-color:  #f1f1f1 !default;
 
 
 // Material Design Item
 // --------------------------------------------------
 
-$item-md-border-color:               $list-md-border-color !default;
-$item-md-activated-background-color: #d9d9d9 !default;
-$item-md-font-size:                  1.6rem !default;
-
-$item-md-padding-top:                12px !default;
-$item-md-padding-right:              16px !default;
-$item-md-padding-bottom:             13px !default;
-$item-md-padding-left:               16px !default;
-
-$item-md-padding-media-top:          10px !default;
-$item-md-padding-media-bottom:       10px !default;
-
-$item-md-padding-icon-top:           10px !default;
-$item-md-padding-icon-bottom:        9px !default;
+$item-md-padding-top:                 13px !default;
+$item-md-padding-right:               16px !default;
+$item-md-padding-bottom:              13px !default;
+$item-md-padding-left:                16px !default;
+$item-md-padding-media-top:           9px !default;
+$item-md-padding-media-bottom:        9px !default;
+$item-md-padding-icon-top:            11px !default;
+$item-md-padding-icon-bottom:         10px !default;
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index d4f3fd9f63..fe5d25b38e 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -18,12 +18,12 @@ $link-color:                 map-get($colors, primary) !default;
 $background-color:           #fff !default;
 $subdued-text-color:         #666 !default;
 
-$list-text-color:            $text-color !default;
-$list-background-color:      $background-color !default;
-$list-border-color:          #c8c7cc !default;
-
 $toolbar-background-color:   #f8f8f8 !default;
 $toolbar-border-color:       #b2b2b2 !default;
 $toolbar-text-color:         $text-color !default;
 $toolbar-active-color:       $link-color !default;
 $toolbar-inactive-color:     #8c8c8c !default;
+
+$list-text-color:            $text-color !default;
+$list-background-color:      $background-color !default;
+$list-border-color:          #c8c7cc !default;

From cc91591b2d7dea38e356857d8a8ddb773defd389 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 10:16:28 -0600
Subject: [PATCH 025/100] update button

---
 ionic/components/app/normalize.scss       |  7 +++
 ionic/components/button/button-clear.scss | 15 -------
 ionic/components/button/button.scss       | 54 +++++++++++++++++------
 ionic/components/button/modes/ios.scss    |  1 -
 ionic/components/button/modes/md.scss     |  3 +-
 ionic/components/tap-click/ripple.scss    |  2 +-
 ionic/themes/default.md.scss              |  8 ++++
 7 files changed, 57 insertions(+), 33 deletions(-)
 delete mode 100644 ionic/components/button/button-clear.scss

diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index a5864f7fbb..fde3d9913a 100644
--- a/ionic/components/app/normalize.scss
+++ b/ionic/components/app/normalize.scss
@@ -115,6 +115,13 @@ input[type="submit"] {
   cursor: pointer; // 3
 }
 
+button {
+  border: 0;
+  text-transform: none;
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
 // Re-set default cursor for disabled elements.
 button[disabled],
 html input[disabled] {
diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
deleted file mode 100644
index 85c890bafa..0000000000
--- a/ionic/components/button/button-clear.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@import "../../globals.core";
-
-// Clear Button
-// --------------------------------------------------
-
-.button-clear {
-  border-color: transparent;
-  background: transparent;
-
-  &.activated {
-    opacity: 0.4;
-    background: transparent;
-  }
-
-}
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 4ea3cdb47c..58b1c7a2c1 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -13,16 +13,6 @@ $button-round-padding:            0 2.6rem !default;
 $button-round-border-radius:      64px !default;
 
 
-.button-disabled {
-  opacity: 0.4;
-  cursor: default !important;
-  pointer-events: none;
-}
-
-a.button {
-  text-decoration: none;
-}
-
 .button {
   position: relative;
   display: inline-flex;
@@ -58,9 +48,20 @@ a.button {
   cursor: pointer;
   @include user-select-none();
   @include appearance(none);
- }
+}
 
-// Button Types
+a.button {
+  text-decoration: none;
+}
+
+.button-disabled {
+  opacity: 0.4;
+  cursor: default !important;
+  pointer-events: none;
+}
+
+
+// Block Button
 // --------------------------------------------------
 
 .button-block {
@@ -75,20 +76,45 @@ a.button {
   }
 }
 
+
+// Full Button
+// --------------------------------------------------
+
 .button-full {
-  width: 100%;
   margin-right: 0;
   margin-left: 0;
+  width: 100%;
   border-radius: 0;
   border-right-width: 0;
   border-left-width: 0;
 }
 
+
+// Round Button
+// --------------------------------------------------
+
 .button-round {
-  border-radius: $button-round-border-radius;
   padding: $button-round-padding;
+  border-radius: $button-round-border-radius;
 }
 
+
+// Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  border-color: transparent;
+  background: transparent;
+
+  &.activated {
+    opacity: 0.4;
+    background: transparent;
+  }
+
+}
+
+
+
 // TODO
 // button should have classes:
 // button, button-primary, button-secondary, etc.
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index d46ce704d3..ae706baefc 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -1,6 +1,5 @@
 @import "../../../globals.ios";
 @import "../button";
-@import "../button-clear";
 @import "../button-fab";
 @import "../button-icon";
 @import "../button-size";
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 4d4050ffa1..7a3e6718c2 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -1,6 +1,5 @@
 @import "../../../globals.md";
 @import "../button";
-@import "../button-clear";
 @import "../button-fab";
 @import "../button-icon";
 @import "../button-size";
@@ -97,7 +96,7 @@ $button-md-hover-opacity:                  0.8 !default;
   }
 
   md-ripple {
-    background: rgba( red($button-md-color), green($button-md-color), blue($button-md-color), 0.1);
+    background-color: ripple-background-color($button-md-color);
   }
 }
 
diff --git a/ionic/components/tap-click/ripple.scss b/ionic/components/tap-click/ripple.scss
index b058893ca6..e968da14b5 100644
--- a/ionic/components/tap-click/ripple.scss
+++ b/ionic/components/tap-click/ripple.scss
@@ -12,7 +12,7 @@ md-ripple {
   display: block;
   border-radius: 50%;
 
-  background: $ripple-background-color;
+  background-color: ripple-background-color($ripple-background-color);
 
   overflow: hidden;
   pointer-events: none;
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index 20cc7518a9..c113cd7ac8 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -50,3 +50,11 @@ $item-md-padding-media-top:           9px !default;
 $item-md-padding-media-bottom:        9px !default;
 $item-md-padding-icon-top:            11px !default;
 $item-md-padding-icon-bottom:         10px !default;
+
+
+// Ripple Color
+// --------------------------------------------------
+
+@function ripple-background-color($button-color) {
+  @return rgba( red($button-color), green($button-color), blue($button-color), 0.1);
+}

From 5ae94e655984391d5d10d5470578228e1645f835 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 11:19:09 -0600
Subject: [PATCH 026/100] mode font styling

---
 ionic/components/action-sheet/modes/ios.scss | 11 ++-----
 ionic/components/action-sheet/modes/md.scss  |  1 +
 ionic/components/app/modes/md.scss           |  2 ++
 ionic/components/app/normalize.scss          |  4 +++
 ionic/components/app/typography.scss         | 30 ++++++--------------
 ionic/components/button/button.scss          |  3 --
 ionic/components/content/modes/ios.scss      |  1 -
 ionic/components/content/modes/md.scss       |  4 +++
 ionic/ionic.ios.scss                         |  7 +++--
 ionic/ionic.md.scss                          | 10 +++++--
 ionic/ionic.scss                             |  8 ++++--
 ionic/themes/default.ios.scss                | 13 +++++++++
 ionic/themes/default.md.scss                 | 13 +++++++++
 ionic/themes/default.scss                    |  3 ++
 scripts/snapshot/snapshot.config.js          |  4 +--
 15 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/ionic/components/action-sheet/modes/ios.scss b/ionic/components/action-sheet/modes/ios.scss
index a3cc41e673..dab7f7bc58 100644
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -8,16 +8,15 @@ $action-sheet-ios-group-margin:                   10px !default;
 $action-sheet-ios-background-color:               rgba(243,243,243,.95) !default;
 
 $action-sheet-ios-height:                         5.6rem !default;
-$action-sheet-ios-padding:                        1.8rem !default;
+$action-sheet-ios-padding:                        18px !default;
 $action-sheet-ios-border-color:                   #d6d6da !default;
-$action-sheet-ios-border-radius:                  1.3rem !default;
+$action-sheet-ios-border-radius:                  13px !default;
 
 $action-sheet-ios-title-color:                    #5f5f5f !default;
 $action-sheet-ios-title-font-size:                1.2rem !default;
 
 $action-sheet-ios-button-text-color:              #007aff !default;
-$action-sheet-ios-option-font-size:               2rem !default;
-$action-sheet-ios-button-font-size:               21px !default;
+$action-sheet-ios-button-font-size:               2rem !default;
 $action-sheet-ios-background-active-color:        #e9e9e9 !default;
 
 $action-sheet-ios-destructive-button-text-color:  #f53d3d !default;
@@ -71,10 +70,6 @@ ion-action-sheet {
   }
 }
 
-.action-sheet-option {
-  font-size: $action-sheet-ios-option-font-size;
-}
-
 .action-sheet-destructive {
   color: $action-sheet-ios-destructive-button-text-color;
 }
diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index 127c4fea4c..22c02e2e65 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -29,6 +29,7 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
 
 .action-sheet-button {
   background-color: transparent;
+  font-size: $action-sheet-md-button-font-size;
   font-weight: normal;
   min-height: $action-sheet-md-height;
   color: $action-sheet-md-button-text-color;
diff --git a/ionic/components/app/modes/md.scss b/ionic/components/app/modes/md.scss
index bc2b7e763b..b09f4f3c6e 100644
--- a/ionic/components/app/modes/md.scss
+++ b/ionic/components/app/modes/md.scss
@@ -3,6 +3,8 @@
 // Material Design App
 // --------------------------------------------------
 
+
+
 hr {
   border-width: 0;
   height: 1px;
diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index fde3d9913a..52325bb6fb 100644
--- a/ionic/components/app/normalize.scss
+++ b/ionic/components/app/normalize.scss
@@ -117,6 +117,10 @@ input[type="submit"] {
 
 button {
   border: 0;
+  line-height: 1;
+  font-family: inherit;
+  font-variant: inherit;
+  font-style: inherit;
   text-transform: none;
   -webkit-appearance: button;
   cursor: pointer;
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index f38e936a98..b6ef131a17 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -1,39 +1,25 @@
 @import "../../globals.core";
 
 // Typography
-// -------------------------
+// --------------------------------------------------
 // All font sizes use rem units
+// By default, 1rem equals 10px. For example, 1.4rem  === 14px
+// $font-size-root value, which is on the <html> element
+// is what can scale all fonts
 
-
-$font-family-sans-serif:          -apple-system, "Helvetica Neue", "Roboto", sans-serif !default;
-$font-family-light-sans-serif:    -apple-system, "HelveticaNeue-Light", "Roboto-Light", sans-serif-light !default;
-
-$font-family-base:                $font-family-sans-serif !default;
-$font-size-root:                  62.5% !default;
-$font-size-base:                  1.4rem !default; // 1.4rem == 14px
-$font-size-small:                 1rem !default;
-
-$line-height-base:                1.4 !default;
-$line-height-computed:            3rem !default;
-$line-height-large:               1.33 !default;
-$line-height-small:               1.5 !default;
-
-$headings-font-weight:            500 !default;
-$headings-line-height:            1.2 !default;
+$font-size-root:               62.5% !default;
+$headings-font-weight:         500 !default;
+$headings-line-height:         1.2 !default;
 
 
 html {
   font-size: $font-size-root;
 }
 
-body {
-  font-size: $font-size-base;
-  font-family: $font-family-base;
-}
-
 a {
   background-color: transparent;
 }
+
 .enable-hover a:hover {
   opacity: 0.7;
 }
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 58b1c7a2c1..ecfc4e27af 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -31,9 +31,6 @@ $button-round-border-radius:      64px !default;
   border-radius: $button-border-radius;
 
   font-size: $button-font-size;
-  font-family: inherit;
-  font-variant: inherit;
-  font-style: inherit;
 
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
index 0ac8f94ce6..07394e22e8 100644
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -6,7 +6,6 @@
 $outer-content-ios-background-color:         #efeff4 !default;
 
 
-body,
 ion-content {
   background-color: $background-ios-color;
 }
diff --git a/ionic/components/content/modes/md.scss b/ionic/components/content/modes/md.scss
index c1ec178d3a..ff3794d455 100644
--- a/ionic/components/content/modes/md.scss
+++ b/ionic/components/content/modes/md.scss
@@ -6,6 +6,10 @@
 $content-padding-md:    16px !default;
 
 
+ion-content {
+  background-color: $background-md-color;
+}
+
 [padding],
 [padding] > scroll-content {
   padding: $content-padding-md;
diff --git a/ionic/ionic.ios.scss b/ionic/ionic.ios.scss
index ed0c3cc51c..97f519b63f 100644
--- a/ionic/ionic.ios.scss
+++ b/ionic/ionic.ios.scss
@@ -1,10 +1,13 @@
 /*! Ionic: iOS */
 @charset "UTF-8";
 
-
 // Core Components
 @import "components.core";
 
-
 // iOS Components
 @import "components.ios";
+
+// iOS Body
+body {
+  @include ios-body();
+}
diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index e10e940ca8..bc920f8727 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -1,10 +1,16 @@
 /*! Ionic: Material Design */
 @charset "UTF-8";
 
-
 // Core Components
 @import "components.core";
 
-
 // Material Design Components
 @import "components.md";
+
+// Material Design Body
+body {
+  @include md-body();
+}
+
+// Roboto Font
+@import "fonts/roboto";
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index 361e8d522f..4574449418 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -1,17 +1,19 @@
 @charset "UTF-8";
 
-
 // Core Components
 @import "components.core";
 
-
 // iOS Components
 .ios {
   @import "components.ios";
+  @include ios-body();
 }
 
-
 // Material Design Components
 .md {
   @import "components.md";
+  @include md-body();
 }
+
+// Roboto Font
+@import "fonts/roboto";
diff --git a/ionic/themes/default.ios.scss b/ionic/themes/default.ios.scss
index 48e506710e..edd773e3d0 100644
--- a/ionic/themes/default.ios.scss
+++ b/ionic/themes/default.ios.scss
@@ -19,6 +19,9 @@ $link-ios-color:                       map-get($colors-ios, primary) !default;
 $background-ios-color:                 $background-color !default;
 $subdued-text-ios-color:               $subdued-text-color !default;
 
+$font-family-ios-base:                 $font-family-base !default;
+$font-size-ios-base:                   $font-size-base !default;
+
 
 // iOS Toolbar
 // --------------------------------------------------
@@ -61,3 +64,13 @@ $icon-detail-push-background-svg:    "<svg xmlns='http://www.w3.org/2000/svg' vi
   $svg: str-replace($icon-detail-push-background-svg, 'fg-color', $fg-color);
   @include svg-background-image($svg);
 }
+
+
+// iOS Body
+// --------------------------------------------------
+
+@mixin ios-body() {
+  font-family: $font-family-ios-base;
+  font-size: $font-size-ios-base;
+  background-color: $background-ios-color;
+}
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index c113cd7ac8..a2150965a3 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -19,6 +19,9 @@ $link-md-color:                       map-get($colors-md, primary) !default;
 $background-md-color:                 $background-color !default;
 $subdued-text-md-color:               $subdued-text-color !default;
 
+$font-family-md-base:                 "Roboto", "Helvetica Neue", sans-serif !default;
+$font-size-md-base:                   $font-size-base !default;
+
 
 // Material Design Toolbar
 // --------------------------------------------------
@@ -58,3 +61,13 @@ $item-md-padding-icon-bottom:         10px !default;
 @function ripple-background-color($button-color) {
   @return rgba( red($button-color), green($button-color), blue($button-color), 0.1);
 }
+
+
+// Material Design Body
+// --------------------------------------------------
+
+@mixin md-body() {
+  font-family: $font-family-md-base;
+  font-size: $font-size-md-base;
+  background-color: $background-md-color;
+}
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index fe5d25b38e..a52038af9f 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -18,6 +18,9 @@ $link-color:                 map-get($colors, primary) !default;
 $background-color:           #fff !default;
 $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-border-color:       #b2b2b2 !default;
 $toolbar-text-color:         $text-color !default;
diff --git a/scripts/snapshot/snapshot.config.js b/scripts/snapshot/snapshot.config.js
index dc03911370..920394ba66 100644
--- a/scripts/snapshot/snapshot.config.js
+++ b/scripts/snapshot/snapshot.config.js
@@ -8,8 +8,8 @@ exports.config = {
   domain: 'ionic-snapshot-go.appspot.com',
   //domain: 'localhost:8080',
 
-  specs: 'dist/e2e/**/*e2e.js',
-  //specs: 'dist/e2e/searchbar/**/*e2e.js',
+  //specs: 'dist/e2e/**/*e2e.js',
+  specs: 'dist/e2e/action-sheet/**/*e2e.js',
 
   sleepBetweenSpecs: 350,
 

From a22e2cfdd70ca9367929c04cfa39b4f785f33308 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 11:25:48 -0600
Subject: [PATCH 027/100] update mode link colors

---
 ionic/components/app/modes/ios.scss     | 23 +++++++++++++++++++++++
 ionic/components/app/modes/md.scss      | 21 +++++++++++++++++++++
 ionic/components/content/modes/ios.scss | 23 -----------------------
 3 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/ionic/components/app/modes/ios.scss b/ionic/components/app/modes/ios.scss
index 40976c0d2a..287e1223bf 100644
--- a/ionic/components/app/modes/ios.scss
+++ b/ionic/components/app/modes/ios.scss
@@ -3,6 +3,11 @@
 // iOS App
 // --------------------------------------------------
 
+
+a {
+  color: $link-ios-color;
+}
+
 hr {
   border-width: 0;
   height: 1px;
@@ -12,3 +17,21 @@ hr {
 &.hairlines hr {
   height: 0.55px;
 }
+
+@each $color-name, $color-value in $colors-ios {
+  h1, h2, h3, h4, h5, h6,
+  p,
+  span,
+  a:not([button]),
+  small,
+  b,
+  i,
+  strong,
+  em,
+  sub,
+  sup {
+    &[#{$color-name}] {
+      color: $color-value !important;
+    }
+  }
+}
diff --git a/ionic/components/app/modes/md.scss b/ionic/components/app/modes/md.scss
index b09f4f3c6e..c35583327d 100644
--- a/ionic/components/app/modes/md.scss
+++ b/ionic/components/app/modes/md.scss
@@ -4,9 +4,30 @@
 // --------------------------------------------------
 
 
+a {
+  color: $link-md-color;
+}
 
 hr {
   border-width: 0;
   height: 1px;
   background-color: rgba(0, 0, 0, 0.08);
 }
+
+@each $color-name, $color-value in $colors-md {
+  h1, h2, h3, h4, h5, h6,
+  p,
+  span,
+  a:not([button]),
+  small,
+  b,
+  i,
+  strong,
+  em,
+  sub,
+  sup {
+    &[#{$color-name}] {
+      color: $color-value !important;
+    }
+  }
+}
diff --git a/ionic/components/content/modes/ios.scss b/ionic/components/content/modes/ios.scss
index 07394e22e8..1d566f1d40 100644
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -10,10 +10,6 @@ ion-content {
   background-color: $background-ios-color;
 }
 
-a {
-  color: $link-ios-color;
-}
-
 .outer-content {
   background: $outer-content-ios-background-color;
 }
@@ -22,22 +18,3 @@ ion-nav.has-views,
 ion-tab.has-views {
   background: #000;
 }
-
-@each $color-name, $color-value in $colors-ios {
-  h1, h2, h3, h4, h5, h6,
-  p,
-  span,
-  a:not([button]),
-  small,
-  b,
-  i,
-  u,
-  strong,
-  em,
-  sub,
-  sup {
-    &[#{$color-name}] {
-      color: $color-value !important;
-    }
-  }
-}

From 8833f66b85639d60e4f4ce2bb211afdef5992029 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 11:33:02 -0600
Subject: [PATCH 028/100] fix md actionsheet

---
 ionic/components/action-sheet/modes/md.scss | 8 +++++---
 scripts/snapshot/snapshot.config.js         | 4 ++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ionic/components/action-sheet/modes/md.scss b/ionic/components/action-sheet/modes/md.scss
index 22c02e2e65..2666d32804 100644
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -10,10 +10,11 @@ $action-sheet-md-height:                   4.8rem !default;
 
 $action-sheet-md-title-color:              #757575 !default;
 $action-sheet-md-title-font-size:          1.6rem !default;
-$action-sheet-md-title-padding:            1.9rem 1.6rem 1.7rem !default;
+$action-sheet-md-title-padding:            19px 16px 17px !default;
 
 $action-sheet-md-button-text-color:        #222 !default;
 $action-sheet-md-button-font-size:         1.6rem !default;
+$action-sheet-md-button-padding:           0 16px !default;
 $action-sheet-md-background-active-color:  #f1f1f1 !default;
 
 $action-sheet-md-icon-font-size:           2.4rem !default;
@@ -28,11 +29,12 @@ $action-sheet-md-icon-margin:              0 28px 0 0 !default;
 }
 
 .action-sheet-button {
-  background-color: transparent;
+  padding: $action-sheet-md-button-padding;
+  min-height: $action-sheet-md-height;
   font-size: $action-sheet-md-button-font-size;
   font-weight: normal;
-  min-height: $action-sheet-md-height;
   color: $action-sheet-md-button-text-color;
+  background-color: transparent;
   text-align: left;
 
   &.activated {
diff --git a/scripts/snapshot/snapshot.config.js b/scripts/snapshot/snapshot.config.js
index 920394ba66..3a546721a0 100644
--- a/scripts/snapshot/snapshot.config.js
+++ b/scripts/snapshot/snapshot.config.js
@@ -8,8 +8,8 @@ exports.config = {
   domain: 'ionic-snapshot-go.appspot.com',
   //domain: 'localhost:8080',
 
-  //specs: 'dist/e2e/**/*e2e.js',
-  specs: 'dist/e2e/action-sheet/**/*e2e.js',
+  specs: 'dist/e2e/**/*e2e.js',
+  //specs: 'dist/e2e/action-sheet/**/*e2e.js',
 
   sleepBetweenSpecs: 350,
 

From ba87b3af8e6ef09877b1fb1a364974d566f22f65 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 14:47:01 -0600
Subject: [PATCH 029/100] use @at-root for roboto font

---
 ionic/ionic.md.scss          | 3 ---
 ionic/ionic.scss             | 3 ---
 ionic/themes/default.md.scss | 6 ++++++
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ionic/ionic.md.scss b/ionic/ionic.md.scss
index bc920f8727..40fdd3ca83 100644
--- a/ionic/ionic.md.scss
+++ b/ionic/ionic.md.scss
@@ -11,6 +11,3 @@
 body {
   @include md-body();
 }
-
-// Roboto Font
-@import "fonts/roboto";
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index 4574449418..b3f1c68a8f 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -14,6 +14,3 @@
   @import "components.md";
   @include md-body();
 }
-
-// Roboto Font
-@import "fonts/roboto";
diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index a2150965a3..3a087a40ed 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -71,3 +71,9 @@ $item-md-padding-icon-bottom:         10px !default;
   font-size: $font-size-md-base;
   background-color: $background-md-color;
 }
+
+
+// Roboto Font
+@at-root {
+  @import "fonts/roboto";
+}

From 3b78a6894c12522c3e04c595af7f8e596d289f52 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 15:23:21 -0600
Subject: [PATCH 030/100] re-org buttons

---
 ionic/components/button/button.scss    |  31 ----
 ionic/components/button/modes/ios.scss | 161 ++++++++++---------
 ionic/components/button/modes/md.scss  | 207 ++++++++++++++++++-------
 3 files changed, 232 insertions(+), 167 deletions(-)

diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index ecfc4e27af..2df50c1d4d 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -3,12 +3,6 @@
 // Buttons
 // --------------------------------------------------
 
-$button-font-size:                1.6rem !default;
-$button-margin:                   0.4rem 0.2rem !default;
-$button-padding:                  0 1em !default;
-$button-height:                   2.8em !default;
-$button-border-radius:            4px !default;
-
 $button-round-padding:            0 2.6rem !default;
 $button-round-border-radius:      64px !default;
 
@@ -21,16 +15,6 @@ $button-round-border-radius:      64px !default;
   align-items: center;
   justify-content: center;
   transition: background-color, opacity 100ms linear;
-  margin: $button-margin;
-  padding: $button-padding;
-  min-height: $button-height;
-  line-height: $button-height;
-
-  border: 1px solid #ccc;
-  border: transparent;
-  border-radius: $button-border-radius;
-
-  font-size: $button-font-size;
 
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -96,21 +80,6 @@ a.button {
 }
 
 
-// Clear Button
-// --------------------------------------------------
-
-.button-clear {
-  border-color: transparent;
-  background: transparent;
-
-  &.activated {
-    opacity: 0.4;
-    background: transparent;
-  }
-
-}
-
-
 
 // TODO
 // button should have classes:
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index ae706baefc..949d03d2c1 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -7,53 +7,80 @@
 // iOS Button
 // --------------------------------------------------
 
+$button-ios-margin:                   0.4rem 0.2rem !default;
+$button-ios-padding:                  0 1em !default;
+$button-ios-font-size:                1.6rem !default;
+$button-ios-height:                   2.8em !default;
 $button-ios-color:                    map-get($colors-ios, primary) !default;
 $button-ios-color-activated:          color-shade($button-ios-color) !default;
 $button-ios-text-color:               inverse($button-ios-color) !default;
 $button-ios-hover-opacity:            0.8 !default;
+$button-ios-border-radius:            4px !default;
 
 
+// iOS Default Button
+// --------------------------------------------------
+
 .button {
-  background: $button-ios-color;
+  margin: $button-ios-margin;
+  padding: $button-ios-padding;
+
+  min-height: $button-ios-height;
+  line-height: $button-ios-height;
+  font-size: $button-ios-font-size;
+
+  border-radius: $button-ios-border-radius;
   color: $button-ios-text-color;
+  background-color: $button-ios-color;
 
   &:hover:not(.disable-hover) {
-     opacity: $button-ios-hover-opacity;
-     text-decoration: none;
-   }
+    opacity: $button-ios-hover-opacity;
+    text-decoration: none;
+  }
 
-   &.activated {
-     opacity: 1;
-     background-color: $button-ios-color-activated;
-   }
+  &.activated {
+    opacity: 1;
+    background-color: $button-ios-color-activated;
+  }
 }
 
 
+// iOS Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin ios-button-default($color-name, $color-value) {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $fg-color: inverse($bg-color);
+
+    color: $fg-color;
+    background-color: $bg-color;
+
+    &.activated {
+      background-color: $bg-color-activated;
+    }
+  }
+
+}
+
+
+// iOS Block Button
+// --------------------------------------------------
+
 .button-block {
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
 }
 
 
-// Clear Button
-// --------------------------------------------------
-
-.button-clear {
-  color: color-shade($button-ios-color);
-
-  &:hover:not(.disable-hover) {
-    opacity: 0.6;
-    color: color-shade($button-ios-color);
-  }
-}
-
-
-// Outline Button
+// iOS Outline Button
 // --------------------------------------------------
 
 .button-outline {
   border: 1px solid $button-ios-color;
-  background: transparent;
+  background-color: transparent;
   color: $button-ios-color;
 
   &.activated {
@@ -64,89 +91,69 @@ $button-ios-hover-opacity:            0.8 !default;
 }
 
 
-
-// Default Button Color Mixin
+// iOS Outline Button Color Mixin
 // --------------------------------------------------
 
-@mixin button-default($bg-color, $bg-color-activated, $fg-color) {
-  background-color: $bg-color;
-  color: $fg-color;
+@mixin ios-button-outline($color-name, $color-value) {
 
-  &.activated {
-    background-color: $bg-color-activated;
-  }
-}
+  .button-outline-#{$color-name} {
+    $fg-color: color-shade($color-value, 5%);
+    border-color: $fg-color;
+    background-color: transparent;
+    color: $fg-color;
 
-
-// Generate Default Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-
-  .button-#{$color-name} {
-    $bg-color: $color-value;
-    $bg-color-activated: color-shade($bg-color);
-    $fg-color: inverse($bg-color);
-    @include button-default($bg-color, $bg-color-activated, $fg-color);
+    &.activated {
+      color: $background-ios-color;
+      background-color: $fg-color;
+    }
   }
 
 }
 
 
-// Generate Clear Button Colors
+// iOS Clear Button
 // --------------------------------------------------
 
-// TODO primary activated is wrong
-@each $color-name, $color-value in $colors-ios {
+.button-clear {
+  border-color: transparent;
+  color: color-shade($button-ios-color);
+  background-color: transparent;
 
-  $fg-color: color-shade($color-value);
+  &:hover:not(.disable-hover) {
+    opacity: 0.6;
+    color: color-shade($button-ios-color);
+  }
+}
+
+
+// iOS Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin ios-button-clear($color-name, $color-value) {
 
   .button-clear-#{$color-name} {
+    $fg-color: color-shade($color-value);
     border-color: transparent;
-    background: transparent;
+    background-color: transparent;
     color: $fg-color;
 
     &.activated {
       opacity: 0.4;
-      background: transparent;
+      background-color: transparent;
     }
 
     &:hover:not(.disable-hover) {
       color: color-shade($fg-color);
     }
   }
-
 }
 
 
-
-// Outline Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-outline($fg-color) {
-
-  border-color: $fg-color;
-  background: transparent;
-  color: $fg-color;
-
-  &.activated {
-    color: $background-ios-color;
-    background-color: $fg-color;
-  }
-
-}
-
-
-// Outline Clear Button Colors
+// Generate iOS Button Colors
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-ios {
-
-  .button-outline-#{$color-name} {
-
-    $fg-color: color-shade($color-value, 5%);
-    @include button-outline($fg-color);
-
-  }
-
+  @include ios-button-default($color-name, $color-value);
+  @include ios-button-outline($color-name, $color-value);
+  @include ios-button-clear($color-name, $color-value);
 }
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 7a3e6718c2..fea32031cc 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -7,9 +7,10 @@
 // Material Design Button
 // --------------------------------------------------
 
+$button-md-margin:                        0.4rem 0.2rem !default;
+$button-md-padding:                       0 1.1em !default;
 $button-md-font-size:                      1.4rem !default;
-$button-md-min-height:                     3.6rem !default;
-$button-md-padding:                        0 1.1em !default;
+$button-md-height:                         3.6rem !default;
 $button-md-box-shadow:                     0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 $button-md-box-shadow-active:              0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21) !default;
 
@@ -29,18 +30,29 @@ $button-md-text-color:                     inverse($button-md-color) !default;
 $button-md-hover-opacity:                  0.8 !default;
 
 
+// Material Design Default Button
+// --------------------------------------------------
+
 .button {
-  border-radius: $button-md-border-radius;
-
-  min-height: $button-md-min-height;
-
+  margin: $button-md-margin;
   padding: $button-md-padding;
-  text-transform: uppercase;
+
+  min-height: $button-md-height;
+  line-height: $button-md-height;
+  font-size: $button-md-font-size;
+
+  border: 0;
+  border-radius: $button-md-border-radius;
 
   font-weight: 500;
   font-size: $button-md-font-size;
+
+  color: $button-md-text-color;
+  background-color: $button-md-color;
   box-shadow: $button-md-box-shadow;
 
+  text-transform: uppercase;
+
   transition: box-shadow $button-md-transition-duration $button-md-animation-curve,
               background-color $button-md-transition-duration $button-md-animation-curve,
               color $button-md-transition-duration $button-md-animation-curve;
@@ -48,16 +60,35 @@ $button-md-hover-opacity:                  0.8 !default;
   &:hover:not(.disable-hover) {
     background-color: $button-md-clear-hover-background-color;
   }
+
+  &.activated {
+    box-shadow: $button-md-box-shadow-active;
+  }
 }
 
-.button-full {
-  border-radius: 0;
+// Material Design Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin md-button-default($color-name, $color-value) {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $fg-color: inverse($bg-color);
+
+    color: $fg-color;
+    background-color: $bg-color;
+
+    &.activated {
+      opacity: 1;
+    }
+  }
+
 }
 
-.button-round {
-  border-radius: $button-round-border-radius;
-  padding: $button-round-padding;
-}
+
+// Material Design Button Sizes
+// --------------------------------------------------
 
 .button-large {
   padding: 0 $button-large-padding;
@@ -71,10 +102,107 @@ $button-md-hover-opacity:                  0.8 !default;
   font-size: $button-small-font-size;
 }
 
-&.activated {
-  box-shadow: $button-md-box-shadow-active;
+
+// Material Design Full Button
+// --------------------------------------------------
+
+.button-full {
+  border-radius: 0;
 }
 
+
+// Material Design Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border: 1px solid $button-md-color;
+  background-color: transparent;
+  color: $button-md-color;
+  box-shadow: none;
+
+  &.activated {
+    opacity: 1;
+    color: $background-md-color;
+    background-color: $button-md-color;
+  }
+
+  md-ripple {
+    background-color: ripple-background-color($button-md-color);
+  }
+}
+
+
+// Material Design Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin md-button-outline($color-name, $color-value) {
+
+  .button-outline-#{$color-name} {
+    $fg-color: color-shade($color-value, 5%);
+    border-color: $fg-color;
+    background-color: transparent;
+    color: $fg-color;
+
+    &.activated {
+      color: $background-md-color;
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Material Design Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  border-color: transparent;
+  opacity: 1;
+  box-shadow: none;
+  background-color: transparent;
+
+  &.activated {
+    opacity: 0.4;
+    background-color: $button-md-clear-active-background-color;
+  }
+}
+
+
+// Material Design Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin md-button-clear($color-name, $color-value) {
+
+  .button-clear-#{$color-name} {
+    $fg-color: color-shade($color-value);
+    border-color: transparent;
+    background-color: transparent;
+    color: $fg-color;
+
+    &.activated {
+      opacity: 0.4;
+      background-color: transparent;
+    }
+
+    &:hover:not(.disable-hover) {
+      color: color-shade($fg-color);
+    }
+  }
+}
+
+
+// Material Design Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+  border-radius: $button-round-border-radius;
+}
+
+
+// Material Design FAB Button
+// --------------------------------------------------
+
 .button-fab {
   border-radius: 50%;
   box-shadow: $button-md-fab-box-shadow;
@@ -88,45 +216,6 @@ $button-md-hover-opacity:                  0.8 !default;
   padding: 0;
 }
 
-.button-outline {
-  box-shadow: none;
-
-  &.activated {
-    opacity: 1;
-  }
-
-  md-ripple {
-    background-color: ripple-background-color($button-md-color);
-  }
-}
-
-.button-clear {
-  opacity: 1;
-  box-shadow: none;
-  background: transparent;
-
-  &.activated {
-    opacity: 0.4;
-    background-color: $button-md-clear-active-background-color;
-  }
-}
-
-
-// Outline Button
-// --------------------------------------------------
-
-.button-outline {
-  border: 1px solid $button-md-color;
-  background: transparent;
-  color: $button-md-color;
-
-  &.activated {
-    opacity: 1;
-    color: $background-md-color;
-    background-color: $button-md-color;
-  }
-}
-
 // Material Design Button Color Mixin
 // --------------------------------------------------
 
@@ -139,7 +228,7 @@ $button-md-hover-opacity:                  0.8 !default;
   .button-outline {
 
     md-ripple {
-      background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
+      background-color: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
     }
 
     &.activated {
@@ -154,11 +243,11 @@ $button-md-hover-opacity:                  0.8 !default;
 }
 
 
-// Generate Material Design Button Auxiliary Colors
+// Generate Material Design Button Colors
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-md {
-
-  @include button-theme-md($color-name, $color-value);
-
+  @include md-button-default($color-name, $color-value);
+  @include md-button-outline($color-name, $color-value);
+  @include md-button-clear($color-name, $color-value);
 }

From 58717ebb4421f63aaaa509260e0e26f22743b27d Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 15:38:55 -0600
Subject: [PATCH 031/100] dynamic stylesheet mode links

---
 ionic/config/bootstrap.ts     | 21 +++++++++++++--------
 scripts/e2e/e2e.template.html |  4 +++-
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/ionic/config/bootstrap.ts b/ionic/config/bootstrap.ts
index e575f2ddc9..94bd377a13 100644
--- a/ionic/config/bootstrap.ts
+++ b/ionic/config/bootstrap.ts
@@ -73,12 +73,21 @@ export function ionicProviders(args={}) {
 
 function setupDom(window, document, config, platform, clickBlock, featureDetect) {
   let bodyEle = document.body;
-  if (!bodyEle) {
-    return ready(function() {
-      applyBodyCss(document, config, platform);
-    });
+  let mode = config.get('mode');
+
+  // if dynamic mode links have been added the fire up the correct one
+  let modeLinkAttr = mode + '-href';
+  let linkEle = document.head.querySelector('link[' + modeLinkAttr + ']');
+  if (linkEle) {
+    let href = linkEle.getAttribute(modeLinkAttr);
+    linkEle.removeAttribute(modeLinkAttr);
+    linkEle.href = href;
   }
 
+  // set the mode class name
+  // ios/md
+  bodyEle.classList.add(mode);
+
   let versions = platform.versions();
   platform.platforms().forEach(platformName => {
     // platform-ios
@@ -96,10 +105,6 @@ function setupDom(window, document, config, platform, clickBlock, featureDetect)
     }
   });
 
-  // set the mode class name
-  // ios/md
-  bodyEle.classList.add(config.get('mode'));
-
   // touch devices should not use :hover CSS pseudo
   // enable :hover CSS when the "hoverCSS" setting is not false
   if (config.get('hoverCSS') !== false) {
diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html
index 01cd01b8ab..6cedfac34e 100644
--- a/scripts/e2e/e2e.template.html
+++ b/scripts/e2e/e2e.template.html
@@ -4,7 +4,9 @@
   <title>Ionic E2E</title>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <link href="../../../css/ionic.css" rel="stylesheet">
+
+  <link ios-href="../../../css/ionic.ios.css" rel="stylesheet">
+  <link md-href="../../../css/ionic.md.css" rel="stylesheet">
 
   <script>
     if (!console.time) {

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 032/100] 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'
   }

From 56496e4f2ac5a03ed79c95bb7d3d23e05c6586ed Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 21:07:15 -0600
Subject: [PATCH 033/100] only apply button class for non item

---
 ionic/components/button/button.ts | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index e6b04c7e5b..58a710da14 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -30,10 +30,7 @@ import {Config} from '../../config/config';
 
  */
 @Directive({
-  selector: 'button,[button]',
-  host: {
-    'class': 'button'
-  }
+  selector: 'button,[button]'
 })
 export class Button {
 
@@ -50,10 +47,12 @@ export class Button {
     }
 
     if (element.hasAttribute('ion-item')) {
-      // no need to put on these icon classes for an ion-item
+      // no need to put on these classes for an ion-item
       return;
     }
 
+    renderer.setElementAttribute(elementRef, 'class', 'button');
+
     if (type) {
       renderer.setElementAttribute(elementRef, type, '');
     }
@@ -85,13 +84,13 @@ export class Button {
 
     if (nodes.length > 1) {
       if (nodes[0] === ICON && nodes[1] === TEXT) {
-        element.classList.add('icon-left');
+        renderer.setElementClass(elementRef, 'icon-left', true);
 
       } else if (nodes[0] === TEXT && nodes[1] === ICON) {
-        element.classList.add('icon-right');
+        renderer.setElementClass(elementRef, 'icon-right', true);
       }
     } else if (nodes.length === 1 && nodes[0] === ICON) {
-      element.classList.add('icon-only');
+      renderer.setElementClass(elementRef, 'icon-only', true);
     }
 
   }

From 84b21cfd98cb043361bdf6efc5f84ce36954a342 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 21:41:03 -0600
Subject: [PATCH 034/100] dynamically add button classes from attributes

---
 ionic/components/button/button.ts      | 45 +++++++++++++++++++++++++-
 ionic/components/button/modes/ios.scss |  1 -
 ionic/components/button/modes/md.scss  |  1 -
 ionic/components/icon/icon.ts          |  6 ++--
 4 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 58a710da14..2427a568b7 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -40,6 +40,7 @@ export class Button {
     renderer: Renderer,
     @Attribute('type') type: string
   ) {
+
     let element = elementRef.nativeElement;
 
     if (config.get('hoverCSS') === false) {
@@ -51,7 +52,9 @@ export class Button {
       return;
     }
 
-    renderer.setElementAttribute(elementRef, 'class', 'button');
+    renderer.setElementClass(elementRef, 'button', true);
+
+    this.attrToClass(renderer, elementRef);
 
     if (type) {
       renderer.setElementAttribute(elementRef, type, '');
@@ -95,7 +98,47 @@ export class Button {
 
   }
 
+  attrToClass(renderer, elementRef) {
+    // looping through native dom attributes, eww
+    // https://github.com/angular/angular/issues/1818
+
+    let element = elementRef.nativeElement;
+    let attrs = element.attributes;
+    let btnAttrs = [];
+
+    BUTTON_SIZE_ATTRS.forEach(buttonAttr => {
+      if (element.hasAttribute(buttonAttr)) {
+        renderer.setElementClass(elementRef, 'button-' + buttonAttr, true);
+      }
+    });
+
+    BUTTON_TYPE_ATTRS.forEach(buttonAttr => {
+      if (element.hasAttribute(buttonAttr)) {
+        renderer.setElementClass(elementRef, 'button-' + buttonAttr, true);
+        btnAttrs.push(buttonAttr);
+      }
+    });
+
+    let attrName;
+    for (let i = 0, l = attrs.length; i < l; i++) {
+      attrName = attrs[i].name;
+      if (attrs[i].value === '' && COMMON_HTML_ATTR.test(attrName) !== true && BUTTON_TYPE_ATTRS.indexOf(attrName) < 0 && BUTTON_SIZE_ATTRS.indexOf(attrName) < 0) {
+        if (btnAttrs.length) {
+          btnAttrs.forEach(buttonAttr => {
+            renderer.setElementClass(elementRef, 'button-' + buttonAttr + '-' + attrName, true);
+          });
+        } else {
+          renderer.setElementClass(elementRef, 'button-' + attrName, true);
+        }
+      }
+    }
+  }
+
 }
 
+const COMMON_HTML_ATTR = /id|class|type|href|ng-/;
+const BUTTON_TYPE_ATTRS = ['block', 'full', 'round', 'clear', 'outline'];
+const BUTTON_SIZE_ATTRS = ['large', 'small'];
+
 const TEXT = 1;
 const ICON = 2;
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index 949d03d2c1..ad6876d241 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -26,7 +26,6 @@ $button-ios-border-radius:            4px !default;
   padding: $button-ios-padding;
 
   min-height: $button-ios-height;
-  line-height: $button-ios-height;
   font-size: $button-ios-font-size;
 
   border-radius: $button-ios-border-radius;
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index fea32031cc..5ad83d1837 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -38,7 +38,6 @@ $button-md-hover-opacity:                  0.8 !default;
   padding: $button-md-padding;
 
   min-height: $button-md-height;
-  line-height: $button-md-height;
   font-size: $button-md-font-size;
 
   border: 0;
diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index 14a9b4b43c..c0a5e9b174 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -6,8 +6,8 @@ import {Config} from '../../config/config';
 /**
  * @name Icon
  * @description
- * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons, 
- * check out the [Ionicons resource docs](../../../../../resources/ionicons). 
+ * Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons,
+ * check out the [Ionicons resource docs](../../../../../resources/ionicons).
  *
  * @property {boolean} [is-active] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
  * If there is not an outlined version for the particular icon, it will use the default (full) version.
@@ -53,7 +53,7 @@ export class Icon {
 
     } else if (!this.name) {
       // looping through native dom attributes, eww
-      // https://github.com/angular/angular/issues/3961
+      // https://github.com/angular/angular/issues/1818
       for (let i = 0, l = ele.attributes.length; i < l; i++) {
         if (ele.attributes[i].value === '' && /_|item-|is-active|large|small|class/.test(ele.attributes[i].name) !== true) {
           this.name = ele.attributes[i].name;

From 4025a01fe0983c43f603844e597c99ee9888a5e7 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 21:48:47 -0600
Subject: [PATCH 035/100] checkbox updates

---
 ionic/components/button/modes/ios.scss   | 11 ++++++---
 ionic/components/button/modes/md.scss    | 11 ++++++---
 ionic/components/checkbox/checkbox.scss  | 16 -------------
 ionic/components/checkbox/checkbox.ts    |  6 ++---
 ionic/components/checkbox/modes/ios.scss | 29 ++++++++++++++----------
 ionic/components/checkbox/modes/md.scss  | 24 ++++++++++++--------
 6 files changed, 50 insertions(+), 47 deletions(-)
 delete mode 100644 ionic/components/checkbox/checkbox.scss

diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index ad6876d241..d961c43bda 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -1,8 +1,5 @@
 @import "../../../globals.ios";
 @import "../button";
-@import "../button-fab";
-@import "../button-icon";
-@import "../button-size";
 
 // iOS Button
 // --------------------------------------------------
@@ -156,3 +153,11 @@ $button-ios-border-radius:            4px !default;
   @include ios-button-outline($color-name, $color-value);
   @include ios-button-clear($color-name, $color-value);
 }
+
+
+// Core Button Overrides
+// --------------------------------------------------
+
+@import "../button-fab";
+@import "../button-icon";
+@import "../button-size";
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 5ad83d1837..a3611e5c27 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -1,8 +1,5 @@
 @import "../../../globals.md";
 @import "../button";
-@import "../button-fab";
-@import "../button-icon";
-@import "../button-size";
 
 // Material Design Button
 // --------------------------------------------------
@@ -250,3 +247,11 @@ $button-md-hover-opacity:                  0.8 !default;
   @include md-button-outline($color-name, $color-value);
   @include md-button-clear($color-name, $color-value);
 }
+
+
+// Core Button Overrides
+// --------------------------------------------------
+
+@import "../button-fab";
+@import "../button-icon";
+@import "../button-size";
diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss
deleted file mode 100644
index 52d55bf78a..0000000000
--- a/ionic/components/checkbox/checkbox.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-@import "../../globals.core";
-
-// Checkbox
-// --------------------------------------------------
-
-
-ion-checkbox {
-  cursor: pointer;
-  @include user-select-none();
-}
-
-ion-checkbox[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-color;
-  pointer-events: none;
-}
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 17704a8b86..50f4ee7c96 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -39,9 +39,9 @@ import {Form} from '../../util/form';
   },
   template:
     '<div class="item-inner">' +
-      '<media-checkbox disable-activated>' +
-        '<checkbox-icon></checkbox-icon>' +
-      '</media-checkbox>' +
+      '<div class="media-checkbox" disable-activated>' +
+        '<div class="checkbox-icon"></div>' +
+      '</div>' +
       '<ion-item-content id="{{labelId}}">' +
         '<ng-content></ng-content>' +
       '</ion-item-content>' +
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index 721c1a6fa4..1999356935 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -1,5 +1,5 @@
 @import "../../../globals.ios";
-@import "../checkbox";
+
 
 // iOS Checkbox Structure
 // --------------------------------------------------
@@ -13,13 +13,15 @@ $checkbox-ios-checkmark-color-on:    $background-ios-color !default;
 
 
 ion-checkbox {
+  cursor: pointer;
+  @include user-select-none();
 
-  &[aria-checked=true] checkbox-icon {
+  &[aria-checked=true] .checkbox-icon {
     background-color: $checkbox-ios-background-color-on;
     border-color: $checkbox-ios-border-color-on;
   }
 
-  &[aria-checked=true] checkbox-icon:after {
+  &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
     border: 1px solid $checkbox-ios-checkmark-color-on;
     top: 3px;
@@ -38,12 +40,17 @@ ion-checkbox {
 
 }
 
-media-checkbox {
-  display: block;
+ion-checkbox[aria-disabled=true] {
+  opacity: 0.5;
+  color: $subdued-text-ios-color;
+  pointer-events: none;
+}
+
+.media-checkbox {
   margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px;
 }
 
-checkbox-icon {
+.checkbox-icon {
   position: relative;
   display: block;
   width: $checkbox-ios-icon-size;
@@ -59,7 +66,7 @@ checkbox-icon {
 
 @mixin checkbox-theme-ios($color-name, $bg-on) {
 
-  ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon {
+  ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
   }
@@ -67,11 +74,9 @@ checkbox-icon {
 }
 
 
-// Generate iOS Checkbox Auxiliary Colors
+// Generate iOS Checkbox Colors
 // --------------------------------------------------
 
-@each $color-name, $value in $colors-ios {
-
-  @include checkbox-theme-ios($color-name, $value);
-
+@each $color-name, $color-value in $colors-ios {
+  @include checkbox-theme-ios($color-name, $color-value);
 }
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index ca7067bc9c..528a216b1b 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -1,5 +1,4 @@
 @import "../../../globals.md";
-@import "../checkbox";
 
 // Material Design Checkbox
 // --------------------------------------------------
@@ -15,6 +14,9 @@ $checkbox-md-checkmark-color-on:    $background-md-color !default;
 
 
 ion-checkbox {
+  cursor: pointer;
+  @include user-select-none();
+
   &.item .item-inner {
     border: none;
     padding-right: 0;
@@ -26,12 +28,12 @@ ion-checkbox {
     padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
   }
 
-  &[aria-checked=true] checkbox-icon {
+  &[aria-checked=true] .checkbox-icon {
     background-color: $checkbox-md-background-color-on;
     border-color: $checkbox-md-border-color-on;
   }
 
-  &[aria-checked=true] checkbox-icon:after {
+  &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
     border: 2px solid $checkbox-md-checkmark-color-on;
     top: 0;
@@ -46,15 +48,19 @@ ion-checkbox {
 
 }
 
-media-checkbox {
-  display: block;
+ion-checkbox[aria-disabled=true] {
+  opacity: 0.5;
+  color: $subdued-text-md-color;
+  pointer-events: none;
+}
+
+.media-checkbox {
   // TODO convert these to sass variables
   margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px;
 }
 
-checkbox-icon {
+.checkbox-icon {
   position: relative;
-  display: block;
   width: $checkbox-md-icon-size;
   height: $checkbox-md-icon-size;
   border-radius: $checkbox-md-border-radius;
@@ -68,7 +74,7 @@ checkbox-icon {
 
 @mixin checkbox-theme-md($color-name, $bg-on) {
 
-  ion-checkbox[#{$color-name}][aria-checked=true] checkbox-icon {
+  ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
   }
@@ -80,7 +86,5 @@ checkbox-icon {
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-md {
-
   @include checkbox-theme-md($color-name, $color-value);
-
 }

From 3d3eae1e4f4d428f1aeba5b2e214981879625205 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sun, 6 Dec 2015 20:44:56 -0600
Subject: [PATCH 036/100] set button css by attrs

---
 ionic/components/button/button-size.scss    |  25 ---
 ionic/components/button/button.ts           | 107 +++++++------
 ionic/components/button/modes/ios.scss      |  24 ++-
 ionic/components/button/modes/md.scss       |  20 ++-
 ionic/components/button/test/button.spec.ts | 160 ++++++++++++++++++++
 ionic/components/toolbar/toolbar.ts         |  17 ++-
 ionic/platform/platform.ts                  |   5 +-
 ionic/platform/registry.ts                  |   2 +-
 8 files changed, 273 insertions(+), 87 deletions(-)
 delete mode 100644 ionic/components/button/button-size.scss
 create mode 100644 ionic/components/button/test/button.spec.ts

diff --git a/ionic/components/button/button-size.scss b/ionic/components/button/button-size.scss
deleted file mode 100644
index db45559bb3..0000000000
--- a/ionic/components/button/button-size.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "../../globals.core";
-
-// Button Sizes
-// --------------------------------------------------
-
-$button-large-font-size:          2rem !default;
-$button-large-height:             2.8em !default;
-$button-large-padding:            1.0em !default;
-
-$button-small-font-size:          1.3rem !default;
-$button-small-height:             2.1em !default;
-$button-small-padding:            0.9em !default;
-
-
-.button-large {
-  padding: 0 $button-large-padding;
-  min-height: $button-large-height;
-  font-size: $button-large-font-size;
-}
-
-.button-small {
-  padding: 0 $button-small-padding;
-  min-height: $button-small-height;
-  font-size: $button-small-font-size;
-}
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 2427a568b7..afea672cc0 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -1,16 +1,12 @@
-import {Directive, ElementRef, Renderer, Attribute} from 'angular2/angular2';
+import {Directive, ElementRef, Renderer, Attribute, Optional} from 'angular2/angular2';
 
 import {Config} from '../../config/config';
+import {Toolbar} from '../toolbar/toolbar';
 
 
 /**
   * @name Button
   * @module ionic
-  * @property [primary] - sets button color to default primary
-  * @property [secondary] - sets button color to default secondary
-  * @property [danger] - sets button color to default danger
-  * @property [light] - sets button color to default light
-  * @property [dark] - sets button color to default dark
   * @property [outline] - for an unfilled outline button
   * @property [clear] - for a transparent button that only shows text and icons
   * @property [round] - for a button with rounded corners
@@ -36,10 +32,14 @@ export class Button {
 
   constructor(
     config: Config,
-    elementRef: ElementRef,
-    renderer: Renderer,
-    @Attribute('type') type: string
+    private elementRef: ElementRef,
+    private renderer: Renderer
   ) {
+    this._role = 'button'; // bar-button
+    this._size = null; // large
+    this._style = null; // outline
+    this._display = null; // block
+    this._colors = []; // primary
 
     let element = elementRef.nativeElement;
 
@@ -49,16 +49,11 @@ export class Button {
 
     if (element.hasAttribute('ion-item')) {
       // no need to put on these classes for an ion-item
+      this._role = null;
       return;
     }
 
-    renderer.setElementClass(elementRef, 'button', true);
-
-    this.attrToClass(renderer, elementRef);
-
-    if (type) {
-      renderer.setElementAttribute(elementRef, type, '');
-    }
+    this._readAttrs(element);
 
     // figure out if and where the icon lives in the button
     let childNodes = element.childNodes;
@@ -98,47 +93,65 @@ export class Button {
 
   }
 
-  attrToClass(renderer, elementRef) {
-    // looping through native dom attributes, eww
-    // https://github.com/angular/angular/issues/1818
+  afterContentInit() {
+    this._assignCss(true);
+  }
 
-    let element = elementRef.nativeElement;
-    let attrs = element.attributes;
-    let btnAttrs = [];
-
-    BUTTON_SIZE_ATTRS.forEach(buttonAttr => {
-      if (element.hasAttribute(buttonAttr)) {
-        renderer.setElementClass(elementRef, 'button-' + buttonAttr, true);
-      }
-    });
-
-    BUTTON_TYPE_ATTRS.forEach(buttonAttr => {
-      if (element.hasAttribute(buttonAttr)) {
-        renderer.setElementClass(elementRef, 'button-' + buttonAttr, true);
-        btnAttrs.push(buttonAttr);
-      }
-    });
+  setRole(val) {
+    this._role = val;
+  }
 
+  _readAttrs(element) {
+    let elementAttrs = element.attributes;
     let attrName;
-    for (let i = 0, l = attrs.length; i < l; i++) {
-      attrName = attrs[i].name;
-      if (attrs[i].value === '' && COMMON_HTML_ATTR.test(attrName) !== true && BUTTON_TYPE_ATTRS.indexOf(attrName) < 0 && BUTTON_SIZE_ATTRS.indexOf(attrName) < 0) {
-        if (btnAttrs.length) {
-          btnAttrs.forEach(buttonAttr => {
-            renderer.setElementClass(elementRef, 'button-' + buttonAttr + '-' + attrName, true);
-          });
-        } else {
-          renderer.setElementClass(elementRef, 'button-' + attrName, true);
-        }
+    for (let i = 0, l = elementAttrs.length; i < l; i++) {
+      if (elementAttrs[i].value !== '') continue;
+
+      attrName = elementAttrs[i].name;
+
+      if (BUTTON_STYLE_ATTRS.indexOf(attrName) > -1) {
+        this._style = attrName;
+
+      } else if (BUTTON_DISPLAY_ATTRS.indexOf(attrName) > -1) {
+        this._display = attrName;
+
+      } else if (BUTTON_SIZE_ATTRS.indexOf(attrName) > -1) {
+        this._size = attrName;
+
+      } else if (!(IGNORE_ATTRS.test(attrName))) {
+        this._colors.push(attrName);
       }
     }
   }
 
+  _assignCss(assignCssClass) {
+    let setElementClass = this.renderer.setElementClass;
+    let elementRef = this.elementRef;
+    let role = this._role;
+    if (role) {
+      setElementClass(elementRef, role, assignCssClass); // button
+      if (this._style) setElementClass(elementRef, role + '-' + this._style, assignCssClass); // button-clear
+      if (this._display) setElementClass(elementRef, role + '-' + this._display, assignCssClass); // button-full
+      if (this._size) setElementClass(elementRef, role + '-' + this._size, assignCssClass); // button-small
+      this._colors.forEach(color => {
+        setElementClass(elementRef, role + '-' + color, assignCssClass); // button-secondary
+      });  
+    }
+  }
+
+  static setRoles(contentButtonChildren, role) {
+    let buttons = contentButtonChildren.toArray();
+    buttons.forEach(button => {
+      button.setRole(role);
+    });
+  }
+
 }
 
-const COMMON_HTML_ATTR = /id|class|type|href|ng-/;
-const BUTTON_TYPE_ATTRS = ['block', 'full', 'round', 'clear', 'outline'];
 const BUTTON_SIZE_ATTRS = ['large', 'small'];
+const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab'];
+const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
+const IGNORE_ATTRS = /_ng/;
 
 const TEXT = 1;
 const ICON = 2;
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index d961c43bda..c49dd925f8 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -14,6 +14,13 @@ $button-ios-text-color:               inverse($button-ios-color) !default;
 $button-ios-hover-opacity:            0.8 !default;
 $button-ios-border-radius:            4px !default;
 
+$button-ios-large-font-size:          2rem !default;
+$button-ios-large-height:             2.8em !default;
+$button-ios-large-padding:            1.0em !default;
+$button-ios-small-font-size:          1.3rem !default;
+$button-ios-small-height:             2.1em !default;
+$button-ios-small-padding:            0.9em !default;
+
 
 // iOS Default Button
 // --------------------------------------------------
@@ -62,6 +69,22 @@ $button-ios-border-radius:            4px !default;
 }
 
 
+// iOS Button Sizes
+// --------------------------------------------------
+
+.button-large {
+  padding: 0 $button-ios-large-padding;
+  min-height: $button-ios-large-height;
+  font-size: $button-ios-large-font-size;
+}
+
+.button-small {
+  padding: 0 $button-ios-small-padding;
+  min-height: $button-ios-small-height;
+  font-size: $button-ios-small-font-size;
+}
+
+
 // iOS Block Button
 // --------------------------------------------------
 
@@ -160,4 +183,3 @@ $button-ios-border-radius:            4px !default;
 
 @import "../button-fab";
 @import "../button-icon";
-@import "../button-size";
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index a3611e5c27..154e960525 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -26,6 +26,13 @@ $button-md-color-activated:                color-shade($button-md-color) !defaul
 $button-md-text-color:                     inverse($button-md-color) !default;
 $button-md-hover-opacity:                  0.8 !default;
 
+$button-md-large-font-size:                2rem !default;
+$button-md-large-height:                   2.8em !default;
+$button-md-large-padding:                  1.0em !default;
+$button-md-small-font-size:                1.3rem !default;
+$button-md-small-height:                   2.1em !default;
+$button-md-small-padding:                  0.9em !default;
+
 
 // Material Design Default Button
 // --------------------------------------------------
@@ -87,15 +94,15 @@ $button-md-hover-opacity:                  0.8 !default;
 // --------------------------------------------------
 
 .button-large {
-  padding: 0 $button-large-padding;
-  min-height: $button-large-height;
-  font-size: $button-large-font-size;
+  padding: 0 $button-md-large-padding;
+  min-height: $button-md-large-height;
+  font-size: $button-md-large-font-size;
 }
 
 .button-small {
-  padding: 0 $button-small-padding;
-  min-height: $button-small-height;
-  font-size: $button-small-font-size;
+  padding: 0 $button-md-small-padding;
+  min-height: $button-md-small-height;
+  font-size: $button-md-small-font-size;
 }
 
 
@@ -254,4 +261,3 @@ $button-md-hover-opacity:                  0.8 !default;
 
 @import "../button-fab";
 @import "../button-icon";
-@import "../button-size";
diff --git a/ionic/components/button/test/button.spec.ts b/ionic/components/button/test/button.spec.ts
new file mode 100644
index 0000000000..e37a0c9f9a
--- /dev/null
+++ b/ionic/components/button/test/button.spec.ts
@@ -0,0 +1,160 @@
+import {Button, Config} from 'ionic/ionic';
+
+export function run() {
+
+  function mockButton(attrs, config) {
+    config = config || new Config();
+    let elementRef = {
+      nativeElement: document.createElement('button')
+    };
+    if (attrs) {
+      for (let i = 0; i < attrs.length; i++) {
+        elementRef.nativeElement.setAttribute(attrs[i], '');
+      }
+    }
+    let renderer = {
+      setElementClass: function(elementRef, className, shouldAdd) {
+        elementRef.nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
+      }
+    };
+    return new Button(config, elementRef, renderer);
+  }
+
+  function hasClass(button, className) {
+    return button.elementRef.nativeElement.classList.contains(className);
+  }
+
+  it('should set a different button role', () => {
+    let b = mockButton(['outline', 'small', 'full', 'primary']);
+    b.setRole('bar-button')
+    b._assignCss(true);
+    expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+    expect(hasClass(b, 'bar-button-small')).toEqual(true);
+    expect(hasClass(b, 'bar-button-full')).toEqual(true);
+    expect(hasClass(b, 'bar-button-primary')).toEqual(true);
+
+    expect(hasClass(b, 'button-outline')).toEqual(false);
+    expect(hasClass(b, 'button-small')).toEqual(false);
+    expect(hasClass(b, 'button-full')).toEqual(false);
+    expect(hasClass(b, 'button-primary')).toEqual(false);
+  });
+
+  it('should remove button color attributes and add different role', () => {
+    let b = mockButton(['outline', 'small', 'full', 'primary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+    expect(hasClass(b, 'button-primary')).toEqual(true);
+
+    b._assignCss(false);
+    expect(hasClass(b, 'button-outline')).toEqual(false);
+    expect(hasClass(b, 'button-small')).toEqual(false);
+    expect(hasClass(b, 'button-full')).toEqual(false);
+    expect(hasClass(b, 'button-primary')).toEqual(false);
+  });
+
+  it('should read button color attributes', () => {
+    let b = mockButton(['primary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-primary')).toEqual(true);
+
+    b = mockButton(['primary', 'secondary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-primary')).toEqual(true);
+    expect(hasClass(b, 'button-secondary')).toEqual(true);
+
+    b = mockButton(['outline', 'small', 'full', 'primary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+    expect(hasClass(b, 'button-primary')).toEqual(true);
+  });
+
+  it('should read button style attributes', () => {
+    let b = mockButton(['round']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-round')).toEqual(true);
+
+    b = mockButton(['clear']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
+
+    b = mockButton(['outline']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+
+    b = mockButton(['fab']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-fab')).toEqual(true);
+
+    b = mockButton(['clear', 'outline', 'small', 'full']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-clear')).toEqual(false);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+  });
+
+  it('should read button display attributes', () => {
+    let b = mockButton(['block']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-block')).toEqual(true);
+
+    b = mockButton(['full']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+
+    b = mockButton(['block', 'full']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-block')).toEqual(false);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+  });
+
+  it('should read button size attributes', () => {
+    let b = mockButton(['small']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+
+    b = mockButton(['large']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-large')).toEqual(true);
+
+    b = mockButton(['large', 'small']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-large')).toEqual(false);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+  });
+
+  it('should not add button css class for ion-item attribute', () => {
+    let b = mockButton(['ion-item']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(false);
+  });
+
+  it('should add button css class', () => {
+    let b = mockButton();
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+  });
+
+  it('should add disable-hover css class', () => {
+    let config = new Config({
+      hoverCSS: false
+    });
+    let b = mockButton(null, config);
+
+    expect(hasClass(b, 'disable-hover')).toEqual(true);
+  });
+
+  it('should set defaults', () => {
+    let b = mockButton();
+    expect(b._role).toEqual('button');
+    expect(b._size).toEqual(null);
+    expect(b._colors.length).toEqual(0);
+    expect(b._style).toEqual(null);
+    expect(b._display).toEqual(null);
+  });
+
+}
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index 072780f3b8..c779731271 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -1,9 +1,10 @@
-import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject} from 'angular2/angular2';
+import {Component, Directive, Host, ElementRef, Optional, forwardRef, Inject, ContentChildren, ContentChild, QueryList} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Config} from '../../config/config';
 import {MenuToggle} from '../menu/menu-toggle';
 import {Navbar} from '../navbar/navbar';
+import {Button} from '../button/button';
 
 
 /**
@@ -63,8 +64,8 @@ export class ToolbarBase extends Ion  {
 /**
  * @name Toolbar
  * @description
- * The toolbar is generic bar that sits above content.
- * Unlike an `ionNavbar`, `ionToolbar` can be used for a subheader as well.
+ * The toolbar is generic bar that sits above or below content.
+ * Unlike an `Navbar`, `Toolbar` can be used for a subheader as well.
  * @usage
  * ```html
  * <ion-toolbar>
@@ -89,6 +90,7 @@ export class ToolbarBase extends Ion  {
   }
 })
 export class Toolbar extends ToolbarBase {
+
   constructor(
     elementRef: ElementRef,
     config: Config
@@ -101,14 +103,14 @@ export class Toolbar extends ToolbarBase {
 /**
  * @name ToolbarTitle
  * @description
- * `ion-title` is a component that sets the title of the `ionToolbar` or `ionNavbar`
+ * `ion-title` is a component that sets the title of the `Toolbar` or `Navbar`
  * @usage
  * ```html
  * <ion-navbar *navbar>
  *    <ion-title>Tab 1</ion-title>
  * </ion-navbar>
  *
- *<!-- or if you wanted to crate a subheader title-->
+ *<!-- or if you wanted to create a subheader title-->
  * <ion-navbar *navbar>
  *    <ion-title>Tab 1</ion-title>
  * </ion-navbar>
@@ -159,4 +161,9 @@ export class ToolbarItem extends Ion {
     toolbar && toolbar.addItemRef(elementRef);
     navbar && navbar.addItemRef(elementRef);
   }
+
+  @ContentChildren(Button)
+  set _buttons(buttons) {
+    Button.setRoles(buttons, 'bar-button');
+  }
 }
diff --git a/ionic/platform/platform.ts b/ionic/platform/platform.ts
index 90d050833b..0a3b67e3a5 100644
--- a/ionic/platform/platform.ts
+++ b/ionic/platform/platform.ts
@@ -301,7 +301,10 @@ export class Platform {
    * @returns {boolean} TODO
    */
   testNavigatorPlatform(navigatorPlatformExpression) {
-    return navigatorPlatformExpression.test(this._bPlt || '');
+    if (navigatorPlatformExpression && this._bPlt) {
+      let rgx = new RegExp(navigatorPlatformExpression, 'i');
+      return rgx.test(this._bPlt);
+    }
   }
 
   /**
diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts
index 57233170df..abf3218527 100644
--- a/ionic/platform/registry.ts
+++ b/ionic/platform/registry.ts
@@ -52,7 +52,7 @@ Platform.register({
       // however, under-powered devices shouldn't use ripple
       // if this a linux device, and is using Android Chrome v36 (Android 5.0)
       // or above then use ripple, otherwise do not use a ripple effect
-      if (p.testNavigatorPlatform('/linux/i')) {
+      if (p.testNavigatorPlatform(/linux/i)) {
         let chromeVersion = p.matchUserAgentVersion(/Chrome\/(\d+).(\d+)?/);
         if (chromeVersion) {
           // linux android device using modern android chrome browser gets ripple

From c6626e0af8682f90f1f889057a13e155ed462a4a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sun, 6 Dec 2015 21:46:13 -0600
Subject: [PATCH 037/100] use roles for button icons

---
 ionic/components/button/button-icon.scss     |  55 +++----
 ionic/components/button/button.ts            |  60 ++++---
 ionic/components/toolbar/modes/ios.scss      | 159 +++++++++++--------
 ionic/components/toolbar/modes/md.scss       |  21 +++
 ionic/components/toolbar/toolbar-button.scss |  68 ++++++++
 ionic/components/toolbar/toolbar.scss        |  72 +--------
 6 files changed, 242 insertions(+), 193 deletions(-)
 create mode 100644 ionic/components/toolbar/toolbar-button.scss

diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss
index 31645d1f0d..62870852b7 100644
--- a/ionic/components/button/button-icon.scss
+++ b/ionic/components/button/button-icon.scss
@@ -4,41 +4,30 @@
 // --------------------------------------------------
 
 
-button,
-[button] {
+.button-icon-left icon {
+  margin-left: -0.3em;
+  padding-right: 0.3em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+
+.button-icon-right icon {
+  margin-right: -0.2em;
+  padding-left: 0.4em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+
+.button-icon-only {
+  padding: 0;
+  min-width: 0.9em;
 
   icon {
-    font-size: 1.4em;
-    background: none;
-    border: none;
-    pointer-events: none;
+    padding: 0 0.5em;
+    font-size: 1.8em;
     line-height: 0.67;
+    pointer-events: none;
   }
-
-  &.icon-left icon {
-    margin-left: -0.3em;
-    padding-right: 0.3em;
-  }
-
-  &.icon-right icon {
-    margin-right: -0.2em;
-    padding-left: 0.4em;
-  }
-
-  &.icon-only {
-    padding: 0;
-    min-width: 0.9em;
-
-    icon {
-      padding: 0 0.5em;
-      font-size: 1.8em;
-    }
-  }
-
-  &[small] icon {
-    margin-left: 0;
-    margin-right: 0;
-    font-size: 1.4em;
-  }
-
 }
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index afea672cc0..9a89270168 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -35,11 +35,12 @@ export class Button {
     private elementRef: ElementRef,
     private renderer: Renderer
   ) {
-    this._role = 'button'; // bar-button
-    this._size = null; // large
-    this._style = null; // outline
-    this._display = null; // block
-    this._colors = []; // primary
+    this._role = 'button'; // bar-button/item-button
+    this._size = null; // large/small
+    this._style = null; // outline/clear
+    this._display = null; // block/full
+    this._colors = []; // primary/secondary
+    this._icon = null; // left/right/only
 
     let element = elementRef.nativeElement;
 
@@ -54,7 +55,18 @@ export class Button {
     }
 
     this._readAttrs(element);
+    this._readIcon(element);
+  }
 
+  afterContentInit() {
+    this._assignCss(true);
+  }
+
+  setRole(val) {
+    this._role = val;
+  }
+
+  _readIcon(element) {
     // figure out if and where the icon lives in the button
     let childNodes = element.childNodes;
     let childNode;
@@ -82,23 +94,14 @@ export class Button {
 
     if (nodes.length > 1) {
       if (nodes[0] === ICON && nodes[1] === TEXT) {
-        renderer.setElementClass(elementRef, 'icon-left', true);
+        this._icon = 'icon-left';
 
       } else if (nodes[0] === TEXT && nodes[1] === ICON) {
-        renderer.setElementClass(elementRef, 'icon-right', true);
+        this._icon = 'icon-right';
       }
     } else if (nodes.length === 1 && nodes[0] === ICON) {
-      renderer.setElementClass(elementRef, 'icon-only', true);
+      this._icon = 'icon-only';
     }
-
-  }
-
-  afterContentInit() {
-    this._assignCss(true);
-  }
-
-  setRole(val) {
-    this._role = val;
   }
 
   _readAttrs(element) {
@@ -125,17 +128,22 @@ export class Button {
   }
 
   _assignCss(assignCssClass) {
-    let setElementClass = this.renderer.setElementClass;
-    let elementRef = this.elementRef;
     let role = this._role;
     if (role) {
-      setElementClass(elementRef, role, assignCssClass); // button
-      if (this._style) setElementClass(elementRef, role + '-' + this._style, assignCssClass); // button-clear
-      if (this._display) setElementClass(elementRef, role + '-' + this._display, assignCssClass); // button-full
-      if (this._size) setElementClass(elementRef, role + '-' + this._size, assignCssClass); // button-small
+      this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
+      this._setClass(this._style, assignCssClass); // button-clear
+      this._setClass(this._display, assignCssClass); // button-full
+      this._setClass(this._size, assignCssClass); // button-small
+      this._setClass(this._icon, assignCssClass); // button-icon-left
       this._colors.forEach(color => {
-        setElementClass(elementRef, role + '-' + color, assignCssClass); // button-secondary
-      });  
+        this._setClass(color, assignCssClass); // button-secondary
+      });
+    }
+  }
+
+  _setClass(type, assignCssClass) {
+    if (type) {
+      this.renderer.setElementClass(this.elementRef, this._role + '-' + type, assignCssClass);
     }
   }
 
@@ -149,7 +157,7 @@ export class Button {
 }
 
 const BUTTON_SIZE_ATTRS = ['large', 'small'];
-const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab'];
+const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab', 'solid'];
 const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
 const IGNORE_ATTRS = /_ng/;
 
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 22533cad4d..22af43e730 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -1,5 +1,6 @@
 @import "../../../globals.ios";
 @import "../toolbar";
+@import "../toolbar-button";
 
 // iOS Toolbar
 // --------------------------------------------------
@@ -17,72 +18,85 @@ $toolbar-ios-height:                        4.4rem !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 
+$navbar-ios-height:                         $toolbar-ios-height !default;
+
 
 .toolbar {
   padding: $toolbar-ios-padding;
   min-height: $toolbar-ios-height;
-
-  [menu-toggle] {
-    order: map-get($toolbar-order-ios, menu-toggle-primary);
-    cursor: pointer;
-  }
-
-  [menu-toggle][secondary] {
-    order: map-get($toolbar-order-ios, menu-toggle-secondary);
-  }
-
-  ion-segment-button[button] {
-    line-height: 2.4rem;
-    min-height: 2.4rem;
-    font-size: 1.2rem;
-  }
-
-  button,
-  [button] {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding: 0 5px;
-    min-height: 32px;
-    color: $toolbar-ios-active-color;
-  }
-
-  button.icon-only,
-  [button].icon-only {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  button icon,
-  [button] icon {
-    padding: 0;
-    min-width: 28px;
-  }
-
-  .back-button {
-    margin: 0;
-    min-height: 3.2rem;
-    line-height: 1;
-    order: map-get($toolbar-order-ios, 'back-button');
-    overflow: visible;
-  }
-
-  .back-button-icon {
-    display: inherit;
-    margin: 0;
-    min-width: 18px;
-    font-size: 3.2rem;
-  }
-
 }
 
-.toolbar button:hover:not(.disable-hover),
-.toolbar [button]:hover:not(.disable-hover),
-.toolbar button.activated,
-.toolbar [button].activated {
+ion-navbar-section {
+  min-height: $navbar-ios-height;
+}
+
+// iOS Toolbar Buttons
+// --------------------------------------------------
+
+.bar-button {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0 5px;
+  min-height: 32px;
+  border: 0;
+  font-size: $toolbar-ios-button-font-size;
   color: $toolbar-ios-active-color;
   background-color: transparent;
 }
 
+.bar-button.icon-only {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.bar-button icon {
+  padding: 0;
+  min-width: 28px;
+}
+
+
+// iOS Back Button
+// --------------------------------------------------
+
+.back-button {
+  margin: 0;
+  min-height: 3.2rem;
+  line-height: 1;
+  order: map-get($toolbar-order-ios, 'back-button');
+  overflow: visible;
+  transform: translateZ(0px);
+}
+
+.back-button-icon {
+  display: inherit;
+  margin: 0;
+  min-width: 18px;
+  font-size: 3.2rem;
+}
+
+
+// iOS Menu Toggle
+// --------------------------------------------------
+
+[menu-toggle] {
+  order: map-get($toolbar-order-ios, menu-toggle-primary);
+  cursor: pointer;
+}
+
+[menu-toggle][secondary] {
+  order: map-get($toolbar-order-ios, menu-toggle-secondary);
+}
+
+ion-segment-button[button] {
+  line-height: 2.4rem;
+  min-height: 2.4rem;
+  font-size: 1.2rem;
+}
+
+
+// iOS Toolbar Background
+// --------------------------------------------------
+
 .toolbar-background {
   border-bottom-width: 1px;
   border-bottom-style: solid;
@@ -90,6 +104,14 @@ $toolbar-ios-title-font-size:               1.7rem !default;
   background-color: $toolbar-ios-background-color;
 }
 
+&.hairlines .toolbar-background {
+  border-bottom-width: 0.55px;
+}
+
+
+// iOS Toolbar Content
+// --------------------------------------------------
+
 ion-title {
   position: absolute;
   top: 0;
@@ -120,21 +142,22 @@ ion-nav-items[secondary] {
   order: map-get($toolbar-order-ios, secondary);
 }
 
-&.hairlines .toolbar-background {
-  border-bottom-width: 0.55px;
-}
 
-
-// iOS Navbar
+// iOS Toolbar Color Generation
 // --------------------------------------------------
 
-$navbar-ios-height:                        4.4rem !default;
+@each $color-name, $color-value in $colors-ios {
 
+  .toolbar[#{$color-name}] {
+
+    .toolbar-background {
+      background-color: $color-value;
+      border-color: darken($color-value, 10%);
+    }
+
+    .toolbar-title {
+      color: inverse($color-value);
+    }
+  }
 
-ion-navbar-section {
-  min-height: $navbar-ios-height;
-}
-
-.back-button {
-  transform: translateZ(0px);
 }
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 9b3eab8250..7447936f8b 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -1,5 +1,6 @@
 @import "../../../globals.md";
 @import "../toolbar";
+@import "../toolbar-button";
 
 // Material Design Toolbar
 // --------------------------------------------------
@@ -107,3 +108,23 @@ ion-navbar-section {
   font-weight: normal;
   text-align: left;
 }
+
+
+
+// Material Design Toolbar Color Generation
+// --------------------------------------------------
+
+@each $color-name, $color-value in $colors-md {
+
+  .toolbar[#{$color-name}] {
+
+    .toolbar-background {
+      background-color: $color-value;
+    }
+
+    .toolbar-title {
+      color: inverse($color-value);
+    }
+  }
+
+}
diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss
new file mode 100644
index 0000000000..371efee10f
--- /dev/null
+++ b/ionic/components/toolbar/toolbar-button.scss
@@ -0,0 +1,68 @@
+@import "../../globals.core";
+
+// Toolbar Buttons
+// --------------------------------------------------
+
+.bar-button {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  text-align: center;
+  text-transform: none;
+
+  vertical-align: top; // the better option for most scenarios
+  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  cursor: pointer;
+  @include user-select-none();
+  @include appearance(none);
+}
+
+
+// Menu Toggle
+// --------------------------------------------------
+
+.toolbar [menu-toggle] {
+  display: flex;
+  align-items: center;
+  margin: 0 6px;
+  padding: 0;
+  min-width: 36px;
+  order: map-get($toolbar-order, menu-toggle-primary);
+  box-shadow: none;
+}
+
+.toolbar [menu-toggle][secondary] {
+  order: map-get($toolbar-order, menu-toggle-secondary);
+}
+
+.toolbar [menu-toggle] icon {
+  padding: 0 6px;
+  font-size: 2.8rem;
+}
+
+
+// Back Button
+// --------------------------------------------------
+
+.back-button {
+  order: map-get($toolbar-order, backButton);
+
+  display: none;
+  &.show-back-button {
+    display: flex;
+  }
+}
+
+.back-button-text {
+  display: flex;
+  align-items: center;
+}
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 76ff2e55b2..a504be4100 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -5,11 +5,11 @@
 
 $toolbar-order: (
   backButton: 10,
-  menu-toggle-primary: 20,
+  menu-toggle-left: 20,
   content: 30,
-  primary: 40,
-  secondary: 50,
-  menu-toggle-secondary: 60,
+  left: 40,
+  right: 50,
+  menu-toggle-right: 60,
 );
 
 
@@ -37,7 +37,6 @@ $toolbar-order: (
   z-index: $z-index-toolbar-background;
 
   border: 0;
-
   pointer-events: none;
 }
 
@@ -65,34 +64,15 @@ ion-title {
   overflow: hidden;
 }
 
-.toolbar [menu-toggle] {
-  display: flex;
-  align-items: center;
-  margin: 0 6px;
-  padding: 0;
-  min-width: 36px;
-  order: map-get($toolbar-order, menu-toggle-primary);
-  box-shadow: none;
-}
-
-.toolbar [menu-toggle][secondary] {
-  order: map-get($toolbar-order, menu-toggle-secondary);
-}
-
-.toolbar [menu-toggle] icon {
-  padding: 0 6px;
-  font-size: 2.8rem;
-}
-
 ion-nav-items {
   display: block;
   margin: 0 0.2rem;
   pointer-events: none;
-  order: map-get($toolbar-order, primary);
+  order: map-get($toolbar-order, left);
 }
 
 ion-nav-items[secondary] {
-  order: map-get($toolbar-order, secondary);
+  order: map-get($toolbar-order, right);
 }
 
 ion-nav-items button,
@@ -115,43 +95,3 @@ ion-nav-items,
 ion-navbar.toolbar {
   display: flex;
 }
-
-.back-button {
-  order: map-get($toolbar-order, backButton);
-
-  display: none;
-  &.show-back-button {
-    display: flex;
-  }
-}
-
-.back-button-text {
-  display: flex;
-  align-items: center;
-}
-
-
-
-// Toolbar Color Generation
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors {
-
-  .toolbar[#{$color-name}] {
-
-    .toolbar-background {
-      background-color: $color-value;
-      border-color: darken($color-value, 10%);
-    }
-
-    .toolbar-title,
-    button,
-    [button],
-    button:hover:not(.disable-hover),
-    [button]:hover:not(.disable-hover),
-    a {
-      color: inverse($color-value);
-    }
-  }
-
-}

From d3c5f251efd10aad07f00f5f507cc018f499ed2c Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 07:17:48 -0600
Subject: [PATCH 038/100] update item

---
 ionic/components/item/item.scss      |  64 ++------------
 ionic/components/item/modes/ios.scss | 123 ++++++++++++++++++---------
 ionic/components/item/modes/md.scss  |  56 ++++++------
 3 files changed, 120 insertions(+), 123 deletions(-)

diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index c7e4998fda..70d2ee88ab 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -18,14 +18,6 @@
   overflow: hidden;
 
   box-sizing: border-box;
-
-  &[no-lines] {
-    border: none;
-
-    .item-inner {
-      border: none;
-    }
-  }
 }
 
 .item-inner {
@@ -42,6 +34,14 @@
   align-self: stretch;
 }
 
+.item[no-lines] {
+  border: none;
+
+  .item-inner {
+    border: none;
+  }
+}
+
 ion-item-group {
   display: block;
 }
@@ -64,6 +64,7 @@ a.item,
 button.item {
   margin: 0;
   padding: 0;
+  border: 0;
   width: 100%;
   justify-content: inherit;
   min-height: 4.4rem;
@@ -74,7 +75,6 @@ button.item {
   color: inherit;
   border-radius: 0;
   box-shadow: none;
-  will-change: initial;
 }
 
 ion-item-content {
@@ -95,52 +95,6 @@ ion-item-content {
   white-space: normal;
 }
 
-.item {
-
-  h1 {
-    margin: 0 0 2px;
-    font-size: 2.4rem;
-    font-weight: normal;
-  }
-
-  h2 {
-    margin: 0 0 2px;
-    font-size: 1.6rem;
-    font-weight: normal;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: normal;
-    margin: 0 0 3px 0;
-    font-size: 1.4rem;
-    font-weight: normal;
-  }
-
-  p {
-    line-height: normal;
-    color: #666;
-    font-size: 1.2rem;
-    margin: 0 0 2px;
-  }
-
-  h2:last-child,
-  h3:last-child,
-  h4:last-child,
-  h5:last-child,
-  h6:last-child,
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-}
-
 .vertical-align-top,
 ion-input.item {
   align-items: flex-start;
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index fa5c82242a..04c6fa75de 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -18,54 +18,65 @@ $item-ios-sliding-content-bg:         $background-ios-color !default;
 $item-ios-sliding-transition:         transform 250ms ease-in-out !default;
 
 
-.item {
-  background-color: $list-ios-background-color;
-  color: $list-ios-text-color;
-}
-
-
-ion-item-group {
-  .item:first-child {
-    .item-inner {
-      border-top-width: 0;
-    }
-  }
-
-  .item:last-child .item-inner,
-  ion-item-sliding:last-child .item .item-inner {
-    border: none;
-  }
-}
-
-ion-item-divider {
-  padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
-  background-color: $item-ios-divider-bg;
-  color: $item-ios-divider-color;
-}
-
-ion-note {
-  color: $item-ios-note-color;
-}
+// iOS Item
+// --------------------------------------------------
 
 .item {
-  border-radius: 0;
   padding-left: $item-ios-padding-left;
   font-size: $item-ios-font-size;
+  border-radius: 0;
+  color: $list-ios-text-color;
+  background-color: $list-ios-background-color;
+  transition-duration: 200ms;
+
+  h1 {
+    margin: 0 0 2px;
+    font-size: 2.4rem;
+    font-weight: normal;
+  }
+
+  h2 {
+    margin: 0 0 2px;
+    font-size: 1.6rem;
+    font-weight: normal;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: normal;
+    margin: 0 0 3px 0;
+    font-size: 1.4rem;
+    font-weight: normal;
+  }
+
+  p {
+    line-height: normal;
+    color: #666;
+    font-size: 1.2rem;
+    margin: 0 0 2px;
+  }
+
+  h2:last-child,
+  h3:last-child,
+  h4:last-child,
+  h5:last-child,
+  h6:last-child,
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  a {
+    text-decoration: none;
+  }
 }
 
-.item.activated,
-a.item.activated,
-button.item.activated {
+.item.activated {
   background-color: $list-ios-activated-background-color;
   transition-duration: 0ms;
 }
 
-.item,
-a.item,
-button.item {
-  transition-duration: 200ms;
-}
-
 .item-inner {
   padding-right: ($item-ios-padding-right / 2);
   border-bottom: 1px solid $list-ios-border-color;
@@ -75,6 +86,10 @@ ion-item-content {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
 }
 
+
+// iOS Item Media
+// --------------------------------------------------
+
 [item-left] {
   margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0;
 }
@@ -152,6 +167,10 @@ ion-thumbnail {
   }
 }
 
+ion-note {
+  color: $item-ios-note-color;
+}
+
 button.item:not([detail-none]) .item-inner,
 a.item:not([detail-none]) .item-inner,
 .item[detail-push] .item-inner {
@@ -162,6 +181,34 @@ a.item:not([detail-none]) .item-inner,
   padding-right: 32px;
 }
 
+
+// iOS Item Group
+// --------------------------------------------------
+
+ion-item-group {
+  .item:first-child {
+    .item-inner {
+      border-top-width: 0;
+    }
+  }
+
+  .item:last-child .item-inner,
+  ion-item-sliding:last-child .item .item-inner {
+    border: none;
+  }
+}
+
+
+// iOS Item Divider
+// --------------------------------------------------
+
+ion-item-divider {
+  padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+  color: $item-ios-divider-color;
+  background-color: $item-ios-divider-bg;
+}
+
+
 &.hairlines {
   .item-inner {
     border-bottom-width: 0.55px;
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index a45526063d..a7bdc45beb 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -20,16 +20,6 @@ $item-md-sliding-content-bg:         $background-md-color !default;
 $item-md-sliding-transition:         transform 250ms ease-in-out !default;
 
 
-ion-item-divider {
-  padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
-  background-color: $item-md-divider-bg;
-  color: $item-md-divider-color;
-}
-
-ion-note {
-  color: $item-md-note-color;
-}
-
 .item {
   position: relative;
   padding-right: 0;
@@ -37,10 +27,11 @@ ion-note {
   font-size: $item-md-font-size;
   text-transform: none;
   font-weight: normal;
-  box-shadow: none;
 
-  background-color: $list-md-background-color;
   color: $list-md-text-color;
+  background-color: $list-md-background-color;
+  box-shadow: none;
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
 
   h1 {
     margin: 0 0 2px;
@@ -72,18 +63,26 @@ ion-note {
   }
 }
 
+.item.activated {
+  background-color: $list-md-activated-background-color;
+}
+
+.item[no-lines] {
+  border-width: 0;
+}
+
 .item-inner {
-  border-bottom: 1px solid $list-md-border-color;
   padding-right: ($item-md-padding-right / 2);
+  border-bottom: 1px solid $list-md-border-color;
 }
 
 ion-item-content {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
 }
 
-button.item.activated {
-  box-shadow: none;
-}
+
+// Material Design Item Media
+// --------------------------------------------------
 
 [item-left],
 [item-right] {
@@ -93,8 +92,8 @@ button.item.activated {
 icon[item-left],
 icon[item-right] {
   margin-top: $item-md-padding-icon-top;
-  margin-left: 0;
   margin-bottom: $item-md-padding-icon-bottom;
+  margin-left: 0;
 }
 
 button[item-left],
@@ -120,8 +119,8 @@ button[item-right],
 
 [item-left].icon-left icon,
 [item-right].icon-left icon {
-  margin-left: 0;
   margin-bottom: 1px;
+  margin-left: 0;
   padding-right: 0.3em;
 }
 
@@ -172,19 +171,16 @@ ion-thumbnail {
   }
 }
 
-.item,
-a.item,
-button.item {
-  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms;
+ion-note {
+  color: $item-md-note-color;
 }
 
-.item.activated,
-a.item.activated,
-button.item.activated {
-  background-color: $list-md-activated-background-color;
-  box-shadow: none;
-}
 
-.item[no-lines] {
-  border-width: 0;
+// Material Design Item Divider
+// --------------------------------------------------
+
+ion-item-divider {
+  padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
+  background-color: $item-md-divider-bg;
+  color: $item-md-divider-color;
 }

From 8a983371339be38b2e1f082831c98fd88f6beae2 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 07:36:08 -0600
Subject: [PATCH 039/100] update iOS toolbar buttons

---
 ionic/components/toolbar/modes/ios.scss      | 28 ++++++++++++++++----
 ionic/components/toolbar/toolbar-button.scss |  3 +++
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 22af43e730..1d3de7f228 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -44,14 +44,32 @@ ion-navbar-section {
   background-color: transparent;
 }
 
-.bar-button.icon-only {
-  padding-right: 0;
-  padding-left: 0;
+.bar-button-icon-left icon {
+  margin-left: -0.1em;
+  padding-right: 0.3em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
 }
 
-.bar-button icon {
+.bar-button-icon-right icon {
+  margin-right: -0.2em;
+  padding-left: 0.4em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+
+.bar-button-icon-only {
   padding: 0;
-  min-width: 28px;
+  min-width: 0.9em;
+
+  icon {
+    padding: 0 0.1em;
+    font-size: 1.8em;
+    line-height: 0.67;
+    pointer-events: none;
+  }
 }
 
 
diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss
index 371efee10f..133e55524a 100644
--- a/ionic/components/toolbar/toolbar-button.scss
+++ b/ionic/components/toolbar/toolbar-button.scss
@@ -11,6 +11,9 @@
   align-items: center;
   justify-content: center;
 
+  margin: 0;
+  padding: 0;
+
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

From 119cbcd87f448b64b2f865976f39d1f8e449526b Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 10:14:30 -0600
Subject: [PATCH 040/100] always add touch events

---
 ionic/components/tap-click/tap-click.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/ionic/components/tap-click/tap-click.ts b/ionic/components/tap-click/tap-click.ts
index 334a4591ec..6b85bc268e 100644
--- a/ionic/components/tap-click/tap-click.ts
+++ b/ionic/components/tap-click/tap-click.ts
@@ -33,11 +33,9 @@ export class TapClick {
     zone.runOutsideAngular(() => {
       addListener('click', self.click.bind(self), true);
 
-      if (self.usePolyfill) {
-        addListener('touchstart', self.touchStart.bind(self));
-        addListener('touchend', self.touchEnd.bind(self));
-        addListener('touchcancel', self.pointerCancel.bind(self));
-      }
+      addListener('touchstart', self.touchStart.bind(self));
+      addListener('touchend', self.touchEnd.bind(self));
+      addListener('touchcancel', self.pointerCancel.bind(self));
 
       addListener('mousedown', self.mouseDown.bind(self), true);
       addListener('mouseup', self.mouseUp.bind(self), true);

From d6a23e3c2a06819508bbf300bf776c22f0b0b95c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 7 Dec 2015 12:00:58 -0500
Subject: [PATCH 041/100] fix(button): added color to clear buttons MD and
 removed unused mixing

references #689
---
 ionic/components/button/modes/md.scss | 27 +--------------------------
 1 file changed, 1 insertion(+), 26 deletions(-)

diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 154e960525..5c3e9c5839 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -163,6 +163,7 @@ $button-md-small-padding:                  0.9em !default;
   opacity: 1;
   box-shadow: none;
   background-color: transparent;
+  color: color-shade($button-md-color);
 
   &.activated {
     opacity: 0.4;
@@ -219,32 +220,6 @@ $button-md-small-padding:                  0.9em !default;
   padding: 0;
 }
 
-// Material Design Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-theme-md($color-name, $color-value) {
-
-  .button-#{$color-name}.activated {
-    opacity: 1;
-  }
-
-  .button-outline {
-
-    md-ripple {
-      background-color: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
-    }
-
-    &.activated {
-      opacity: 1;
-
-      md-ripple {
-        background: rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-
-}
-
 
 // Generate Material Design Button Colors
 // --------------------------------------------------

From 3f79316d81a6783b776fe16c52a38f9b7b92306a Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 7 Dec 2015 12:04:26 -0500
Subject: [PATCH 042/100] refactor(popup): changed elements to classes, fixed
 styling, removed unused css, added more sass variables

references #689
---
 ionic/components/popup/modes/ios.scss | 98 ++++++++++++++-------------
 ionic/components/popup/modes/md.scss  | 44 ++++++------
 ionic/components/popup/popup.scss     | 41 ++++++-----
 ionic/components/popup/popup.ts       | 24 +++----
 4 files changed, 102 insertions(+), 105 deletions(-)

diff --git a/ionic/components/popup/modes/ios.scss b/ionic/components/popup/modes/ios.scss
index a1f7c298f0..f3cad9cbb5 100644
--- a/ionic/components/popup/modes/ios.scss
+++ b/ionic/components/popup/modes/ios.scss
@@ -9,14 +9,22 @@ $popup-ios-background:                          rgba(0,0,0,0) !default;
 $popup-ios-border-radius:                       13px !default;
 $popup-ios-background-color:                    #f8f8f8 !default;
 
+$popup-ios-head-padding:                        12px 16px 20px !default;
 $popup-ios-head-text-align:                     center !default;
+
+$popup-ios-title-margin-top:                    12px !default;
+$popup-ios-title-font-weight:                   bold !default;
 $popup-ios-title-font-size:                     17px !default;
 $popup-ios-sub-title-font-size:                 14px !default;
 $popup-ios-sub-title-text-color:                #666 !default;
+
+$popup-ios-body-padding:                        0px 16px 24px !default;
 $popup-ios-body-text-color:                     inherit !default;
 $popup-ios-body-text-align:                     center !default;
 $popup-ios-body-font-size:                      13px !default;
 
+$popup-ios-prompt-input-padding:                6px !default;
+$popup-ios-prompt-input-margin-top:             24px !default;
 $popup-ios-prompt-input-background-color:       #fff !default;
 $popup-ios-prompt-input-border:                 1px solid #ccc !default;
 $popup-ios-prompt-input-border-radius:          4px !default;
@@ -29,23 +37,23 @@ $popup-ios-button-activated-background-color:   #e9e9e9 !default;
 
 ion-popup {
   background: $popup-ios-background;
+}
 
-  popup-wrapper {
-    border-radius: $popup-ios-border-radius;
-    background-color: $popup-ios-background-color;
-    max-width: $popup-ios-max-width;
-    overflow: hidden;
-  }
+.popup-wrapper {
+  border-radius: $popup-ios-border-radius;
+  background-color: $popup-ios-background-color;
+  max-width: $popup-ios-max-width;
+  overflow: hidden;
 }
 
 .popup-head {
-  padding: 12px 16px 20px;
+  padding: $popup-ios-head-padding;
   text-align: $popup-ios-head-text-align;
 }
 
 .popup-title {
-  margin-top: 12px;
-  font-weight: bold;
+  margin-top: $popup-ios-title-margin-top;
+  font-weight: $popup-ios-title-font-weight;
   font-size: $popup-ios-title-font-size;
 }
 
@@ -55,15 +63,15 @@ ion-popup {
 }
 
 .popup-body {
-  padding: 0px 16px 24px;
+  padding: $popup-ios-body-padding;
   color: $popup-ios-body-text-color;
   text-align: $popup-ios-body-text-align;
   font-size: $popup-ios-body-font-size;
 }
 
 .prompt-input {
-  padding: 6px;
-  margin-top: 24px;
+  padding: $popup-ios-prompt-input-padding;
+  margin-top: $popup-ios-prompt-input-margin-top;
 
   background-color: $popup-ios-prompt-input-background-color;
   border: $popup-ios-prompt-input-border;
@@ -72,39 +80,37 @@ ion-popup {
 }
 
 .popup-buttons {
-  button {
-    @extend button[clear];
+  :last-child {
+    font-weight: bold;
+    border-right: 0;
+  }
+}
 
-    margin: 0;
-    flex: 1;
-    border-radius: 0;
-    font-size: $popup-ios-button-font-size;
-    min-height: $popup-ios-button-min-height;
-    border-right: 1px solid $popup-ios-button-border-color;
+.popup-button {
+  margin: 0;
+  flex: 1;
+  border-radius: 0;
+  font-size: $popup-ios-button-font-size;
+  min-height: $popup-ios-button-min-height;
+  border-right: 1px solid $popup-ios-button-border-color;
 
-    &.activated {
-      opacity: 1;
-      background-color: $popup-ios-button-activated-background-color;
-    }
+  &.activated {
+    opacity: 1;
+    background-color: $popup-ios-button-activated-background-color;
+  }
 
-    &:hover:not(.disable-hover) {
-      opacity: 1;
-    }
+  &:hover:not(.disable-hover) {
+    opacity: 1;
+  }
 
-    &:before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: 0;
-      border-top: 1px solid $popup-ios-button-border-color;
-      content: '';
-      pointer-events: none;
-    }
-
-    &:last-child {
-      font-weight: bold;
-      border-right: 0;
-    }
+  &:before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    border-top: 1px solid $popup-ios-button-border-color;
+    content: '';
+    pointer-events: none;
   }
 }
 
@@ -113,13 +119,11 @@ ion-popup {
     border-width: 0.55px;
   }
 
-  .popup-buttons {
-    button {
-      border-right-width: 0.55px;
+  .popup-button {
+    border-right-width: 0.55px;
 
-      &:before {
-        border-top-width: 0.55px;
-      }
+    &:before {
+      border-top-width: 0.55px;
     }
   }
 }
diff --git a/ionic/components/popup/modes/md.scss b/ionic/components/popup/modes/md.scss
index 5e57c9f567..901287bb23 100644
--- a/ionic/components/popup/modes/md.scss
+++ b/ionic/components/popup/modes/md.scss
@@ -10,33 +10,35 @@ $popup-md-background-color:               #fafafa !default;
 $popup-md-box-shadow:                     0px 16px 20px rgba(0, 0, 0, 0.4) !default;
 
 $popup-md-head-text-align:                left !default;
+$popup-md-head-padding:                   24px 24px 10px 24px !default;
+
 $popup-md-title-font-size:                20px !default;
 $popup-md-sub-title-font-size:            15px !default;
-$popup-md-body-text-color:                rgba(0,0,0,.5) !default;
 
-$popup-md-button-min-height:              36px !default;
+$popup-md-body-padding:                   10px 24px 24px 24px !default;
+$popup-md-body-text-color:                rgba(0,0,0,.5) !default;
 
 $popup-md-prompt-input-border-color:      #dedede !default;
 $popup-md-prompt-input-text-color:        #000000 !default;
 $popup-md-prompt-input-highlight-color:   map-get($colors-md, primary) !default;
-$popup-md-prompt-input-placeholder-color: #b9b9b9 !default;
 $popup-md-prompt-input-margin-top:        5px !default;
 $popup-md-prompt-input-margin-bottom:     5px !default;
 
+$popup-md-buttons-padding:                8px 8px 8px 24px !default;
+$popup-md-buttons-justify-content:        flex-end !default;
 
-ion-popup {
-  popup-wrapper {
-    max-width: $popup-md-max-width;
-    border-radius: $popup-md-border-radius;
-    background-color: $popup-md-background-color;
 
-    box-shadow: $popup-md-box-shadow;
-  }
+.popup-wrapper {
+  max-width: $popup-md-max-width;
+  border-radius: $popup-md-border-radius;
+  background-color: $popup-md-background-color;
+
+  box-shadow: $popup-md-box-shadow;
 }
 
 .popup-head {
   text-align: $popup-md-head-text-align;
-  padding: 24px 24px 10px 24px;
+  padding: $popup-md-head-padding;
 }
 
 .popup-title {
@@ -48,7 +50,7 @@ ion-popup {
 }
 
 .popup-body {
-  padding: 10px 24px 24px 24px;
+  padding: $popup-md-body-padding;
   color: $popup-md-body-text-color;
 }
 
@@ -64,16 +66,10 @@ ion-popup {
 }
 
 .popup-buttons {
-  padding: 8px 8px 8px 24px;
-  justify-content: flex-end;
-
-  button {
-    @extend button[clear];
-
-    min-height: $popup-md-button-min-height;
-
-    &.activated {
-      opacity: 1;
-    }
-  }
+  padding: $popup-md-buttons-padding;
+  justify-content: $popup-md-buttons-justify-content;
+}
+
+.popup-button.activated {
+  opacity: 1;
 }
diff --git a/ionic/components/popup/popup.scss b/ionic/components/popup/popup.scss
index 4429b65223..2ea36cfbbf 100644
--- a/ionic/components/popup/popup.scss
+++ b/ionic/components/popup/popup.scss
@@ -4,7 +4,6 @@
 // --------------------------------------------------
 
 $popup-min-width:                 250px !default;
-$popup-max-width:                 100% !default;
 $popup-max-height:                90% !default;
 
 $popup-button-line-height:        20px !default;
@@ -24,24 +23,23 @@ ion-popup {
   justify-content: center;
   align-items: center;
 
-  popup-wrapper {
-    z-index: $z-index-overlay-wrapper;
-    min-width: $popup-min-width;
-    max-width: $popup-max-width;
-    max-height: $popup-max-height;
-
-    display: flex;
-    flex-direction: column;
-
-    opacity: 0;
-  }
-
   input,
   textarea {
     width: 100%;
   }
 }
 
+.popup-wrapper {
+  z-index: $z-index-overlay-wrapper;
+  min-width: $popup-min-width;
+  max-height: $popup-max-height;
+
+  display: flex;
+  flex-direction: column;
+
+  opacity: 0;
+}
+
 .popup-title {
   margin: 0;
   padding: 0;
@@ -56,7 +54,6 @@ ion-popup {
 .popup-body {
   overflow: auto;
 
-  // TODO is this needed, it is never empty
   &:empty {
     padding: 0;
   }
@@ -73,12 +70,12 @@ ion-popup {
 .popup-buttons {
   display: flex;
   flex-direction: row;
-
-  button {
-    display: block;
-    margin: 0;
-    line-height: $popup-button-line-height;
-    font-size: $popup-button-font-size;
-    margin-right: $popup-button-margin-right;
-  }
+}
+
+.popup-button {
+  display: block;
+  margin: 0;
+  line-height: $popup-button-line-height;
+  font-size: $popup-button-font-size;
+  margin-right: $popup-button-margin-right;
 }
diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts
index 125197776e..a08f0bffb0 100644
--- a/ionic/components/popup/popup.ts
+++ b/ionic/components/popup/popup.ts
@@ -270,8 +270,8 @@ const OVERLAY_TYPE = 'popup';
 @Component({
   selector: 'ion-popup',
   template:
-    '<backdrop (click)="cancel($event)" tappable disable-activated></backdrop>' +
-    '<popup-wrapper>' +
+    '<div (click)="cancel($event)" tappable disable-activated class="backdrop"></div>' +
+    '<div class="popup-wrapper">' +
       '<div class="popup-head">' +
         '<h2 class="popup-title" [inner-html]="d.title" *ng-if="d.title"></h2>' +
         '<h3 class="popup-sub-title" [inner-html]="d.subTitle" *ng-if="d.subTitle"></h3>' +
@@ -281,9 +281,9 @@ const OVERLAY_TYPE = 'popup';
         '<input type="{{d.inputType || \'text\'}}" placeholder="{{d.inputPlaceholder}}" *ng-if="d.showPrompt" class="prompt-input">' +
       '</div>' +
       '<div class="popup-buttons" *ng-if="d.buttons.length">' +
-        '<button *ng-for="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [inner-html]="btn.text"></button>' +
+        '<button clear *ng-for="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [inner-html]="btn.text" class="popup-button"></button>' +
       '</div>' +
-    '</popup-wrapper>',
+    '</div>',
   host: {
     'role': 'dialog'
   },
@@ -352,8 +352,8 @@ class PopupPopIn extends Animation {
     super(null, opts);
 
     let ele = enteringView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
 
     wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
     backdrop.fromTo('opacity', '0.01', '0.3');
@@ -372,8 +372,8 @@ class PopupPopOut extends Animation {
     super(null, opts);
 
     let ele = leavingView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
 
     wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
     backdrop.fromTo('opacity', '0.3', '0');
@@ -392,8 +392,8 @@ class PopupMdPopIn extends Animation {
     super(null, opts);
 
     let ele = enteringView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
 
     wrapper.fromTo('opacity', '0.01', '1').fromTo('scale', '1.1', '1');
     backdrop.fromTo('opacity', '0.01', '0.5');
@@ -412,8 +412,8 @@ class PopupMdPopOut extends Animation {
     super(null, opts);
 
     let ele = leavingView.pageRef().nativeElement;
-    let backdrop = new Animation(ele.querySelector('backdrop'));
-    let wrapper = new Animation(ele.querySelector('popup-wrapper'));
+    let backdrop = new Animation(ele.querySelector('.backdrop'));
+    let wrapper = new Animation(ele.querySelector('.popup-wrapper'));
 
     wrapper.fromTo('opacity', '1', '0').fromTo('scale', '1', '0.9');
     backdrop.fromTo('opacity', '0.5', '0');

From 8b693ce836df6ce6c249a07013afaadca219dedd Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 11:18:00 -0600
Subject: [PATCH 043/100] toolbar button updates

---
 .../buttons/components/components.html        |   8 +-
 .../menus/basic/menu-events.html              |   4 +-
 .../menus/basic/menu-friends.html             |   4 +-
 .../component-docs/menus/basic/menu-home.html |   6 +-
 .../menus/basic/menu-places.html              |   4 +-
 .../modals/basic/modal-content.html           |   4 +-
 demos/material/index.ts                       |   8 +-
 demos/menu/page1.html                         |   4 +-
 demos/menu/page2.html                         |   4 +-
 demos/modal/index.ts                          |   2 +-
 demos/native/pages/battery.ts                 |   4 +-
 demos/native/pages/camera.ts                  |   4 +-
 demos/native/pages/contacts.ts                |   4 +-
 demos/native/pages/device-motion.ts           |   4 +-
 demos/native/pages/device-orientation.ts      |   4 +-
 demos/native/pages/device.ts                  |   4 +-
 demos/native/pages/dialogs.ts                 |   4 +-
 demos/native/pages/geolocation.ts             |   4 +-
 demos/native/pages/statusbar.ts               |   4 +-
 demos/native/pages/vibration.ts               |   4 +-
 .../item/test/groups/session-list.html        |   4 +-
 ionic/components/item/test/sliding/main.html  |   4 +-
 ionic/components/menu/test/basic/page1.html   |  16 +-
 ionic/components/menu/test/basic/page2.html   |   4 +-
 ionic/components/menu/test/basic/page3.html   |   4 +-
 ionic/components/menu/test/overlay/page1.html |   4 +-
 ionic/components/menu/test/push/page1.html    |   4 +-
 ionic/components/menu/test/reveal/page1.html  |   4 +-
 ionic/components/modal/test/basic/index.ts    |   4 +-
 ionic/components/nav/test/basic/index.ts      |   8 +-
 ionic/components/nav/test/nested/index.ts     |   8 +-
 ionic/components/nav/test/routing/view1.html  |   4 +-
 ionic/components/nav/test/routing/view2.html  |   2 +-
 ionic/components/navbar/navbar.ts             |   6 +-
 ionic/components/segment/test/basic/main.html |   4 +-
 ionic/components/slides/test/intro/main.html  |   8 +-
 ionic/components/tabs/test/basic/index.ts     |   4 +-
 ionic/components/tabs/test/ghost/index.ts     |   8 +-
 .../text-input/test/input-focus/main.html     |   4 +-
 ionic/components/toolbar/modes/ios.scss       | 140 ++++++++-------
 ionic/components/toolbar/modes/md.scss        | 164 ++++++++++--------
 .../toolbar/test/scenarios/main.html          |  92 +++++-----
 ionic/components/toolbar/toolbar-button.scss  |   7 -
 ionic/components/toolbar/toolbar.scss         |  34 +---
 ionic/components/toolbar/toolbar.ts           |  10 +-
 45 files changed, 329 insertions(+), 310 deletions(-)

diff --git a/demos/component-docs/buttons/components/components.html b/demos/component-docs/buttons/components/components.html
index a3b18c2d40..bfd9d6ad00 100644
--- a/demos/component-docs/buttons/components/components.html
+++ b/demos/component-docs/buttons/components/components.html
@@ -2,16 +2,16 @@
 
   <ion-title>Buttons</ion-title>
 
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon contact></icon>
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
   <button>
     <icon search></icon>
   </button>
-  </ion-nav-items>
+  </ion-buttons>
 
 </ion-navbar>
 
diff --git a/demos/component-docs/menus/basic/menu-events.html b/demos/component-docs/menus/basic/menu-events.html
index 3d34a652fb..bbd9b72848 100644
--- a/demos/component-docs/menus/basic/menu-events.html
+++ b/demos/component-docs/menus/basic/menu-events.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Events
diff --git a/demos/component-docs/menus/basic/menu-friends.html b/demos/component-docs/menus/basic/menu-friends.html
index 44857cbb9f..a307b06157 100644
--- a/demos/component-docs/menus/basic/menu-friends.html
+++ b/demos/component-docs/menus/basic/menu-friends.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Friends
diff --git a/demos/component-docs/menus/basic/menu-home.html b/demos/component-docs/menus/basic/menu-home.html
index bd7028ff64..411e497cce 100644
--- a/demos/component-docs/menus/basic/menu-home.html
+++ b/demos/component-docs/menus/basic/menu-home.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menus
@@ -13,4 +13,4 @@
 
 <ion-content padding>
   <button block menu-toggle="leftMenu">Toggle Menu</button>
-</ion-content> 
+</ion-content>
diff --git a/demos/component-docs/menus/basic/menu-places.html b/demos/component-docs/menus/basic/menu-places.html
index 3b8609770b..bbff9b536a 100644
--- a/demos/component-docs/menus/basic/menu-places.html
+++ b/demos/component-docs/menus/basic/menu-places.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Places
diff --git a/demos/component-docs/modals/basic/modal-content.html b/demos/component-docs/modals/basic/modal-content.html
index d6e7fba833..18042836af 100644
--- a/demos/component-docs/modals/basic/modal-content.html
+++ b/demos/component-docs/modals/basic/modal-content.html
@@ -2,14 +2,14 @@
   <ion-title>
     Description
   </ion-title>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button (click)="close()" *ng-if=" currentPlatform === 'ios' ">
       Cancel
     </button>
     <button (click)="close()" *ng-if=" currentPlatform === 'android' ">
       <icon close></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
diff --git a/demos/material/index.ts b/demos/material/index.ts
index c52e290243..4d5bd6dcf1 100644
--- a/demos/material/index.ts
+++ b/demos/material/index.ts
@@ -5,13 +5,13 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
 @IonicView({
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
-    '<a menu-toggle="menu">' +
+    '<button menu-toggle="menu">' +
       '<icon menu></icon>' +
-    '</a>' +
-    '<ion-nav-items secondary>' +
+    '</button>' +
+    '<ion-buttons end>' +
       '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
       '<button (click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
-    '</ion-nav-items>' +
+    '</ion-buttons>' +
   '</ion-navbar>' +
   '<ion-content>' +
     `
diff --git a/demos/menu/page1.html b/demos/menu/page1.html
index 8ce7edcdb7..87745111f9 100644
--- a/demos/menu/page1.html
+++ b/demos/menu/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu
diff --git a/demos/menu/page2.html b/demos/menu/page2.html
index af718dbb18..7bdf1645ee 100644
--- a/demos/menu/page2.html
+++ b/demos/menu/page2.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu
diff --git a/demos/modal/index.ts b/demos/modal/index.ts
index 9603703f0e..cf5ab019b2 100644
--- a/demos/modal/index.ts
+++ b/demos/modal/index.ts
@@ -73,7 +73,7 @@ export class ContactModal {
 
 @Page({
   template: `
-    <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
+    <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-buttons start><button (click)="closeModal()">Close</button></ion-buttons></ion-navbar>
     <ion-content padding>
       <p>
         <button (click)="push()">Push (Go to 2nd)</button>
diff --git a/demos/native/pages/battery.ts b/demos/native/pages/battery.ts
index d11047e576..661d946545 100644
--- a/demos/native/pages/battery.ts
+++ b/demos/native/pages/battery.ts
@@ -4,9 +4,9 @@ import {IonicView, Battery} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Battery</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/camera.ts b/demos/native/pages/camera.ts
index 1365125cff..63069de8c9 100644
--- a/demos/native/pages/camera.ts
+++ b/demos/native/pages/camera.ts
@@ -5,9 +5,9 @@ import {Camera} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Camera</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/contacts.ts b/demos/native/pages/contacts.ts
index aac736de0a..0b95be91ca 100644
--- a/demos/native/pages/contacts.ts
+++ b/demos/native/pages/contacts.ts
@@ -5,9 +5,9 @@ import {Contacts} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Contacts</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/device-motion.ts b/demos/native/pages/device-motion.ts
index 92e2824f33..f55052e0fa 100644
--- a/demos/native/pages/device-motion.ts
+++ b/demos/native/pages/device-motion.ts
@@ -4,9 +4,9 @@ import {IonicView, DeviceMotion} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Device Motion</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/device-orientation.ts b/demos/native/pages/device-orientation.ts
index 95a4e8a2d4..eec2c3f293 100644
--- a/demos/native/pages/device-orientation.ts
+++ b/demos/native/pages/device-orientation.ts
@@ -4,9 +4,9 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Device Orientation</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/device.ts b/demos/native/pages/device.ts
index fd37281996..f4976ef4c9 100644
--- a/demos/native/pages/device.ts
+++ b/demos/native/pages/device.ts
@@ -4,9 +4,9 @@ import {IonicView, Device} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Device</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/dialogs.ts b/demos/native/pages/dialogs.ts
index 12fd20d141..f5c0abb675 100644
--- a/demos/native/pages/dialogs.ts
+++ b/demos/native/pages/dialogs.ts
@@ -4,9 +4,9 @@ import {IonicView, Dialogs} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Dialogs</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/geolocation.ts b/demos/native/pages/geolocation.ts
index b4e6af7052..2325076b6e 100644
--- a/demos/native/pages/geolocation.ts
+++ b/demos/native/pages/geolocation.ts
@@ -5,9 +5,9 @@ import {Geolocation} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Geolocation</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/statusbar.ts b/demos/native/pages/statusbar.ts
index 50dc6d6864..7595575687 100644
--- a/demos/native/pages/statusbar.ts
+++ b/demos/native/pages/statusbar.ts
@@ -5,9 +5,9 @@ import {StatusBar} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>StatusBar</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/vibration.ts b/demos/native/pages/vibration.ts
index 92d72d3c6c..f443b917d9 100644
--- a/demos/native/pages/vibration.ts
+++ b/demos/native/pages/vibration.ts
@@ -5,9 +5,9 @@ import {Vibration} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/ionic/components/item/test/groups/session-list.html b/ionic/components/item/test/groups/session-list.html
index 90113a9cbe..f32ba3a922 100644
--- a/ionic/components/item/test/groups/session-list.html
+++ b/ionic/components/item/test/groups/session-list.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar>
   <ion-title>Item Groups</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="reload()">Reload</button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-navbar>
 
 <ion-content class="outer-content">
diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html
index f054413350..481cfd48e6 100644
--- a/ionic/components/item/test/sliding/main.html
+++ b/ionic/components/item/test/sliding/main.html
@@ -1,8 +1,8 @@
 <ion-toolbar>
   <ion-title>Sliding Items</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="reload()">Reload</button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 <ion-content>
diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html
index c00cafabf4..ed3744ca64 100644
--- a/ionic/components/menu/test/basic/page1.html
+++ b/ionic/components/menu/test/basic/page1.html
@@ -1,29 +1,29 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu
   </ion-title>
 
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon football></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon baseball></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 
-  <a menu-toggle="rightMenu" secondary>
+  <button menu-toggle="rightMenu" right>
     <icon menu></icon>
-  </a>
+  </button>
 
 </ion-navbar>
 
diff --git a/ionic/components/menu/test/basic/page2.html b/ionic/components/menu/test/basic/page2.html
index 098f3e147b..66415e066b 100644
--- a/ionic/components/menu/test/basic/page2.html
+++ b/ionic/components/menu/test/basic/page2.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu
diff --git a/ionic/components/menu/test/basic/page3.html b/ionic/components/menu/test/basic/page3.html
index 4b67473c14..cfcda473c2 100644
--- a/ionic/components/menu/test/basic/page3.html
+++ b/ionic/components/menu/test/basic/page3.html
@@ -5,9 +5,9 @@
     Menu
   </ion-title>
 
-  <a menu-toggle="rightMenu" secondary>
+  <button menu-toggle="rightMenu" right>
     <icon menu></icon>
-  </a>
+  </button>
 
 </ion-navbar>
 
diff --git a/ionic/components/menu/test/overlay/page1.html b/ionic/components/menu/test/overlay/page1.html
index 19b06004ae..99eb7dacf7 100644
--- a/ionic/components/menu/test/overlay/page1.html
+++ b/ionic/components/menu/test/overlay/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Overlay Menu
diff --git a/ionic/components/menu/test/push/page1.html b/ionic/components/menu/test/push/page1.html
index fb8ffbadd8..cbac02c561 100644
--- a/ionic/components/menu/test/push/page1.html
+++ b/ionic/components/menu/test/push/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Push Menu
diff --git a/ionic/components/menu/test/reveal/page1.html b/ionic/components/menu/test/reveal/page1.html
index 6e4f46b80a..fb6bab465a 100644
--- a/ionic/components/menu/test/reveal/page1.html
+++ b/ionic/components/menu/test/reveal/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Reveal Menu
diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts
index f5efcbf1f5..820832e1eb 100644
--- a/ionic/components/modal/test/basic/index.ts
+++ b/ionic/components/modal/test/basic/index.ts
@@ -141,9 +141,9 @@ class ContactUs {
   template: `
     <ion-navbar *navbar>
       <ion-title>First Page Header</ion-title>
-      <ion-nav-items primary>
+      <ion-buttons start>
         <button class="e2eCloseMenu" (click)="closeModal()">Close</button>
-      </ion-nav-items>
+      </ion-buttons>
     </ion-navbar>
     <ion-content padding>
       <p>
diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts
index de9ed10bc1..4352bc6bc0 100644
--- a/ionic/components/nav/test/basic/index.ts
+++ b/ionic/components/nav/test/basic/index.ts
@@ -16,12 +16,12 @@ class MyCmpTest{}
   template: `
     <ion-navbar *navbar>
       <ion-title>{{title}}</ion-title>
-      <ion-nav-items primary>
+      <ion-buttons start>
         <button><icon star></icon></button>
-      </ion-nav-items>
-      <ion-nav-items secondary>
+      </ion-buttons>
+      <ion-buttons end>
         <button>S1</button>
-      </ion-nav-items>
+      </ion-buttons>
     </ion-navbar>
     <ion-content>
       <ion-list>
diff --git a/ionic/components/nav/test/nested/index.ts b/ionic/components/nav/test/nested/index.ts
index 59de5949d7..935897f4b2 100644
--- a/ionic/components/nav/test/nested/index.ts
+++ b/ionic/components/nav/test/nested/index.ts
@@ -75,9 +75,9 @@ export class Account {
 @Page({
   template: `
     <ion-navbar *navbar primary>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Account Dashboard</ion-title>
     </ion-navbar>
     <ion-content padding>
@@ -106,9 +106,9 @@ export class Dashboard {
 @Page({
   template: `
     <ion-navbar *navbar danger>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Account Profile</ion-title>
     </ion-navbar>
     <ion-content padding>
diff --git a/ionic/components/nav/test/routing/view1.html b/ionic/components/nav/test/routing/view1.html
index b48af356a4..39789c8de6 100644
--- a/ionic/components/nav/test/routing/view1.html
+++ b/ionic/components/nav/test/routing/view1.html
@@ -1,8 +1,8 @@
 
 <ion-navbar *navbar>
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
   <ion-title>First View</ion-title>
 </ion-navbar>
 
diff --git a/ionic/components/nav/test/routing/view2.html b/ionic/components/nav/test/routing/view2.html
index 3cd2b1d7e5..98ae4bf8f5 100644
--- a/ionic/components/nav/test/routing/view2.html
+++ b/ionic/components/nav/test/routing/view2.html
@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar primary>
   <ion-title>Second View</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon help></icon>
     </button>
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index 9cabaaee46..7145a01aa0 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -71,9 +71,9 @@ class ToolbarBackground {
         '<span class="back-default">{{bbText}}</span>' +
       '</span>' +
     '</button>' +
-    '<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>' +
+    '<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
+    '<ng-content select="ion-buttons[start]"></ng-content>' +
+    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
     '<div class="toolbar-content">' +
       '<ng-content></ng-content>' +
     '</div>',
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index aba6b1d080..f923dfeaab 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -10,11 +10,11 @@
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon search></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-segment secondary>
     <ion-segment-button>
       Something
diff --git a/ionic/components/slides/test/intro/main.html b/ionic/components/slides/test/intro/main.html
index 15b0f2b262..00caad1bb2 100644
--- a/ionic/components/slides/test/intro/main.html
+++ b/ionic/components/slides/test/intro/main.html
@@ -30,16 +30,16 @@
 }
 </style>
 <ion-navbar *navbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       Skip
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button (click)="next()">
       Next
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Grid Icons</ion-title>
 </ion-navbar>
 <ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">
diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts
index c8f261c2d7..5a1209855c 100644
--- a/ionic/components/tabs/test/basic/index.ts
+++ b/ionic/components/tabs/test/basic/index.ts
@@ -71,9 +71,9 @@ class Tab2 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Stopwatch</ion-title>
     </ion-navbar>
     <ion-content padding>
diff --git a/ionic/components/tabs/test/ghost/index.ts b/ionic/components/tabs/test/ghost/index.ts
index 86588d5051..23f2882b63 100644
--- a/ionic/components/tabs/test/ghost/index.ts
+++ b/ionic/components/tabs/test/ghost/index.ts
@@ -46,9 +46,9 @@ class Tab2 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Stopwatch</ion-title>
     </ion-navbar>
     <ion-content padding>
@@ -68,9 +68,9 @@ class Tab3 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Quesarito</ion-title>
     </ion-navbar>
     <ion-content padding>
diff --git a/ionic/components/text-input/test/input-focus/main.html b/ionic/components/text-input/test/input-focus/main.html
index 1c82634a14..6098a24aee 100644
--- a/ionic/components/text-input/test/input-focus/main.html
+++ b/ionic/components/text-input/test/input-focus/main.html
@@ -1,11 +1,11 @@
 
 <ion-toolbar>
   <ion-title>Inset Focus</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="reload()">
       Reload
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 1d3de7f228..a029076d5d 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -6,18 +6,20 @@
 // --------------------------------------------------
 
 $toolbar-order-ios: (
-  back-button: 10,
-  menu-toggle-primary: 20,
-  primary: 30,
-  secondary: 50,
-  menu-toggle-secondary: 60,
+  back-button: 0,
+  menu-toggle-start: 1,
+  buttons-left: 2,
+  buttons-start: 3,
+  content: 4,
+  buttons-end: 5,
+  buttons-right: 6,
+  menu-toggle-end: 7,
 );
 
 $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;
-
 $navbar-ios-height:                         $toolbar-ios-height !default;
 
 
@@ -30,9 +32,73 @@ ion-navbar-section {
   min-height: $navbar-ios-height;
 }
 
+
+// iOS Toolbar Background
+// --------------------------------------------------
+
+.toolbar-background {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: $toolbar-ios-border-color;
+  background-color: $toolbar-ios-background-color;
+}
+
+&.hairlines .toolbar-background {
+  border-bottom-width: 0.55px;
+}
+
+
+// iOS Toolbar Content
+// --------------------------------------------------
+
+.toolbar-content {
+  flex: 1;
+  order: map-get($toolbar-order-ios, content);
+}
+
+.toolbar-title {
+  font-size: $toolbar-ios-title-font-size;
+  font-weight: 500;
+  text-align: center;
+  pointer-events: auto;
+  color: $toolbar-ios-text-color;
+}
+
+ion-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0px 90px 1px 90px;
+  pointer-events: none;
+  transform: translateZ(0px);
+}
+
+
 // iOS Toolbar Buttons
 // --------------------------------------------------
 
+ion-buttons {
+  flex: 1;
+  order: map-get($toolbar-order-ios, buttons-start);
+  transform: translateZ(0px);
+}
+
+ion-buttons[left] {
+  order: map-get($toolbar-order-ios, buttons-left);
+}
+
+ion-buttons[end] {
+  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-end);
+}
+
+ion-buttons[right] {
+  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-right);
+}
+
 .bar-button {
   margin-top: 0;
   margin-bottom: 0;
@@ -73,14 +139,14 @@ ion-navbar-section {
 }
 
 
-// iOS Back Button
+// iOS Toolbar  Back Button
 // --------------------------------------------------
 
 .back-button {
   margin: 0;
   min-height: 3.2rem;
   line-height: 1;
-  order: map-get($toolbar-order-ios, 'back-button');
+  order: map-get($toolbar-order-ios, back-button);
   overflow: visible;
   transform: translateZ(0px);
 }
@@ -93,16 +159,17 @@ ion-navbar-section {
 }
 
 
-// iOS Menu Toggle
+// iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
 [menu-toggle] {
-  order: map-get($toolbar-order-ios, menu-toggle-primary);
+  order: map-get($toolbar-order-ios, menu-toggle-start);
   cursor: pointer;
 }
 
-[menu-toggle][secondary] {
-  order: map-get($toolbar-order-ios, menu-toggle-secondary);
+[menu-toggle][end],
+[menu-toggle][right] {
+  order: map-get($toolbar-order-ios, menu-toggle-end);
 }
 
 ion-segment-button[button] {
@@ -112,55 +179,6 @@ ion-segment-button[button] {
 }
 
 
-// iOS Toolbar Background
-// --------------------------------------------------
-
-.toolbar-background {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-color: $toolbar-ios-border-color;
-  background-color: $toolbar-ios-background-color;
-}
-
-&.hairlines .toolbar-background {
-  border-bottom-width: 0.55px;
-}
-
-
-// iOS Toolbar Content
-// --------------------------------------------------
-
-ion-title {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0px 90px 1px 90px;
-  pointer-events: none;
-  transform: translateZ(0px);
-}
-
-.toolbar-title {
-  font-size: $toolbar-ios-title-font-size;
-  font-weight: 500;
-  text-align: center;
-  pointer-events: auto;
-  color: $toolbar-ios-text-color;
-}
-
-ion-nav-items {
-  flex: 1;
-  order: map-get($toolbar-order-ios, primary);
-  transform: translateZ(0px);
-}
-
-ion-nav-items[secondary] {
-  text-align: right;
-  order: map-get($toolbar-order-ios, secondary);
-}
-
-
 // iOS Toolbar Color Generation
 // --------------------------------------------------
 
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 7447936f8b..9c669dd4ed 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -5,41 +5,111 @@
 // 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-order-md: (
+  back-button: 0,
+  menu-toggle-start: 1,
+  buttons-left: 2,
+  content: 3,
+  buttons-start: 4,
+  buttons-end: 5,
+  buttons-right: 6,
+  menu-toggle-end: 7,
+);
+
+$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;
+$navbar-md-height:                       $toolbar-md-height !default;
 
 
 .toolbar {
   padding: $toolbar-md-padding;
   min-height: $toolbar-md-height;
+}
 
-  button,
-  [button],
-  button.activated,
-  [button].activated {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding: 0 5px;
-    min-height: 32px;
-    box-shadow: none;
-    overflow: visible;
-    color: $toolbar-md-active-color;
-  }
+ion-navbar-section {
+  min-height: $navbar-md-height;
+}
 
-  button.icon-only,
-  [button].icon-only {
-    padding-right: 0;
-    padding-left: 0;
-  }
 
-  button icon,
-  [button] icon {
-    padding: 0;
-    min-width: 28px;
-  }
+// Material Design Toolbar Background
+// --------------------------------------------------
 
+.toolbar-background {
+  border-color: $toolbar-md-border-color;
+  background-color: $toolbar-md-background-color;
+}
+
+
+// Material Design Toolbar Content
+// --------------------------------------------------
+
+.toolbar-content {
+  flex: 1;
+  order: map-get($toolbar-order-md, content);
+}
+
+.toolbar-title {
+  color: $toolbar-md-text-color;
+}
+
+ion-title {
+  padding: 0 12px;
+  font-size: $toolbar-md-title-font-size;
+  font-weight: 500;
+}
+
+
+// Material Design Toolbar Buttons
+// --------------------------------------------------
+
+ion-buttons {
+  flex: 1;
+  order: map-get($toolbar-order-md, buttons-start);
+  transform: translateZ(0px);
+}
+
+ion-buttons[left] {
+  order: map-get($toolbar-order-md, buttons-left);
+}
+
+ion-buttons[left] .bar-button:first-child {
+  margin-left: 0;
+}
+
+ion-buttons[end] {
+  text-align: right;
+  order: map-get($toolbar-order-md, buttons-end);
+}
+
+ion-buttons[right] {
+  text-align: right;
+  order: map-get($toolbar-order-md, buttons-right);
+}
+
+
+// Material Design Toolbar Back Button
+// --------------------------------------------------
+
+.back-button {
+  margin: 0 0 0 12px;
+  box-shadow: none;
+}
+
+.back-button-icon {
+  margin: 0;
+  min-width: 44px;
+  font-size: 2.4rem;
+  font-weight: normal;
+  text-align: left;
+}
+
+
+// Material Design Toolbar Menu Toggle
+// --------------------------------------------------
+
+.toolbar {
   [menu-toggle],
   [menu-toggle].activated {
     padding: 0 2px;
@@ -55,34 +125,6 @@ $toolbar-md-button-font-size:        1.4rem !default;
     margin: 0 2px;
     min-width: 28px;
   }
-
-}
-
-.toolbar button:hover:not(.disable-hover),
-.toolbar [button]:hover:not(.disable-hover),
-.toolbar button.activated,
-.toolbar [button].activated {
-  color: $toolbar-md-active-color;
-  background-color: transparent;
-}
-
-.toolbar-background {
-  border-color: $toolbar-md-border-color;
-  background-color: $toolbar-md-background-color;
-}
-
-ion-title {
-  padding: 0 12px;
-  font-size: $toolbar-md-title-font-size;
-  font-weight: 500;
-}
-
-.toolbar-title {
-  color: $toolbar-md-text-color;
-}
-
-ion-nav-items[primary] button:first-child {
-  margin-left: 0;
 }
 
 
@@ -96,20 +138,6 @@ ion-navbar-section {
   min-height: $navbar-md-height;
 }
 
-.back-button {
-  margin: 0 0 0 12px;
-  box-shadow: none;
-}
-
-.back-button-icon {
-  margin: 0;
-  min-width: 44px;
-  font-size: 2.4rem;
-  font-weight: normal;
-  text-align: left;
-}
-
-
 
 // Material Design Toolbar Color Generation
 // --------------------------------------------------
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index 2a1a98c698..c93a93d026 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -5,43 +5,43 @@
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon ios=contact></icon>
     </button>
     <button>
       <icon search></icon>
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button>
       <icon more></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Defaults</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button class="activated">
       <icon ios="contact"></icon>
     </button>
     <button class="activated">
       <icon search></icon>
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button class="activated">
       <icon more></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Defaults.activated</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button clear>
       <icon contact></icon>
     </button>
@@ -49,19 +49,19 @@
       <icon contact></icon>
       Clear
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Clear</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button clear secondary>
       Help
       <icon help-circle></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button clear class="activated">
       <icon contact></icon>
     </button>
@@ -69,19 +69,19 @@
       <icon contact></icon>
       Clear
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Clear</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button clear secondary class="activated">
       Help
       <icon help-circle></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button outline>
       <icon contact></icon>
     </button>
@@ -89,18 +89,18 @@
       <icon star></icon>
       Star
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button secondary outline>
       <icon contact></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Outline</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button outline class="activated">
       <icon contact></icon>
     </button>
@@ -108,94 +108,94 @@
       <icon star></icon>
       Star
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button secondary outline class="activated">
       <icon contact></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Outline.activated</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       Btn
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button secondary>
       Btn
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>ColorAttr</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button class="activated">
       Btn
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button secondary class="activated">
       Btn
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>ColorAttr.activated</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon contact></icon>
       Clear
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button>
       Edit
       <icon create></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Icon/Color Attr</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
-  <ion-nav-items primary>
+  </button>
+  <ion-buttons start>
     <button>
       <icon star></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Left side menu toggle</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-<ion-nav-items secondary>
+<ion-buttons end>
   <button #button1 (click)="buttonClick(button1)">
     <icon star></icon>
   </button>
-</ion-nav-items>
+</ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
-  <a menu-toggle secondary>
+  <button menu-toggle right>
     <icon menu></icon>
-  </a>
+  </button>
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button #button2 (click)="buttonClick(button2)">
       <icon search></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-segment secondary>
     <ion-segment-button>
       Something
diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss
index 133e55524a..3ba63610c8 100644
--- a/ionic/components/toolbar/toolbar-button.scss
+++ b/ionic/components/toolbar/toolbar-button.scss
@@ -39,14 +39,9 @@
   margin: 0 6px;
   padding: 0;
   min-width: 36px;
-  order: map-get($toolbar-order, menu-toggle-primary);
   box-shadow: none;
 }
 
-.toolbar [menu-toggle][secondary] {
-  order: map-get($toolbar-order, menu-toggle-secondary);
-}
-
 .toolbar [menu-toggle] icon {
   padding: 0 6px;
   font-size: 2.8rem;
@@ -57,8 +52,6 @@
 // --------------------------------------------------
 
 .back-button {
-  order: map-get($toolbar-order, backButton);
-
   display: none;
   &.show-back-button {
     display: flex;
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index a504be4100..8b54064f2d 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -3,15 +3,6 @@
 // Toolbar
 // --------------------------------------------------
 
-$toolbar-order: (
-  backButton: 10,
-  menu-toggle-left: 20,
-  content: 30,
-  left: 40,
-  right: 50,
-  menu-toggle-right: 60,
-);
-
 
 .toolbar {
   position: relative;
@@ -40,12 +31,6 @@ $toolbar-order: (
   pointer-events: none;
 }
 
-.toolbar-content {
-  display: block;
-  flex: 1;
-  order: map-get($toolbar-order, content);
-}
-
 .toolbar[position=bottom] {
   order: $flex-order-toolbar-bottom;
 }
@@ -64,27 +49,22 @@ ion-title {
   overflow: hidden;
 }
 
-ion-nav-items {
+ion-buttons {
   display: block;
   margin: 0 0.2rem;
   pointer-events: none;
-  order: map-get($toolbar-order, left);
 }
 
-ion-nav-items[secondary] {
-  order: map-get($toolbar-order, right);
-}
-
-ion-nav-items button,
-ion-nav-items a,
-ion-nav-items input,
-ion-nav-items textarea,
-ion-nav-items div {
+ion-buttons button,
+ion-buttons a,
+ion-buttons input,
+ion-buttons textarea,
+ion-buttons div {
   pointer-events: auto;
 }
 
 // TODO this is a temp hack to fix segment overlapping ion-nav-item
-ion-nav-items,
+ion-buttons,
 [menu-toggle] {
   z-index: 99;
 }
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index c779731271..b0d1e07b5a 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -44,7 +44,7 @@ export class ToolbarBase extends Ion  {
 
   /**
    * @private
-   * A toolbar items include the left and right side `ion-nav-items`,
+   * A toolbar items include the left and right side `ion-buttons`,
    * and every `menu-toggle`. It does not include the `ion-title`.
    * @returns {TODO} Array of this toolbar's item ElementRefs.
    */
@@ -79,9 +79,9 @@ export class ToolbarBase extends Ion  {
   selector: 'ion-toolbar',
   template:
     '<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>' +
+    '<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
+    '<ng-content select="ion-buttons[start]"></ng-content>' +
+    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
     '<div class="toolbar-content">' +
       '<ng-content></ng-content>' +
     '</div>',
@@ -149,7 +149,7 @@ export class ToolbarTitle extends Ion {
  * @private
  */
 @Directive({
-  selector: 'ion-nav-items,[menu-toggle]'
+  selector: 'ion-buttons,[menu-toggle]'
 })
 export class ToolbarItem extends Ion {
   constructor(

From a9ba12096777b881c59213236ec3d113ca8b3ab3 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 7 Dec 2015 12:12:53 -0500
Subject: [PATCH 044/100] refactor(button): changed markup back to old way

references #689
---
 ionic/components/button/test/basic/main.html  | 20 ++++++------
 ionic/components/button/test/block/main.html  | 24 +++++++-------
 ionic/components/button/test/clear/main.html  | 24 +++++++-------
 ionic/components/button/test/fab/main.html    | 12 +++----
 ionic/components/button/test/full/main.html   | 16 +++++-----
 .../components/button/test/outline/main.html  | 32 +++++++++----------
 ionic/components/button/test/round/main.html  | 20 ++++++------
 ionic/components/button/test/sizes/main.html  | 24 +++++++-------
 8 files changed, 86 insertions(+), 86 deletions(-)

diff --git a/ionic/components/button/test/basic/main.html b/ionic/components/button/test/basic/main.html
index 74d078849e..28341090bb 100644
--- a/ionic/components/button/test/basic/main.html
+++ b/ionic/components/button/test/basic/main.html
@@ -11,28 +11,28 @@
   </p>
 
   <p>
-    <button class="button-primary">Primary</button>
-    <button class="button-primary activated">Primary.activated</button>
+    <button primary>Primary</button>
+    <button primary class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <button class="button-secondary">Secondary</button>
-    <button class="button-secondary activated">Secondary.activated</button>
+    <button secondary>Secondary</button>
+    <button secondary class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button class="button-danger">Danger</button>
-    <button class="button-danger activated">Danger.activated</button>
+    <button danger>Danger</button>
+    <button danger class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <button class="button-light">Light</button>
-    <button class="button-light activated">Light.activated</button>
+    <button light>Light</button>
+    <button light class="activated">Light.activated</button>
   </p>
 
   <p>
-    <button class="button-dark">Dark</button>
-    <button class="button-dark activated">Dark.activated</button>
+    <button dark>Dark</button>
+    <button dark class="activated">Dark.activated</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/block/main.html b/ionic/components/button/test/block/main.html
index 7cca21f370..b99513a59d 100644
--- a/ionic/components/button/test/block/main.html
+++ b/ionic/components/button/test/block/main.html
@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <a button class="button-block" href="#">a block</a>
-    <button class="button-block">block</button>
+    <a button block href="#">a[button][block]</a>
+    <button block>button[block]</button>
   </p>
 
   <p>
-    <a button class="button-block" href="#"><icon help-circle></icon> a block icon</a>
-    <button class="button-block"><icon help-circle></icon> block icon</button>
+    <a button block href="#"><icon help-circle></icon> a[button][block] icon</a>
+    <button block><icon help-circle></icon> button[block] icon</button>
   </p>
 
   <p>
-    <a button class="button-block button-outline-secondary" href="#">a block outline secondary</a>
-    <button class="button-block button-outline-secondary">button block outline secondary</button>
+    <a button block outline secondary href="#">a[button][block][outline][secondary]</a>
+    <button block outline secondary>button[block][outline][secondary]</button>
   </p>
 
   <p>
-    <a button class="button-block button-clear-dark" href="#">a block clear dark</a>
-    <button class="button-block button-clear-dark">button block clear dark</button>
+    <a button block clear dark href="#">a[button][block][clear][dark]</a>
+    <button block clear dark>button[clear][block][dark]</button>
   </p>
 
   <p>
-    <a button class="button-block button-round" href="#">a block round</a>
-    <button class="button-block button-round">button block ound</button>
+    <a button block round href="#">a[button][block][round]</a>
+    <button block round>button[block][round]</button>
   </p>
 
   <p>
-    <a button class="button-block button-round button-outline" href="#">a block round outline</a>
-    <button class="button-block button-round button-outline">button block round outline</button>
+    <a button block round outline href="#">a[button][block][round][outline]</a>
+    <button block round outline>button[block][round][outline]</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/clear/main.html b/ionic/components/button/test/clear/main.html
index 2b3181ed21..eaf85b301a 100644
--- a/ionic/components/button/test/clear/main.html
+++ b/ionic/components/button/test/clear/main.html
@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <button class="button-clear">Default</button>
-    <button class="button-clear activated">Default.activated</button>
+    <button clear>Default</button>
+    <button clear class="activated">Default.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-primary">Primary</button>
-    <button class="button-clear-primary activated">Primary.activated</button>
+    <button clear primary>Primary</button>
+    <button clear primary class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-secondary">Secondary</button>
-    <button class="button-clear-secondary activated">Secondary.activated</button>
+    <button clear secondary>Secondary</button>
+    <button clear secondary class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-danger">Danger</button>
-    <button class="button-clear-danger activated">Danger.activated</button>
+    <button clear danger>Danger</button>
+    <button clear danger class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-light">Light</button>
-    <button class="button-clear-light activated">Light.activated</button>
+    <button clear light>Light</button>
+    <button clear light class="activated">Light.activated</button>
   </p>
 
   <p>
-    <button class="button-clear-dark">Dark</button>
-    <button class="button-clear-dark activated">Dark.activated</button>
+    <button clear dark>Dark</button>
+    <button clear dark class="activated">Dark.activated</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/fab/main.html b/ionic/components/button/test/fab/main.html
index 6753bf3364..d081de4cd5 100644
--- a/ionic/components/button/test/fab/main.html
+++ b/ionic/components/button/test/fab/main.html
@@ -1,24 +1,24 @@
 
-<button class="button-fab button-fab-left button-fab-top">
+<button fab fab-left fab-top>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-center button-fab-top button-secondary">
+<button fab fab-center fab-top secondary>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-right button-fab-top button-danger">
+<button fab fab-right fab-top danger>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-left button-fab-bottom button-light">
+<button fab fab-left fab-bottom light>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-center button-fab-bottom button-primary">
+<button fab fab-center fab-bottom primary>
   <icon add></icon>
 </button>
 
-<button class="button-fab button-fab-right button-fab-bottom button-dark">
+<button fab fab-right fab-bottom dark>
   <icon add></icon>
 </button>
diff --git a/ionic/components/button/test/full/main.html b/ionic/components/button/test/full/main.html
index 30c2e902d4..15590211b5 100644
--- a/ionic/components/button/test/full/main.html
+++ b/ionic/components/button/test/full/main.html
@@ -6,23 +6,23 @@
 <ion-content>
 
   <div>
-    <a button class="button-full" href="#">a[button].button-full</a>
-    <button class="button-full">button.button-full</button>
+    <a button full href="#">a[button][full]</a>
+    <button full>button[full]</button>
   </div>
 
   <div>
-    <a button class="button-full button-outline-secondary" href="#">a[button].button-full.button-outline-secondary</a>
-    <button class="button-full button-outline-secondary">button.button-full.button-outline-secondary</button>
+    <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
+    <button full outline secondary>button[full][outline][secondary]</button>
   </div>
 
   <div>
-    <a button class="button-full button-clear-light" href="#">a[button].button-full.button-clear-light</a>
-    <button class="button-full button-clear-light">button.button-full.button-clear-light</button>
+    <a button full clear light href="#">a[button][full][clear][light]</a>
+    <button full clear light>button[full][clear][light]</button>
   </div>
 
   <div>
-    <a button class="button-full button-clear-dark" href="#">a[button].button-full.button-clear-dark</a>
-    <button class="button-full button-clear-dark">button.button-full.button-clear-dark</button>
+    <a button full clear dark href="#">a[button][full][clear][dark]</a>
+    <button full clear dark>button[full][clear][dark]</button>
   </div>
 
 </ion-content>
diff --git a/ionic/components/button/test/outline/main.html b/ionic/components/button/test/outline/main.html
index b2c5d69247..04b4037645 100644
--- a/ionic/components/button/test/outline/main.html
+++ b/ionic/components/button/test/outline/main.html
@@ -6,49 +6,49 @@
 <ion-content padding style="text-align:center" class="outer-content">
 
   <p>
-    <button class="button-outline">Default</button>
-    <button class="button-outline activated">Default.activated</button>
+    <button outline>Default</button>
+    <button outline class="activated">Default.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-primary">Primary</button>
-    <button class="button-outline-primary activated">Primary.activated</button>
+    <button outline primary>Primary</button>
+    <button outline primary class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-secondary">Secondary</button>
-    <button class="button-outline-secondary activated">Secondary.activated</button>
+    <button outline secondary>Secondary</button>
+    <button outline secondary class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-danger">Danger</button>
-    <button class="button-outline-danger activated">Danger.activated</button>
+    <button outline danger>Danger</button>
+    <button outline danger class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-light">Light</button>
-    <button class="button-outline-light activated">Light.activated</button>
+    <button outline light>Light</button>
+    <button outline light class="activated">Light.activated</button>
   </p>
 
   <p>
-    <button class="button-outline-dark">Dark</button>
-    <button class="button-outline-dark activated">Dark.activated</button>
+    <button outline dark>Dark</button>
+    <button outline dark class="activated">Dark.activated</button>
   </p>
 
   <p>
-    <button class="button-outline button-block">.button-outline.button-block</button>
+    <button outline block>button[outline][block]</button>
   </p>
 
   <p>
-    <button class="button-outline button-block activated">.button-outline.button-block.activated</button>
+    <button outline block class="activated">[outline][block].activated</button>
   </p>
 
   <p>
-    <button class="button-outline-secondary button-block" >.button-outline-secondary.button-block</button>
+    <button outline block secondary>button[outline][block][secondary]</button>
   </p>
 
   <p>
-    <button class="button-outline-secondary button-block activated">.button-outline-secondary.button-block.activated</button>
+    <button outline block secondary class="activated">[outline][block][secondary].activated</button>
   </p>
 
 </ion-content>
diff --git a/ionic/components/button/test/round/main.html b/ionic/components/button/test/round/main.html
index c163f7cdac..f90d2f7b70 100644
--- a/ionic/components/button/test/round/main.html
+++ b/ionic/components/button/test/round/main.html
@@ -4,17 +4,17 @@
 </ion-toolbar>
 
 <ion-content padding>
-  <button class="button-round">button</button>
-  <button class="button-round button-light">button light</button>
-  <button class="button-round button-secondary">button secondary</button>
-  <button class="button-round button-danger">button danger</button>
-  <button class="button-round button-dark">button dark</button>
+  <button round>button</button>
+  <button round light>button light</button>
+  <button round secondary>button secondary</button>
+  <button round danger>button danger</button>
+  <button round dark>button dark</button>
 
-  <button class="button-round button-outline">button</button>
-  <button class="button-round button-outline-light">button outline light</button>
-  <button class="button-round button-outline-secondary">button outline secondary</button>
-  <button class="button-round button-outline-danger">button outline danger</button>
-  <button class="button-round button-outline-dark">button outline dark</button>
+  <button round outline>button</button>
+  <button round light outline>button light</button>
+  <button round secondary outline>button secondary</button>
+  <button round danger outline>button danger</button>
+  <button round dark outline>button dark</button>
 
 </ion-content>
 
diff --git a/ionic/components/button/test/sizes/main.html b/ionic/components/button/test/sizes/main.html
index 5f9fff318d..0db997df5a 100644
--- a/ionic/components/button/test/sizes/main.html
+++ b/ionic/components/button/test/sizes/main.html
@@ -11,23 +11,23 @@
   </p>
 
   <p>
-    <a button class="button-small" href="#">a[button].button-small</a>
-    <button class="button-small">button.button-small</button>
+    <a button small href="#">a[button][small]</a>
+    <button small>button[small]</button>
   </p>
 
   <p>
-    <a button class="button-outline button-small" href="#">a[button].button-outline.button-small</a>
-    <button class="button-outline button-small">button.button-outline.button-small</button>
+    <a button outline small href="#">a[button][outline][small]</a>
+    <button outline small>button[outline][small]</button>
   </p>
 
   <p>
-    <a button class="button-clear button-small" href="#">a[button].button-clear.button-small</a>
-    <button class="button-clear button-small">button.button-clear.button-small</button>
+    <a button clear small href="#">a[button][clear][small]</a>
+    <button clear small>button[clear][small]</button>
   </p>
 
   <p>
-    <button class="button-large">button.button-large</button>
-    <a button class="button-large" href="#">
+    <button large>[large]</button>
+    <a button large href="#">
       <span style="font-size:48px">H</span>
       <span style="font-size:38px">E</span>
       <span style="font-size:32px">L</span>
@@ -36,13 +36,13 @@
   </p>
 
   <p>
-    <a button class="button-outline button-large" href="#">a[button].button-outline.button-large</a>
-    <button class="button-outline button-large">button.button-outline.button-large</button>
+    <a button outline large href="#">a[button][outline][large]</a>
+    <button outline large>button[outline][large]</button>
   </p>
 
   <p>
-    <a button class="button-clear button-large" href="#">a.button-clear.button-large</a>
-    <button class="button-clear button-large">button.button-clear.button-large</button>
+    <a button clear large href="#">a[clear][large]</a>
+    <button clear large>button[clear][large]</button>
   </p>
 
 </ion-content>

From 822141c4205d58f6192c4a2df185261db2f2e7d7 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 11:42:11 -0600
Subject: [PATCH 045/100] wip solid toolbar btn

---
 ionic/components/toolbar/modes/ios.scss       | 28 +++++++-------
 ionic/components/toolbar/modes/md.scss        | 37 +++++++------------
 .../toolbar/test/scenarios/main.html          | 20 +++++-----
 3 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index a029076d5d..6a6f4f2ca8 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -75,6 +75,20 @@ ion-title {
   transform: translateZ(0px);
 }
 
+@mixin ios-toolbar-theme($color-name, $color-value) {
+  .toolbar[#{$color-name}] {
+
+    .toolbar-background {
+      background-color: $color-value;
+      border-color: darken($color-value, 10%);
+    }
+
+    .toolbar-title {
+      color: inverse($color-value);
+    }
+  }
+}
+
 
 // iOS Toolbar Buttons
 // --------------------------------------------------
@@ -183,17 +197,5 @@ ion-segment-button[button] {
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-ios {
-
-  .toolbar[#{$color-name}] {
-
-    .toolbar-background {
-      background-color: $color-value;
-      border-color: darken($color-value, 10%);
-    }
-
-    .toolbar-title {
-      color: inverse($color-value);
-    }
-  }
-
+  @include ios-toolbar-theme($color-name, $color-value);
 }
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 9c669dd4ed..b0056aa62a 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -60,6 +60,19 @@ ion-title {
   font-weight: 500;
 }
 
+@mixin md-toolbar-theme($color-name, $color-value) {
+  .toolbar[#{$color-name}] {
+
+    .toolbar-background {
+      background-color: $color-value;
+    }
+
+    .toolbar-title {
+      color: inverse($color-value);
+    }
+  }
+}
+
 
 // Material Design Toolbar Buttons
 // --------------------------------------------------
@@ -128,31 +141,9 @@ ion-buttons[right] {
 }
 
 
-// Material Design Navbar
-// --------------------------------------------------
-
-$navbar-md-height:                  5.6rem !default;
-
-
-ion-navbar-section {
-  min-height: $navbar-md-height;
-}
-
-
 // Material Design Toolbar Color Generation
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-md {
-
-  .toolbar[#{$color-name}] {
-
-    .toolbar-background {
-      background-color: $color-value;
-    }
-
-    .toolbar-title {
-      color: inverse($color-value);
-    }
-  }
-
+  @include md-toolbar-theme($color-name, $color-value);
 }
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index c93a93d026..585b0f5f33 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -42,17 +42,17 @@
 
 <ion-toolbar>
   <ion-buttons start>
-    <button clear>
+    <button solid>
       <icon contact></icon>
     </button>
-    <button clear>
+    <button solid>
       <icon contact></icon>
-      Clear
+      Solid
     </button>
   </ion-buttons>
-  <ion-title>Clear</ion-title>
+  <ion-title>Solid</ion-title>
   <ion-buttons end>
-    <button clear secondary>
+    <button solid secondary>
       Help
       <icon help-circle></icon>
     </button>
@@ -62,17 +62,17 @@
 
 <ion-toolbar>
   <ion-buttons start>
-    <button clear class="activated">
+    <button solid class="activated">
       <icon contact></icon>
     </button>
-    <button clear class="activated">
+    <button solid class="activated">
       <icon contact></icon>
-      Clear
+      Solid
     </button>
   </ion-buttons>
-  <ion-title>Clear</ion-title>
+  <ion-title>Solid Activated</ion-title>
   <ion-buttons end>
-    <button clear secondary class="activated">
+    <button solid secondary class="activated">
       Help
       <icon help-circle></icon>
     </button>

From 7506d197f33f2cbdafc55de9ea6043e61c0c352f Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 12:00:34 -0600
Subject: [PATCH 046/100] set button colors with style types

---
 ionic/components/button/button.ts           | 16 ++++--
 ionic/components/button/test/button.spec.ts | 57 ++++++++++++++-------
 2 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 9a89270168..1c846fa9d0 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -37,7 +37,8 @@ export class Button {
   ) {
     this._role = 'button'; // bar-button/item-button
     this._size = null; // large/small
-    this._style = null; // outline/clear
+    this._style = null; // outline/clear/solid
+    this._shape = null; // round/fab
     this._display = null; // block/full
     this._colors = []; // primary/secondary
     this._icon = null; // left/right/only
@@ -118,6 +119,9 @@ export class Button {
       } else if (BUTTON_DISPLAY_ATTRS.indexOf(attrName) > -1) {
         this._display = attrName;
 
+      } else if (BUTTON_SHAPE_ATTRS.indexOf(attrName) > -1) {
+        this._shape = attrName;
+
       } else if (BUTTON_SIZE_ATTRS.indexOf(attrName) > -1) {
         this._size = attrName;
 
@@ -131,12 +135,17 @@ export class Button {
     let role = this._role;
     if (role) {
       this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
+
       this._setClass(this._style, assignCssClass); // button-clear
+      this._setClass(this._style, assignCssClass); // button-clear
+      this._setClass(this._shape, assignCssClass); // button-round
       this._setClass(this._display, assignCssClass); // button-full
       this._setClass(this._size, assignCssClass); // button-small
       this._setClass(this._icon, assignCssClass); // button-icon-left
+
+      let colorStyle = (this._style && this._style !== 'solid' ? this._style + '-' : '');
       this._colors.forEach(color => {
-        this._setClass(color, assignCssClass); // button-secondary
+        this._setClass(colorStyle + color, assignCssClass); // button-secondary
       });
     }
   }
@@ -157,7 +166,8 @@ export class Button {
 }
 
 const BUTTON_SIZE_ATTRS = ['large', 'small'];
-const BUTTON_STYLE_ATTRS = ['round', 'clear', 'outline', 'fab', 'solid'];
+const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid'];
+const BUTTON_SHAPE_ATTRS = ['round', 'fab'];
 const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
 const IGNORE_ATTRS = /_ng/;
 
diff --git a/ionic/components/button/test/button.spec.ts b/ionic/components/button/test/button.spec.ts
index e37a0c9f9a..c1c81e4a19 100644
--- a/ionic/components/button/test/button.spec.ts
+++ b/ionic/components/button/test/button.spec.ts
@@ -31,7 +31,7 @@ export function run() {
     expect(hasClass(b, 'bar-button-outline')).toEqual(true);
     expect(hasClass(b, 'bar-button-small')).toEqual(true);
     expect(hasClass(b, 'bar-button-full')).toEqual(true);
-    expect(hasClass(b, 'bar-button-primary')).toEqual(true);
+    expect(hasClass(b, 'bar-button-outline-primary')).toEqual(true);
 
     expect(hasClass(b, 'button-outline')).toEqual(false);
     expect(hasClass(b, 'button-small')).toEqual(false);
@@ -45,13 +45,37 @@ export function run() {
     expect(hasClass(b, 'button-outline')).toEqual(true);
     expect(hasClass(b, 'button-small')).toEqual(true);
     expect(hasClass(b, 'button-full')).toEqual(true);
-    expect(hasClass(b, 'button-primary')).toEqual(true);
+    expect(hasClass(b, 'button-outline-primary')).toEqual(true);
 
     b._assignCss(false);
     expect(hasClass(b, 'button-outline')).toEqual(false);
     expect(hasClass(b, 'button-small')).toEqual(false);
     expect(hasClass(b, 'button-full')).toEqual(false);
-    expect(hasClass(b, 'button-primary')).toEqual(false);
+    expect(hasClass(b, 'button-outline-primary')).toEqual(false);
+  });
+
+  it('should read button color attributes with styles', () => {
+    let b = mockButton(['outline', 'small', 'full', 'primary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-outline')).toEqual(true);
+    expect(hasClass(b, 'button-small')).toEqual(true);
+    expect(hasClass(b, 'button-full')).toEqual(true);
+    expect(hasClass(b, 'button-outline-primary')).toEqual(true);
+
+    b = mockButton(['clear', 'primary', 'secondary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
+    expect(hasClass(b, 'button-clear-primary')).toEqual(true);
+    expect(hasClass(b, 'button-clear-secondary')).toEqual(true);
+
+    b = mockButton(['solid', 'primary', 'secondary']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-solid')).toEqual(true);
+    expect(hasClass(b, 'button-primary')).toEqual(true);
+    expect(hasClass(b, 'button-secondary')).toEqual(true);
   });
 
   it('should read button color attributes', () => {
@@ -63,21 +87,10 @@ export function run() {
     b._assignCss(true);
     expect(hasClass(b, 'button-primary')).toEqual(true);
     expect(hasClass(b, 'button-secondary')).toEqual(true);
-
-    b = mockButton(['outline', 'small', 'full', 'primary']);
-    b._assignCss(true);
-    expect(hasClass(b, 'button-outline')).toEqual(true);
-    expect(hasClass(b, 'button-small')).toEqual(true);
-    expect(hasClass(b, 'button-full')).toEqual(true);
-    expect(hasClass(b, 'button-primary')).toEqual(true);
   });
 
   it('should read button style attributes', () => {
-    let b = mockButton(['round']);
-    b._assignCss(true);
-    expect(hasClass(b, 'button-round')).toEqual(true);
-
-    b = mockButton(['clear']);
+    let b = mockButton(['clear']);
     b._assignCss(true);
     expect(hasClass(b, 'button-clear')).toEqual(true);
 
@@ -85,10 +98,6 @@ export function run() {
     b._assignCss(true);
     expect(hasClass(b, 'button-outline')).toEqual(true);
 
-    b = mockButton(['fab']);
-    b._assignCss(true);
-    expect(hasClass(b, 'button-fab')).toEqual(true);
-
     b = mockButton(['clear', 'outline', 'small', 'full']);
     b._assignCss(true);
     expect(hasClass(b, 'button-clear')).toEqual(false);
@@ -97,6 +106,16 @@ export function run() {
     expect(hasClass(b, 'button-full')).toEqual(true);
   });
 
+  it('should read button shape attributes', () => {
+    let b = mockButton(['round']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-round')).toEqual(true);
+
+    b = mockButton(['fab']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button-fab')).toEqual(true);
+  });
+
   it('should read button display attributes', () => {
     let b = mockButton(['block']);
     b._assignCss(true);

From 3fa93ac815aa4bf1b194b2024ae8c1e9a45cda53 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 12:46:31 -0600
Subject: [PATCH 047/100] ignore button attr as button color

---
 ionic/components/button/button.ts           |  6 +++---
 ionic/components/button/test/button.spec.ts | 10 +++++++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 1c846fa9d0..f70ac17c63 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -144,8 +144,8 @@ export class Button {
       this._setClass(this._icon, assignCssClass); // button-icon-left
 
       let colorStyle = (this._style && this._style !== 'solid' ? this._style + '-' : '');
-      this._colors.forEach(color => {
-        this._setClass(colorStyle + color, assignCssClass); // button-secondary
+      this._colors.forEach(colorName => {
+        this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
       });
     }
   }
@@ -169,7 +169,7 @@ const BUTTON_SIZE_ATTRS = ['large', 'small'];
 const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid'];
 const BUTTON_SHAPE_ATTRS = ['round', 'fab'];
 const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
-const IGNORE_ATTRS = /_ng/;
+const IGNORE_ATTRS = /_ng|button/;
 
 const TEXT = 1;
 const ICON = 2;
diff --git a/ionic/components/button/test/button.spec.ts b/ionic/components/button/test/button.spec.ts
index c1c81e4a19..e2a4e2f7aa 100644
--- a/ionic/components/button/test/button.spec.ts
+++ b/ionic/components/button/test/button.spec.ts
@@ -24,9 +24,17 @@ export function run() {
     return button.elementRef.nativeElement.classList.contains(className);
   }
 
+  it('should ignore certain attributes', () => {
+    let b = mockButton(['_ngcontent', 'button']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-_ngcontent')).toEqual(false);
+    expect(hasClass(b, 'button-button')).toEqual(false);
+  });
+
   it('should set a different button role', () => {
     let b = mockButton(['outline', 'small', 'full', 'primary']);
-    b.setRole('bar-button')
+    b.setRole('bar-button');
     b._assignCss(true);
     expect(hasClass(b, 'bar-button-outline')).toEqual(true);
     expect(hasClass(b, 'bar-button-small')).toEqual(true);

From ae19f652293682e2656bcfc0ac54bb509440d142 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 7 Dec 2015 14:30:26 -0500
Subject: [PATCH 048/100] refactor(button): fixed UI issues with new classes

Removed my long TODO comments. References #689
---
 ionic/components/button/button.scss    | 34 +++++---------------------
 ionic/components/button/modes/ios.scss | 30 +++++++++++++++++++++++
 ionic/components/button/modes/md.scss  | 27 ++++++++++++++++----
 3 files changed, 58 insertions(+), 33 deletions(-)

diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 2df50c1d4d..129f26b846 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -62,12 +62,7 @@ a.button {
 // --------------------------------------------------
 
 .button-full {
-  margin-right: 0;
-  margin-left: 0;
   width: 100%;
-  border-radius: 0;
-  border-right-width: 0;
-  border-left-width: 0;
 }
 
 
@@ -79,27 +74,10 @@ a.button {
   border-radius: $button-round-border-radius;
 }
 
+// Full Outline Button
+// --------------------------------------------------
 
-
-// TODO
-// button should have classes:
-// button, button-primary, button-secondary, etc.
-// button holds all styling with default primary color(will this affect outline/clear?) and
-// the other classes change the color
-//
-// button-clear should have classes:
-// button-clear, button-clear-primary, button-clear-secondary, etc.
-// button-clear holds all clear styling with default primary color and
-// the other classes change the color
-//
-// button-outline should have classes:
-// button-outline, button-outline-primary, button-outline-secondary, etc.
-// button-outline holds all outline styling with default primary color and
-// the other classes change the color
-//
-// button-block should stand alone
-// button-full should stand alone
-// button-round should stand alone
-// button-disabled should stand alone(?)
-// button-sizes should stand alone (button-small, button-large, etc)
-// button-fab errrrr
+.button-full.button-outline {
+  border-left-width: 0;
+  border-right-width: 0;
+}
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index c49dd925f8..55c2ab35ce 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -20,6 +20,7 @@ $button-ios-large-padding:            1.0em !default;
 $button-ios-small-font-size:          1.3rem !default;
 $button-ios-small-height:             2.1em !default;
 $button-ios-small-padding:            0.9em !default;
+$button-ios-small-icon-font-size:     1.3em !default;
 
 
 // iOS Default Button
@@ -84,6 +85,9 @@ $button-ios-small-padding:            0.9em !default;
   font-size: $button-ios-small-font-size;
 }
 
+.button-small.button-icon-only icon {
+  font-size: $button-ios-small-icon-font-size;
+}
 
 // iOS Block Button
 // --------------------------------------------------
@@ -91,6 +95,19 @@ $button-ios-small-padding:            0.9em !default;
 .button-block {
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
+  line-height: 2.8em;
+}
+
+
+// iOS Full Button
+// --------------------------------------------------
+
+.button-full {
+  margin-right: 0;
+  margin-left: 0;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
 }
 
 
@@ -138,6 +155,11 @@ $button-ios-small-padding:            0.9em !default;
   color: color-shade($button-ios-color);
   background-color: transparent;
 
+  &.activated {
+    opacity: 0.4;
+    background-color: transparent;
+  }
+
   &:hover:not(.disable-hover) {
     opacity: 0.6;
     color: color-shade($button-ios-color);
@@ -167,6 +189,14 @@ $button-ios-small-padding:            0.9em !default;
   }
 }
 
+// iOS Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+  border-radius: $button-round-border-radius;
+}
+
 
 // Generate iOS Button Colors
 // --------------------------------------------------
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 5c3e9c5839..98b84155ec 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -4,8 +4,8 @@
 // Material Design Button
 // --------------------------------------------------
 
-$button-md-margin:                        0.4rem 0.2rem !default;
-$button-md-padding:                       0 1.1em !default;
+$button-md-margin:                         0.4rem 0.2rem !default;
+$button-md-padding:                        0 1.1em !default;
 $button-md-font-size:                      1.4rem !default;
 $button-md-height:                         3.6rem !default;
 $button-md-box-shadow:                     0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
@@ -32,6 +32,7 @@ $button-md-large-padding:                  1.0em !default;
 $button-md-small-font-size:                1.3rem !default;
 $button-md-small-height:                   2.1em !default;
 $button-md-small-padding:                  0.9em !default;
+$button-md-small-icon-font-size:           1.4em !default;
 
 
 // Material Design Default Button
@@ -66,6 +67,7 @@ $button-md-small-padding:                  0.9em !default;
 
   &.activated {
     box-shadow: $button-md-box-shadow-active;
+    background-color: $button-md-color-activated;
   }
 }
 
@@ -84,6 +86,7 @@ $button-md-small-padding:                  0.9em !default;
 
     &.activated {
       opacity: 1;
+      background-color: $bg-color-activated;
     }
   }
 
@@ -105,12 +108,20 @@ $button-md-small-padding:                  0.9em !default;
   font-size: $button-md-small-font-size;
 }
 
+.button-small.button-icon-only icon {
+  font-size: $button-md-small-icon-font-size;
+}
+
 
 // Material Design Full Button
 // --------------------------------------------------
 
 .button-full {
   border-radius: 0;
+  margin-right: 0;
+  margin-left: 0;
+  border-right-width: 0;
+  border-left-width: 0;
 }
 
 
@@ -127,6 +138,7 @@ $button-md-small-padding:                  0.9em !default;
     opacity: 1;
     color: $background-md-color;
     background-color: $button-md-color;
+    box-shadow: none;
   }
 
   md-ripple {
@@ -166,8 +178,12 @@ $button-md-small-padding:                  0.9em !default;
   color: color-shade($button-md-color);
 
   &.activated {
-    opacity: 0.4;
     background-color: $button-md-clear-active-background-color;
+    box-shadow: none;
+  }
+
+  &:hover:not(.disable-hover) {
+    color: color-shade($button-md-color);
   }
 }
 
@@ -183,9 +199,10 @@ $button-md-small-padding:                  0.9em !default;
     background-color: transparent;
     color: $fg-color;
 
+
     &.activated {
-      opacity: 0.4;
-      background-color: transparent;
+      background-color: $button-md-clear-active-background-color;
+      box-shadow: none;
     }
 
     &:hover:not(.disable-hover) {

From d1b9880a08f1a7a1d5de22b013151f99bee17d70 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 7 Dec 2015 14:34:56 -0500
Subject: [PATCH 049/100] refactor(button): changed border from short-hand
 syntax to make it easier to override

references #689
---
 ionic/components/button/modes/ios.scss | 4 +++-
 ionic/components/button/modes/md.scss  | 8 +++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index 55c2ab35ce..f1c20f44ae 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -115,7 +115,9 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // --------------------------------------------------
 
 .button-outline {
-  border: 1px solid $button-ios-color;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $button-ios-color;
   background-color: transparent;
   color: $button-ios-color;
 
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 98b84155ec..1c69af9b15 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -41,11 +41,7 @@ $button-md-small-icon-font-size:           1.4em !default;
 .button {
   margin: $button-md-margin;
   padding: $button-md-padding;
-
   min-height: $button-md-height;
-  font-size: $button-md-font-size;
-
-  border: 0;
   border-radius: $button-md-border-radius;
 
   font-weight: 500;
@@ -129,7 +125,9 @@ $button-md-small-icon-font-size:           1.4em !default;
 // --------------------------------------------------
 
 .button-outline {
-  border: 1px solid $button-md-color;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $button-md-color;
   background-color: transparent;
   color: $button-md-color;
   box-shadow: none;

From c6d5692f72274d478482752b16adb9466e96c6a3 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 7 Dec 2015 15:23:35 -0500
Subject: [PATCH 050/100] refactor(radio): fixed radio nesting, added sass
 variables for easier customization

references #689
---
 ionic/components/radio/modes/ios.scss | 30 ++++++----
 ionic/components/radio/modes/md.scss  | 81 ++++++++++++++-------------
 ionic/components/radio/radio.scss     |  8 ++-
 ionic/components/radio/radio.ts       |  8 +--
 4 files changed, 70 insertions(+), 57 deletions(-)

diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 50dbafa0c3..828c72f4d1 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -4,14 +4,24 @@
 // iOS Radio
 // --------------------------------------------------
 
-$radio-ios-color-on:       map-get($colors-ios, primary) !default;
+$radio-ios-color-on:               map-get($colors-ios, primary) !default;
 
+$radio-ios-icon-width:             16px !default;
+$radio-ios-icon-height:            21px !default;
+$radio-ios-icon-border-width:      2px !default;
+$radio-ios-icon-border-style:      solid !default;
 
 ion-radio {
 
-  &[aria-checked=true] radio-icon:after {
+  &[aria-checked=true] {
+    color: $radio-ios-color-on;
+  }
+
+  &[aria-checked=true] .radio-icon:after {
     position: absolute;
-    border: 2px solid $radio-ios-color-on;
+    border-width: $radio-ios-icon-border-width;
+    border-style: $radio-ios-icon-border-style;
+    border-color: $radio-ios-color-on;
     top: 3px;
     left: 7px;
     width: 4px;
@@ -22,26 +32,22 @@ ion-radio {
     transform: rotate(45deg);
   }
 
-  &[aria-checked=true] {
-    color: $radio-ios-color-on;
-  }
-
   &.item.activated {
     background-color: $list-ios-background-color;
   }
 
 }
 
-media-radio {
+.radio-media {
   display: block;
   margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
 }
 
-radio-icon {
+.radio-icon {
   position: relative;
   display: block;
-  width: 16px;
-  height: 21px;
+  width: $radio-ios-icon-width;
+  height: $radio-ios-icon-height;
 }
 
 
@@ -52,7 +58,7 @@ radio-icon {
 
   ion-radio[#{$color-name}] {
 
-    &[aria-checked=true] radio-icon:after {
+    &[aria-checked=true] .radio-icon:after {
       border-color: $color-value;
     }
 
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index 43a1a39e6d..bf65f50332 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -5,57 +5,62 @@
 // --------------------------------------------------
 
 $radio-md-color-on:               map-get($colors-md, primary) !default;
-
-$radio-md-icon-size:              16px !default;
-$radio-md-border-width:           2px !default;
 $radio-md-color-off:              darken($list-md-border-color, 40%) !default;
 
+$radio-md-icon-width:             16px !default;
+$radio-md-icon-height:            16px !default;
+$radio-md-icon-border-width:      2px !default;
+$radio-md-icon-border-style:      solid !default;
+$radio-md-icon-border-radius:     50% !default;
+
 $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
 
 ion-radio {
 
-  radio-icon {
-    position: relative;
-    top: 0;
-    left: 0;
-    display: block;
-    width: $radio-md-icon-size;
-    height: $radio-md-icon-size;
-    margin: 0;
-    border: $radio-md-border-width solid $radio-md-color-off;
-    border-radius: 50%;
+  &[aria-checked=true] {
+    color: $radio-md-color-on;
   }
 
-  &[aria-checked=true] radio-icon {
+  &[aria-checked=true] .radio-icon {
     border-color: $radio-md-color-on;
+
+    &:after {
+      transform: scale3d(1, 1, 1);
+    }
   }
 
-  radio-icon:after {
+}
+
+.radio-icon {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: block;
+  width: $radio-md-icon-width;
+  height: $radio-md-icon-height;
+  margin: 0;
+  border-width: $radio-md-icon-border-width;
+  border-style: $radio-md-icon-border-style;
+  border-color: $radio-md-color-off;
+  border-radius: $radio-md-icon-border-radius;
+
+  &:after {
     position: absolute;
-    top: $radio-md-border-width;
-    left: $radio-md-border-width;
-    width: $radio-md-icon-size / 2;
-    height: $radio-md-icon-size / 2;
-    background: $radio-md-color-on;
+    top: $radio-md-icon-border-width;
+    left: $radio-md-icon-border-width;
+    width: $radio-md-icon-width / 2;
+    height: $radio-md-icon-height / 2;
+    background-color: $radio-md-color-on;
     border-radius: 50%;
     content: '';
     transition: transform $radio-md-transition-duration $radio-md-transition-easing;
     transform: scale3d(0, 0, 0);
   }
-
-  &[aria-checked=true] radio-icon:after {
-    transform: scale3d(1, 1, 1);
-  }
-
-  &[aria-checked=true] {
-    color: $radio-md-color-on;
-  }
-
 }
 
-media-radio {
+.radio-media {
   display: block;
   margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom ($item-md-padding-left / 2);
 }
@@ -68,18 +73,18 @@ media-radio {
 
   ion-radio[#{$color-name}] {
 
-    &[aria-checked=true] radio-icon {
-      border-color: $color-value;
-    }
-
-    &[aria-checked=true] radio-icon:after {
-      background: $color-value;
-    }
-
     &[aria-checked=true] {
       color: $color-value;
     }
 
+    &[aria-checked=true] .radio-icon {
+      border-color: $color-value;
+
+      &:after {
+        background-color: $color-value;
+      }
+    }
+
   }
 
 }
diff --git a/ionic/components/radio/radio.scss b/ionic/components/radio/radio.scss
index 6fcf12120d..3bfc2f3f90 100644
--- a/ionic/components/radio/radio.scss
+++ b/ionic/components/radio/radio.scss
@@ -3,15 +3,17 @@
 // Radio
 // --------------------------------------------------
 
+$radio-disabled-opacity:       0.5 !default;
+$radio-disabled-text-color:    $subdued-text-color !default;
+
 
 ion-radio {
-  display: block;
   cursor: pointer;
   @include user-select-none();
 }
 
 ion-radio[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-color;
+  opacity: $radio-disabled-opacity;
+  color: $radio-disabled-text-color;
   pointer-events: none;
 }
diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts
index b331ff4615..e15a4b6dbc 100644
--- a/ionic/components/radio/radio.ts
+++ b/ionic/components/radio/radio.ts
@@ -162,7 +162,7 @@ export class RadioGroup extends Ion {
  *   Radio Label
  * </ion-radio>
  * ```
- * 
+ *
  * @see {@link /docs/v2/components#radio Radio Component Docs}
  */
 @Component({
@@ -189,9 +189,9 @@ export class RadioGroup extends Ion {
       '<ion-item-content id="{{labelId}}">' +
         '<ng-content></ng-content>' +
       '</ion-item-content>' +
-      '<media-radio>' +
-        '<radio-icon></radio-icon>' +
-      '</media-radio>' +
+      '<div class="radio-media">' +
+        '<div class="radio-icon"></div>' +
+      '</div>' +
     '</div>'
 })
 export class RadioButton extends Ion {

From f257a50265fe67ce20210d5001fb1cb0519984e0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 7 Dec 2015 16:26:00 -0500
Subject: [PATCH 051/100] refactor(radio): moved disable color to modes so it
 is easier to override

references #689
---
 ionic/components/radio/modes/ios.scss | 7 +++++++
 ionic/components/radio/modes/md.scss  | 6 ++++++
 ionic/components/radio/radio.scss     | 2 --
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 828c72f4d1..66f2dccd99 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -11,6 +11,9 @@ $radio-ios-icon-height:            21px !default;
 $radio-ios-icon-border-width:      2px !default;
 $radio-ios-icon-border-style:      solid !default;
 
+$radio-ios-disabled-text-color:    $subdued-text-ios-color !default;
+
+
 ion-radio {
 
   &[aria-checked=true] {
@@ -38,6 +41,10 @@ ion-radio {
 
 }
 
+ion-radio[aria-disabled=true] {
+  color: $radio-ios-disabled-text-color;
+}
+
 .radio-media {
   display: block;
   margin: $item-ios-padding-media-top ($item-ios-padding-right / 2) $item-ios-padding-media-bottom ($item-ios-padding-left / 2);
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index bf65f50332..cdf484c72d 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -16,6 +16,8 @@ $radio-md-icon-border-radius:     50% !default;
 $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
+$radio-md-disabled-text-color:    $subdued-text-md-color !default;
+
 
 ion-radio {
 
@@ -33,6 +35,10 @@ ion-radio {
 
 }
 
+ion-radio[aria-disabled=true] {
+  color: $radio-md-disabled-text-color;
+}
+
 .radio-icon {
   position: relative;
   top: 0;
diff --git a/ionic/components/radio/radio.scss b/ionic/components/radio/radio.scss
index 3bfc2f3f90..d164a64855 100644
--- a/ionic/components/radio/radio.scss
+++ b/ionic/components/radio/radio.scss
@@ -4,7 +4,6 @@
 // --------------------------------------------------
 
 $radio-disabled-opacity:       0.5 !default;
-$radio-disabled-text-color:    $subdued-text-color !default;
 
 
 ion-radio {
@@ -14,6 +13,5 @@ ion-radio {
 
 ion-radio[aria-disabled=true] {
   opacity: $radio-disabled-opacity;
-  color: $radio-disabled-text-color;
   pointer-events: none;
 }

From e7437b4ab27153240f3894136b87f8558307c3dd Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 15:50:59 -0600
Subject: [PATCH 052/100] iOS toolbar buttons

---
 ionic/components/button/button.ts             |   5 +-
 ionic/components/button/modes/ios.scss        |  11 +-
 ionic/components/button/test/button.spec.ts   |  19 ++-
 ionic/components/toolbar/modes/ios.scss       | 111 +++++++++++++++++-
 ionic/components/toolbar/modes/md.scss        |   8 +-
 .../toolbar/test/scenarios/main.html          |  74 ++++--------
 6 files changed, 161 insertions(+), 67 deletions(-)

diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index f70ac17c63..39f345eb3e 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -37,7 +37,7 @@ export class Button {
   ) {
     this._role = 'button'; // bar-button/item-button
     this._size = null; // large/small
-    this._style = null; // outline/clear/solid
+    this._style = 'default'; // outline/clear/solid
     this._shape = null; // round/fab
     this._display = null; // block/full
     this._colors = []; // primary/secondary
@@ -136,14 +136,13 @@ export class Button {
     if (role) {
       this.renderer.setElementClass(this.elementRef, role, assignCssClass); // button
 
-      this._setClass(this._style, assignCssClass); // button-clear
       this._setClass(this._style, assignCssClass); // button-clear
       this._setClass(this._shape, assignCssClass); // button-round
       this._setClass(this._display, assignCssClass); // button-full
       this._setClass(this._size, assignCssClass); // button-small
       this._setClass(this._icon, assignCssClass); // button-icon-left
 
-      let colorStyle = (this._style && this._style !== 'solid' ? this._style + '-' : '');
+      let colorStyle = (this._style !== 'default' ? this._style + '-' : '');
       this._colors.forEach(colorName => {
         this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
       });
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index c49dd925f8..98df3f9637 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -98,9 +98,12 @@ $button-ios-small-padding:            0.9em !default;
 // --------------------------------------------------
 
 .button-outline {
-  border: 1px solid $button-ios-color;
-  background-color: transparent;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $button-ios-color;
   color: $button-ios-color;
+  background-color: transparent;
+  border-radius: 4px;
 
   &.activated {
     opacity: 1;
@@ -118,8 +121,8 @@ $button-ios-small-padding:            0.9em !default;
   .button-outline-#{$color-name} {
     $fg-color: color-shade($color-value, 5%);
     border-color: $fg-color;
-    background-color: transparent;
     color: $fg-color;
+    background-color: transparent;
 
     &.activated {
       color: $background-ios-color;
@@ -158,13 +161,13 @@ $button-ios-small-padding:            0.9em !default;
 
     &.activated {
       opacity: 0.4;
-      background-color: transparent;
     }
 
     &:hover:not(.disable-hover) {
       color: color-shade($fg-color);
     }
   }
+
 }
 
 
diff --git a/ionic/components/button/test/button.spec.ts b/ionic/components/button/test/button.spec.ts
index e2a4e2f7aa..333915c3d6 100644
--- a/ionic/components/button/test/button.spec.ts
+++ b/ionic/components/button/test/button.spec.ts
@@ -82,8 +82,21 @@ export function run() {
     b._assignCss(true);
     expect(hasClass(b, 'button')).toEqual(true);
     expect(hasClass(b, 'button-solid')).toEqual(true);
-    expect(hasClass(b, 'button-primary')).toEqual(true);
-    expect(hasClass(b, 'button-secondary')).toEqual(true);
+    expect(hasClass(b, 'button-solid-primary')).toEqual(true);
+    expect(hasClass(b, 'button-solid-secondary')).toEqual(true);
+  });
+
+  it('should auto add the default style', () => {
+    let b = mockButton();
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-default')).toEqual(true);
+
+    b = mockButton(['clear']);
+    b._assignCss(true);
+    expect(hasClass(b, 'button')).toEqual(true);
+    expect(hasClass(b, 'button-default')).toEqual(false);
+    expect(hasClass(b, 'button-clear')).toEqual(true);
   });
 
   it('should read button color attributes', () => {
@@ -180,7 +193,7 @@ export function run() {
     expect(b._role).toEqual('button');
     expect(b._size).toEqual(null);
     expect(b._colors.length).toEqual(0);
-    expect(b._style).toEqual(null);
+    expect(b._style).toEqual('default');
     expect(b._display).toEqual(null);
   });
 
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 6a6f4f2ca8..6bdfcd5687 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -22,6 +22,9 @@ $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 $navbar-ios-height:                         $toolbar-ios-height !default;
 
+$bar-button-ios-color:                      $toolbar-ios-active-color !default;
+$bar-button-ios-border-radius:              4px !default;
+
 
 .toolbar {
   padding: $toolbar-ios-padding;
@@ -90,7 +93,7 @@ ion-title {
 }
 
 
-// iOS Toolbar Buttons
+// iOS Toolbar Button Placement
 // --------------------------------------------------
 
 ion-buttons {
@@ -113,6 +116,10 @@ ion-buttons[right] {
   order: map-get($toolbar-order-ios, buttons-right);
 }
 
+
+// iOS Toolbar Button Default
+// --------------------------------------------------
+
 .bar-button {
   margin-top: 0;
   margin-bottom: 0;
@@ -120,10 +127,101 @@ ion-buttons[right] {
   min-height: 32px;
   border: 0;
   font-size: $toolbar-ios-button-font-size;
-  color: $toolbar-ios-active-color;
-  background-color: transparent;
+  border-radius: $bar-button-ios-border-radius;
 }
 
+@mixin ios-bar-button-default($color-name, $color-value) {
+
+  .bar-button-#{$color-name} {
+    $fg-color: color-shade($color-value);
+    color: $fg-color;
+    background-color: transparent;
+
+    &:hover:not(.disable-hover) {
+      color: color-shade($fg-color);
+    }
+
+    &.activated {
+      opacity: 0.4;
+    }
+  }
+
+}
+
+
+// iOS Toolbar Button Outline
+// --------------------------------------------------
+
+.bar-button-outline {
+  border-width: 1px;
+  border-style: solid;
+  border-color: $bar-button-ios-color;
+  color: $bar-button-ios-color;
+  background-color: transparent;
+
+  &:hover:not(.disable-hover) {
+    opacity: 0.4;
+  }
+
+  &.activated {
+    color: inverse($bar-button-ios-color);
+    background-color: $bar-button-ios-color;
+  }
+}
+
+@mixin ios-bar-button-outline($color-name, $color-value) {
+
+  .bar-button-outline-#{$color-name} {
+    $fg-color: color-shade($color-value);
+    border-color: $fg-color;
+    color: $fg-color;
+    background-color: transparent;
+
+    &.activated {
+      color: inverse($fg-color);
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// iOS Toolbar Button Solid
+// --------------------------------------------------
+
+.bar-button-solid {
+  color: inverse($bar-button-ios-color);
+  background-color: $bar-button-ios-color;
+
+  &:hover:not(.disable-hover) {
+    opacity: 0.4;
+    color: inverse($bar-button-ios-color);
+  }
+
+  &.activated {
+    opacity: 0.4;
+    color: inverse($bar-button-ios-color);
+    background-color: color-shade($bar-button-ios-color);
+  }
+}
+
+@mixin ios-bar-button-solid($color-name, $color-value) {
+
+  .bar-button-solid-#{$color-name} {
+    color: inverse($color-value);
+    background-color: $color-value;
+
+    &.activated {
+      background-color: color-shade($color-value);
+    }
+  }
+
+}
+
+
+// iOS Toolbar Button Icon
+// --------------------------------------------------
+
 .bar-button-icon-left icon {
   margin-left: -0.1em;
   padding-right: 0.3em;
@@ -153,7 +251,7 @@ ion-buttons[right] {
 }
 
 
-// iOS Toolbar  Back Button
+// iOS Toolbar Back Button
 // --------------------------------------------------
 
 .back-button {
@@ -196,6 +294,11 @@ ion-segment-button[button] {
 // iOS Toolbar Color Generation
 // --------------------------------------------------
 
+@include ios-bar-button-default(default, $bar-button-ios-color);
+
 @each $color-name, $color-value in $colors-ios {
   @include ios-toolbar-theme($color-name, $color-value);
+  @include ios-bar-button-default($color-name, $color-value);
+  @include ios-bar-button-outline($color-name, $color-value);
+  @include ios-bar-button-solid($color-name, $color-value);
 }
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index b0056aa62a..4c02fed7cd 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -74,7 +74,7 @@ ion-title {
 }
 
 
-// Material Design Toolbar Buttons
+// Material Design Toolbar Button Placement
 // --------------------------------------------------
 
 ion-buttons {
@@ -102,6 +102,12 @@ ion-buttons[right] {
 }
 
 
+// Material Design Toolbar Buttons
+// --------------------------------------------------
+
+// HI!
+
+
 // Material Design Toolbar Back Button
 // --------------------------------------------------
 
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index 585b0f5f33..c881c22591 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -14,7 +14,7 @@
     </button>
   </ion-buttons>
   <ion-buttons end>
-    <button>
+    <button secondary>
       <icon more></icon>
     </button>
   </ion-buttons>
@@ -32,7 +32,7 @@
     </button>
   </ion-buttons>
   <ion-buttons end>
-    <button class="activated">
+    <button secondary class="activated">
       <icon more></icon>
     </button>
   </ion-buttons>
@@ -40,46 +40,6 @@
 </ion-toolbar>
 
 
-<ion-toolbar>
-  <ion-buttons start>
-    <button solid>
-      <icon contact></icon>
-    </button>
-    <button solid>
-      <icon contact></icon>
-      Solid
-    </button>
-  </ion-buttons>
-  <ion-title>Solid</ion-title>
-  <ion-buttons end>
-    <button solid secondary>
-      Help
-      <icon help-circle></icon>
-    </button>
-  </ion-buttons>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button solid class="activated">
-      <icon contact></icon>
-    </button>
-    <button solid class="activated">
-      <icon contact></icon>
-      Solid
-    </button>
-  </ion-buttons>
-  <ion-title>Solid Activated</ion-title>
-  <ion-buttons end>
-    <button solid secondary class="activated">
-      Help
-      <icon help-circle></icon>
-    </button>
-  </ion-buttons>
-</ion-toolbar>
-
-
 <ion-toolbar>
   <ion-buttons start>
     <button outline>
@@ -120,31 +80,41 @@
 
 <ion-toolbar>
   <ion-buttons start>
-    <button>
-      Btn
+    <button solid>
+      <icon contact></icon>
+    </button>
+    <button solid>
+      <icon contact></icon>
+      Solid
     </button>
   </ion-buttons>
+  <ion-title>Solid</ion-title>
   <ion-buttons end>
-    <button secondary>
-      Btn
+    <button solid secondary>
+      Help
+      <icon help-circle></icon>
     </button>
   </ion-buttons>
-  <ion-title>ColorAttr</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
   <ion-buttons start>
-    <button class="activated">
-      Btn
+    <button solid class="activated">
+      <icon contact></icon>
+    </button>
+    <button solid class="activated">
+      <icon contact></icon>
+      Solid
     </button>
   </ion-buttons>
+  <ion-title>Solid Activated</ion-title>
   <ion-buttons end>
-    <button secondary class="activated">
-      Btn
+    <button solid secondary class="activated">
+      Help
+      <icon help-circle></icon>
     </button>
   </ion-buttons>
-  <ion-title>ColorAttr.activated</ion-title>
 </ion-toolbar>
 
 

From 4cf6abec06291ec67ff8ed5e08de449a63c7f674 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 7 Dec 2015 16:55:12 -0500
Subject: [PATCH 053/100] refactor(button): convert button line-height to Sass
 var

references #289
---
 ionic/components/button/modes/ios.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index f1c20f44ae..d9b54cb92a 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -95,7 +95,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
 .button-block {
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
-  line-height: 2.8em;
+  line-height: $button-ios-height;
 }
 
 

From 89f16e52b0b3863c66c2e245957fc4a47dfe092e Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 16:11:59 -0600
Subject: [PATCH 054/100] md toolbar buttons

---
 ionic/components/toolbar/modes/md.scss | 141 ++++++++++++++++++++++++-
 1 file changed, 138 insertions(+), 3 deletions(-)

diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 4c02fed7cd..8c7f84f239 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -22,6 +22,9 @@ $toolbar-md-title-font-size:             2rem !default;
 $toolbar-md-button-font-size:            1.4rem !default;
 $navbar-md-height:                       $toolbar-md-height !default;
 
+$bar-button-md-color:                    $toolbar-md-active-color !default;
+$bar-button-md-border-radius:            2px !default;
+
 
 .toolbar {
   padding: $toolbar-md-padding;
@@ -78,7 +81,6 @@ ion-title {
 // --------------------------------------------------
 
 ion-buttons {
-  flex: 1;
   order: map-get($toolbar-order-md, buttons-start);
   transform: translateZ(0px);
 }
@@ -102,10 +104,138 @@ ion-buttons[right] {
 }
 
 
-// Material Design Toolbar Buttons
+// Material Design Toolbar Button Default
 // --------------------------------------------------
 
-// HI!
+.bar-button {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0 5px;
+  min-height: 32px;
+  border: 0;
+  font-size: $toolbar-md-button-font-size;
+  border-radius: $bar-button-md-border-radius;
+}
+
+@mixin md-bar-button-default($color-name, $color-value) {
+
+  .bar-button-#{$color-name} {
+    $fg-color: color-shade($color-value);
+    color: $fg-color;
+    background-color: transparent;
+
+    &:hover:not(.disable-hover) {
+      color: color-shade($fg-color);
+    }
+
+    &.activated {
+      opacity: 0.4;
+    }
+  }
+
+}
+
+
+// Material Design Toolbar Button Outline
+// --------------------------------------------------
+
+.bar-button-outline {
+  border-width: 1px;
+  border-style: solid;
+  border-color: $bar-button-md-color;
+  color: $bar-button-md-color;
+  background-color: transparent;
+
+  &:hover:not(.disable-hover) {
+    opacity: 0.4;
+  }
+
+  &.activated {
+    color: inverse($bar-button-md-color);
+    background-color: $bar-button-md-color;
+  }
+}
+
+@mixin md-bar-button-outline($color-name, $color-value) {
+
+  .bar-button-outline-#{$color-name} {
+    $fg-color: color-shade($color-value);
+    border-color: $fg-color;
+    color: $fg-color;
+    background-color: transparent;
+
+    &.activated {
+      color: inverse($fg-color);
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Material Design Toolbar Button Solid
+// --------------------------------------------------
+
+.bar-button-solid {
+  color: inverse($bar-button-md-color);
+  background-color: $bar-button-md-color;
+
+  &:hover:not(.disable-hover) {
+    opacity: 0.4;
+    color: inverse($bar-button-md-color);
+  }
+
+  &.activated {
+    opacity: 0.4;
+    color: inverse($bar-button-md-color);
+    background-color: color-shade($bar-button-md-color);
+  }
+}
+
+@mixin md-bar-button-solid($color-name, $color-value) {
+
+  .bar-button-solid-#{$color-name} {
+    color: inverse($color-value);
+    background-color: $color-value;
+
+    &.activated {
+      background-color: color-shade($color-value);
+    }
+  }
+
+}
+
+
+// Material Design Toolbar Button Icon
+// --------------------------------------------------
+
+.bar-button-icon-left icon {
+  margin-left: -0.1em;
+  padding-right: 0.3em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+
+.bar-button-icon-right icon {
+  margin-right: -0.2em;
+  padding-left: 0.4em;
+  font-size: 1.4em;
+  line-height: 0.67;
+  pointer-events: none;
+}
+
+.bar-button-icon-only {
+  padding: 0;
+  min-width: 0.9em;
+
+  icon {
+    padding: 0 0.1em;
+    font-size: 1.8em;
+    line-height: 0.67;
+    pointer-events: none;
+  }
+}
 
 
 // Material Design Toolbar Back Button
@@ -150,6 +280,11 @@ ion-buttons[right] {
 // Material Design Toolbar Color Generation
 // --------------------------------------------------
 
+@include md-bar-button-default(default, $bar-button-md-color);
+
 @each $color-name, $color-value in $colors-md {
   @include md-toolbar-theme($color-name, $color-value);
+  @include md-bar-button-default($color-name, $color-value);
+  @include md-bar-button-outline($color-name, $color-value);
+  @include md-bar-button-solid($color-name, $color-value);
 }

From 3143091d63a6fd8ee45803e00f04a332111c7020 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 16:45:24 -0600
Subject: [PATCH 055/100] md segment wip

---
 ionic/components/segment/modes/md.scss  | 56 +++++++++++--------------
 ionic/components/segment/segment.scss   | 46 ++++++++++----------
 ionic/components/segment/segment.ts     |  6 +--
 ionic/components/toolbar/modes/ios.scss | 16 +++----
 4 files changed, 59 insertions(+), 65 deletions(-)

diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index 896a7b63a2..aae45fcda5 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -13,28 +13,24 @@ $segment-button-md-border-color-activated:     map-get($colors-md, primary) !def
 $segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;
 
 
-ion-segment {
+.segment-button {
+  border-width: 0;
+  transition: 100ms all linear;
+  font-size: $segment-button-md-font-size;
+  opacity: 0.7;
 
-  button,
-  [button] {
-    border-width: 0;
-    transition: 100ms all linear;
-    font-size: $segment-button-md-font-size;
-    opacity: 0.7;
+  min-height: $segment-button-md-min-height;
+  line-height: $segment-button-md-line-height;
 
-    min-height: $segment-button-md-min-height;
-    line-height: $segment-button-md-line-height;
-
-    &.activated, &.segment-activated {
-      color: $segment-button-md-text-color-activated;
-      background-color: transparent;
-      border-color: $segment-button-md-border-color-activated;
-    }
-
-    border-radius: 0;
-    border-bottom: $segment-button-md-border-bottom;
+  &.activated,
+  &.segment-activated {
+    color: $segment-button-md-text-color-activated;
+    background-color: transparent;
+    border-color: $segment-button-md-border-color-activated;
   }
 
+  border-radius: 0;
+  border-bottom: $segment-button-md-border-bottom;
 }
 
 .toolbar {
@@ -42,8 +38,8 @@ ion-segment {
   ion-segment {
     margin: 0 auto;
 
-    ion-segment-button[button][outline].activated,
-    ion-segment-button[button][outline].segment-activated {
+    .segment-button.activated,
+    .segment-button.segment-activated {
       background-color: transparent;
       opacity: 1;
     }
@@ -57,15 +53,13 @@ ion-segment {
 @mixin segment-button($button-color) {
   background-color: transparent;
 
-  &[outline] {
-    color: $button-color;
+  color: $button-color;
 
-    &.activated, &.segment-activated {
-      background-color: transparent;
-      color: $button-color;
-      border-color: $button-color;
-      opacity: 1;
-    }
+  &.activated, &.segment-activated {
+    background-color: transparent;
+    color: $button-color;
+    border-color: $button-color;
+    opacity: 1;
   }
 }
 
@@ -78,7 +72,7 @@ ion-segment {
   .toolbar[#{$color-name}] {
 
     ion-segment {
-      ion-segment-button[button] {
+      .segment-button {
         @include segment-button($inverse-color-value);
       }
     }
@@ -88,7 +82,7 @@ ion-segment {
     // this will take priority over the default toolbar colors
     @each $color-name, $color-value in $colors-md {
       ion-segment[#{$color-name}] {
-        ion-segment-button[button] {
+        .segment-button {
           @include segment-button($color-value);
         }
       }
@@ -97,7 +91,7 @@ ion-segment {
   }
 
   ion-segment[#{$color-name}] {
-    ion-segment-button[button] {
+    .segment-button {
       @include segment-button($color-value);
     }
 
diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss
index 821d6da4b6..92058a7a08 100644
--- a/ionic/components/segment/segment.scss
+++ b/ionic/components/segment/segment.scss
@@ -7,33 +7,31 @@ $segment-button-padding:    0 16px !default;
 
 
 ion-segment {
-
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 1;
   width: 100%;
-
-  button,
-  [button] {
-
-    margin-left: 0;
-    margin-right: 0;
-
-    flex: 1;
-    display: block;
-    overflow: hidden;
-
-    padding: $segment-button-padding;
-    width: 0;
-
-    border-width: 1px 0px 1px 1px;
-    border-radius: 0;
-
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    background: none;
-  }
+}
+
+.segment-button {
+  position: relative;
+  overflow: hidden;
+  display: block;
+
+  margin-left: 0;
+  margin-right: 0;
+  padding: $segment-button-padding;
+
+  flex: 1;
+  width: 0;
+
+  border-width: 1px 0px 1px 1px;
+  border-radius: 0;
+
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  background: none;
 }
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index 9c6a262de5..958cace5aa 100644
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -177,7 +177,7 @@ export class Segment extends Ion {
   ],
   host: {
     '(click)': 'click($event)',
-    '[class.segment-activated]': 'isActive',
+    '[class.segment-activated]': 'isActive'
   }
 })
 export class SegmentButton {
@@ -189,8 +189,8 @@ export class SegmentButton {
   ) {
     this.segment = segment;
 
-    renderer.setElementAttribute(elementRef, 'button', '');
-    renderer.setElementAttribute(elementRef, 'outline', '');
+    renderer.setElementClass(elementRef, 'segment-button', true);
+    renderer.setElementAttribute(elementRef, 'tappable', '');
   }
 
   /**
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 6bdfcd5687..98424535d1 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -274,14 +274,16 @@ ion-buttons[right] {
 // iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
-[menu-toggle] {
-  order: map-get($toolbar-order-ios, menu-toggle-start);
-  cursor: pointer;
-}
+.toolbar {
+  [menu-toggle] {
+    order: map-get($toolbar-order-ios, menu-toggle-start);
+    cursor: pointer;
+  }
 
-[menu-toggle][end],
-[menu-toggle][right] {
-  order: map-get($toolbar-order-ios, menu-toggle-end);
+  [menu-toggle][end],
+  [menu-toggle][right] {
+    order: map-get($toolbar-order-ios, menu-toggle-end);
+  }
 }
 
 ion-segment-button[button] {

From 46d129ce245446db23a79e268fd25c4d2f456fc2 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 7 Dec 2015 18:17:15 -0500
Subject: [PATCH 056/100] refactor(checkbox): added tons of vars and modified
 some, flattened markup, renamed elements

changed color of checkmark so lighters backgrounds would be visible &
added the light example, references #689
---
 ionic/components/checkbox/checkbox.ts         |  2 +-
 ionic/components/checkbox/modes/ios.scss      | 52 +++++++++-----
 ionic/components/checkbox/modes/md.scss       | 67 +++++++++++++------
 ionic/components/checkbox/test/basic/e2e.ts   |  2 +-
 .../components/checkbox/test/basic/main.html  |  4 ++
 5 files changed, 87 insertions(+), 40 deletions(-)

diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 50f4ee7c96..0bcb708cc3 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -39,7 +39,7 @@ import {Form} from '../../util/form';
   },
   template:
     '<div class="item-inner">' +
-      '<div class="media-checkbox" disable-activated>' +
+      '<div class="checkbox-media" disable-activated>' +
         '<div class="checkbox-icon"></div>' +
       '</div>' +
       '<ion-item-content id="{{labelId}}">' +
diff --git a/ionic/components/checkbox/modes/ios.scss b/ionic/components/checkbox/modes/ios.scss
index 1999356935..e604762cb2 100644
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -1,15 +1,27 @@
 @import "../../../globals.ios";
 
-
 // iOS Checkbox Structure
 // --------------------------------------------------
 
-$checkbox-ios-icon-size:             21px !default;
-$checkbox-ios-background-color-off:  $list-ios-background-color !default;
-$checkbox-ios-border-color-off:      $list-ios-border-color !default;
-$checkbox-ios-background-color-on:   map-get($colors-ios, primary) !default;
-$checkbox-ios-border-color-on:       map-get($colors-ios, primary) !default;
-$checkbox-ios-checkmark-color-on:    $background-ios-color !default;
+
+$checkbox-ios-background-color-off:       $list-ios-background-color !default;
+$checkbox-ios-background-color-on:        map-get($colors-ios, primary) !default;
+
+$checkbox-ios-icon-size:                  21px !default;
+$checkbox-ios-icon-border-color-on:       map-get($colors-ios, primary) !default;
+$checkbox-ios-icon-border-color-off:      $list-ios-border-color !default;
+$checkbox-ios-icon-border-width:          1px !default;
+$checkbox-ios-icon-border-style:          solid !default;
+$checkbox-ios-icon-border-radius:         50% !default;
+
+$checkbox-ios-icon-checkmark-width:       1px !default;
+$checkbox-ios-icon-checkmark-style:       solid !default;
+$checkbox-ios-icon-checkmark-color:       $background-ios-color !default;
+
+$checkbox-ios-media-margin:               $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default;
+
+$checkbox-ios-disabled-opacity:           0.5 !default;
+$checkbox-ios-disabled-text-color:        $subdued-text-ios-color !default;
 
 
 ion-checkbox {
@@ -18,12 +30,14 @@ ion-checkbox {
 
   &[aria-checked=true] .checkbox-icon {
     background-color: $checkbox-ios-background-color-on;
-    border-color: $checkbox-ios-border-color-on;
+    border-color: $checkbox-ios-icon-border-color-on;
   }
 
   &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
-    border: 1px solid $checkbox-ios-checkmark-color-on;
+    border-width: $checkbox-ios-icon-checkmark-width;
+    border-style: $checkbox-ios-icon-checkmark-style;
+    border-color: $checkbox-ios-icon-checkmark-color;
     top: 3px;
     left: 7px;
     width: 4px;
@@ -35,19 +49,19 @@ ion-checkbox {
   }
 
   &.item.activated {
-    background-color: $list-ios-background-color;
+    background-color: $checkbox-ios-background-color-off;
   }
 
 }
 
 ion-checkbox[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-ios-color;
+  opacity: $checkbox-ios-disabled-opacity;
+  color: $checkbox-ios-disabled-text-color;
   pointer-events: none;
 }
 
-.media-checkbox {
-  margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px;
+.checkbox-media {
+  margin: $checkbox-ios-media-margin;
 }
 
 .checkbox-icon {
@@ -55,8 +69,10 @@ ion-checkbox[aria-disabled=true] {
   display: block;
   width: $checkbox-ios-icon-size;
   height: $checkbox-ios-icon-size;
-  border-radius: 50%;
-  border: 1px solid $checkbox-ios-border-color-off;
+  border-radius: $checkbox-ios-icon-border-radius;
+  border-width: $checkbox-ios-icon-border-width;
+  border-style: $checkbox-ios-icon-border-style;
+  border-color: $checkbox-ios-icon-border-color-off;
   background-color: $checkbox-ios-background-color-off;
 }
 
@@ -69,6 +85,10 @@ ion-checkbox[aria-disabled=true] {
   ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
+
+    &:after {
+      border-color: inverse($bg-on);
+    }
   }
 
 }
diff --git a/ionic/components/checkbox/modes/md.scss b/ionic/components/checkbox/modes/md.scss
index 528a216b1b..1d280bff94 100644
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -3,14 +3,28 @@
 // Material Design Checkbox
 // --------------------------------------------------
 
-$checkbox-md-icon-size:             16px !default;
-$checkbox-md-background-color-off:  $list-md-background-color !default;
-$checkbox-md-border-width:          2px !default;
-$checkbox-md-border-radius:         2px !default;
-$checkbox-md-border-color-off:      darken($list-md-border-color, 40%) !default;
-$checkbox-md-background-color-on:   map-get($colors-md, primary) !default;
-$checkbox-md-border-color-on:       map-get($colors-md, primary) !default;
-$checkbox-md-checkmark-color-on:    $background-md-color !default;
+$checkbox-md-border-bottom-width:        1px !default;
+$checkbox-md-border-bottom-style:        solid !default;
+$checkbox-md-border-bottom-color:        $list-md-border-color !default;
+$checkbox-md-padding:                    $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default;
+$checkbox-md-margin:                     0 !default;
+$checkbox-md-media-margin:               $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default;
+$checkbox-md-disabled-opacity:           0.5 !default;
+$checkbox-md-disabled-text-color:        $subdued-text-md-color !default;
+
+$checkbox-md-icon-background-color-off:  $list-md-background-color !default;
+$checkbox-md-icon-background-color-on:   map-get($colors-md, primary) !default;
+$checkbox-md-icon-size:                  16px !default;
+
+$checkbox-md-icon-checkmark-width:       2px !default;
+$checkbox-md-icon-checkmark-style:       solid !default;
+$checkbox-md-icon-checkmark-color:       $background-md-color !default;
+
+$checkbox-md-icon-border-width:          2px !default;
+$checkbox-md-icon-border-style:          solid !default;
+$checkbox-md-icon-border-radius:         2px !default;
+$checkbox-md-icon-border-color-off:      darken($list-md-border-color, 40%) !default;
+$checkbox-md-icon-border-color-on:       map-get($colors-md, primary) !default;
 
 
 ion-checkbox {
@@ -23,19 +37,23 @@ ion-checkbox {
   }
 
   ion-item-content {
-    border-bottom: 1px solid $list-md-border-color;
-    margin: 0;
-    padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0;
+    border-bottom-width: $checkbox-md-border-bottom-width;
+    border-bottom-style: $checkbox-md-border-bottom-style;
+    border-bottom-color: $checkbox-md-border-bottom-color;
+    margin: $checkbox-md-margin;
+    padding: $checkbox-md-padding;
   }
 
   &[aria-checked=true] .checkbox-icon {
-    background-color: $checkbox-md-background-color-on;
-    border-color: $checkbox-md-border-color-on;
+    background-color: $checkbox-md-icon-background-color-on;
+    border-color: $checkbox-md-icon-border-color-on;
   }
 
   &[aria-checked=true] .checkbox-icon:after {
     position: absolute;
-    border: 2px solid $checkbox-md-checkmark-color-on;
+    border-width: $checkbox-md-icon-checkmark-width;
+    border-style: $checkbox-md-icon-checkmark-style;
+    border-color: $checkbox-md-icon-checkmark-color;
     top: 0;
     left: 3px;
     width: 4px;
@@ -49,23 +67,24 @@ ion-checkbox {
 }
 
 ion-checkbox[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-md-color;
+  opacity: $checkbox-md-disabled-opacity;
+  color: $checkbox-md-disabled-text-color;
   pointer-events: none;
 }
 
-.media-checkbox {
-  // TODO convert these to sass variables
-  margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px;
+.checkbox-media {
+  margin: $checkbox-md-media-margin;
 }
 
 .checkbox-icon {
   position: relative;
   width: $checkbox-md-icon-size;
   height: $checkbox-md-icon-size;
-  border-radius: $checkbox-md-border-radius;
-  border: $checkbox-md-border-width solid $checkbox-md-border-color-off;
-  background-color: $checkbox-md-background-color-off;
+  border-radius: $checkbox-md-icon-border-radius;
+  border-width: $checkbox-md-icon-border-width;
+  border-style: $checkbox-md-icon-border-style;
+  border-color: $checkbox-md-icon-border-color-off;
+  background-color: $checkbox-md-icon-background-color-off;
 }
 
 
@@ -77,6 +96,10 @@ ion-checkbox[aria-disabled=true] {
   ion-checkbox[#{$color-name}][aria-checked=true] .checkbox-icon {
     background-color: $bg-on;
     border-color: $bg-on;
+
+    &:after {
+      border-color: inverse($bg-on);
+    }
   }
 
 }
diff --git a/ionic/components/checkbox/test/basic/e2e.ts b/ionic/components/checkbox/test/basic/e2e.ts
index 3518ab9d8e..38ebef5a81 100644
--- a/ionic/components/checkbox/test/basic/e2e.ts
+++ b/ionic/components/checkbox/test/basic/e2e.ts
@@ -1,6 +1,6 @@
 
 it('should check apple, enable/check grape, submit form', function() {
-  element(by.css('[ng-control=appleCtrl] media-checkbox')).click();
+  element(by.css('[ng-control=appleCtrl] .checkbox-media')).click();
   element(by.css('.e2eGrapeDisabled')).click();
   element(by.css('.e2eGrapeChecked')).click();
   element(by.css('.e2eSubmit')).click();
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index b34a99b90c..775e4af06a 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -28,6 +28,10 @@
         secondary color
       </ion-checkbox>
 
+      <ion-checkbox light checked="true">
+        light color
+      </ion-checkbox>
+
     </ion-list>
 
   </form>

From 66e13b890f4c577bb54516e4429d6f3539a68f20 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 20:36:14 -0600
Subject: [PATCH 057/100] update md segment

---
 ionic/components.ios.scss                     |   1 +
 ionic/components.md.scss                      |   1 +
 ionic/components/app/modes/ios.scss           |   2 -
 ionic/components/app/modes/md.scss            |   2 -
 ionic/components/app/normalize.scss           |   5 +-
 ionic/components/segment/modes/ios.scss       |  10 ++
 ionic/components/segment/modes/md.scss        | 113 ++++++++----------
 ionic/components/segment/segment.scss         |  10 +-
 ionic/components/segment/test/basic/main.html |  16 +--
 ionic/components/toolbar/modes/ios.scss       |   7 --
 10 files changed, 70 insertions(+), 97 deletions(-)

diff --git a/ionic/components.ios.scss b/ionic/components.ios.scss
index de8547e44f..d3cee062eb 100644
--- a/ionic/components.ios.scss
+++ b/ionic/components.ios.scss
@@ -5,6 +5,7 @@
 
 // iOS Components
 @import
+  "components/app/modes/ios",
   "components/action-sheet/modes/ios",
   "components/button/modes/ios",
   "components/card/modes/ios",
diff --git a/ionic/components.md.scss b/ionic/components.md.scss
index 7697e05245..55ed41bb6f 100644
--- a/ionic/components.md.scss
+++ b/ionic/components.md.scss
@@ -5,6 +5,7 @@
 
 // Material Design Components
 @import
+  "components/app/modes/md",
   "components/action-sheet/modes/md",
   "components/button/modes/md",
   "components/card/modes/md",
diff --git a/ionic/components/app/modes/ios.scss b/ionic/components/app/modes/ios.scss
index 287e1223bf..d022bfca8e 100644
--- a/ionic/components/app/modes/ios.scss
+++ b/ionic/components/app/modes/ios.scss
@@ -9,8 +9,6 @@ a {
 }
 
 hr {
-  border-width: 0;
-  height: 1px;
   background-color: rgba(0, 0, 0, 0.12);
 }
 
diff --git a/ionic/components/app/modes/md.scss b/ionic/components/app/modes/md.scss
index c35583327d..058c7d4e57 100644
--- a/ionic/components/app/modes/md.scss
+++ b/ionic/components/app/modes/md.scss
@@ -9,8 +9,6 @@ a {
 }
 
 hr {
-  border-width: 0;
-  height: 1px;
   background-color: rgba(0, 0, 0, 0.08);
 }
 
diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index 52325bb6fb..1e2ac8e403 100644
--- a/ionic/components/app/normalize.scss
+++ b/ionic/components/app/normalize.scss
@@ -52,11 +52,10 @@ figure {
   margin: 1em 40px;
 }
 
-// Address differences between Firefox and other browsers.
 hr {
-  -moz-box-sizing: content-box;
   box-sizing: content-box;
-  height: 0;
+  height: 1px;
+  border-width: 0;
 }
 
 // Contain overflow in all browsers.
diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index 51269fc009..5905a62053 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -18,11 +18,15 @@ $segment-button-ios-hover-opacity:            0.16 !default;
 
 $segment-button-ios-toolbar-button-max-width: 100px !default;
 
+$segment-button-ios-padding:    0 16px !default;
+
 
 ion-segment {
+  padding: $segment-button-ios-padding;
 
   button,
   [button] {
+    border-width: 1px 0px 1px 1px;
     border-width: $segment-button-ios-border-width;
     border-style: solid;
 
@@ -68,6 +72,12 @@ ion-segment {
 
 }
 
+ion-segment-button[button] {
+  line-height: 2.4rem;
+  min-height: 2.4rem;
+  font-size: 1.2rem;
+}
+
 .toolbar {
 
   // TODO this is to get the segment centered with nav-items, but like ion-title it will need to be fixed
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index aae45fcda5..44a14d4005 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -1,99 +1,80 @@
 @import "../../../globals.md";
 @import "../segment";
 
-// iOS Segment
+// Material Design Segment
 // --------------------------------------------------
 
-$segment-button-md-font-size:                  1.2rem !default;
+$segment-button-md-padding:                    0 6px !default;
 $segment-button-md-min-height:                 4.0rem !default;
 $segment-button-md-line-height:                4.0rem !default;
+$segment-button-md-font-size:                  1.2rem !default;
 
-$segment-button-md-text-color-activated:       map-get($colors-md, primary) !default;
-$segment-button-md-border-color-activated:     map-get($colors-md, primary) !default;
-$segment-button-md-border-bottom:              2px solid rgba(#000000, 0.10) !default;
+$segment-button-md-text-color-activated:       $toolbar-md-active-color !default;
+$segment-button-md-border-color-activated:     $toolbar-md-active-color !default;
+$segment-button-md-border-bottom-width:        2px !default;
+$segment-button-md-border-bottom-color:        rgba(#000000, 0.10) !default;
 
 
 .segment-button {
-  border-width: 0;
-  transition: 100ms all linear;
-  font-size: $segment-button-md-font-size;
-  opacity: 0.7;
+  padding: $segment-button-md-padding;
+  border-bottom-width: $segment-button-md-border-bottom-width;
+  border-bottom-style: solid;
+  border-bottom-color: $segment-button-md-border-bottom-color;
 
   min-height: $segment-button-md-min-height;
   line-height: $segment-button-md-line-height;
 
+  font-size: $segment-button-md-font-size;
+  text-transform: uppercase;
+  font-weight: 500;
+
+  opacity: 0.7;
+  color: $segment-button-md-text-color-activated;
+  background-color: transparent;
+  transition: 100ms all linear;
+
   &.activated,
   &.segment-activated {
-    color: $segment-button-md-text-color-activated;
-    background-color: transparent;
     border-color: $segment-button-md-border-color-activated;
   }
-
-  border-radius: 0;
-  border-bottom: $segment-button-md-border-bottom;
 }
 
 .toolbar {
 
   ion-segment {
     margin: 0 auto;
-
-    .segment-button.activated,
-    .segment-button.segment-activated {
-      background-color: transparent;
-      opacity: 1;
-    }
   }
 
-}
-
-// Generate Default Segment Colors
-// --------------------------------------------------
-
-@mixin segment-button($button-color) {
-  background-color: transparent;
-
-  color: $button-color;
-
-  &.activated, &.segment-activated {
-    background-color: transparent;
-    color: $button-color;
-    border-color: $button-color;
+  .segment-button.activated,
+  .segment-button.segment-activated {
     opacity: 1;
   }
+
 }
 
-// Loop through all of the colors to change the segment colors
-// based on the toolbar color or if it isn't in a toolbar then based on
-// the segment color value
+
+// Material Design Segment Button Mixin
+// --------------------------------------------------
+
+@mixin md-segment-button($color-name, $color-value) {
+
+  ion-segment[#{$color-name}] .segment-button {
+    color: $color-value;
+
+    &.activated,
+    &.segment-activated {
+      opacity: 1;
+      border-color: $color-value;
+      color: $color-value;
+    }
+  }
+
+}
+
+
+// Material Design Segment Color Generation
+// --------------------------------------------------
+
 @each $color-name, $color-value in $colors-md {
-  $inverse-color-value: inverse($color-value);
-
-  .toolbar[#{$color-name}] {
-
-    ion-segment {
-      .segment-button {
-        @include segment-button($inverse-color-value);
-      }
-    }
-
-    // Loop through all of the colors again to change the segment colors
-    // for each toolbar based on the segment color
-    // this will take priority over the default toolbar colors
-    @each $color-name, $color-value in $colors-md {
-      ion-segment[#{$color-name}] {
-        .segment-button {
-          @include segment-button($color-value);
-        }
-      }
-    }
-
-  }
-
-  ion-segment[#{$color-name}] {
-    .segment-button {
-      @include segment-button($color-value);
-    }
-
-  }
+  @include md-segment-button($color-name, $color-value);
 }
diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss
index 92058a7a08..b9e596d6e8 100644
--- a/ionic/components/segment/segment.scss
+++ b/ionic/components/segment/segment.scss
@@ -3,8 +3,6 @@
 // Segment
 // --------------------------------------------------
 
-$segment-button-padding:    0 16px !default;
-
 
 ion-segment {
   display: flex;
@@ -16,22 +14,16 @@ ion-segment {
 
 .segment-button {
   position: relative;
-  overflow: hidden;
   display: block;
 
   margin-left: 0;
   margin-right: 0;
-  padding: $segment-button-padding;
 
   flex: 1;
   width: 0;
 
-  border-width: 1px 0px 1px 1px;
-  border-radius: 0;
-
+  overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
-
-  background: none;
 }
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index f923dfeaab..6a84043f38 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -25,8 +25,8 @@
   </ion-segment>
 </ion-toolbar>
 
-<ion-content padding>
-  <p>Are we friends or enemies? <b>{{ relationship }}</b></p>
+<div padding>
+  <div>Are we friends or enemies? <b>{{ relationship }}</b></div>
 
   <h4>Map mode: NgControl</h4>
 
@@ -80,10 +80,10 @@
   </ion-segment>
 
   <p>Model Style: <b>Model {{ modelStyle }}</b></p>
-</ion-content>
+</div>
 
 <ion-toolbar position="bottom" primary>
-  <ion-segment [(ng-model)]="appType">
+  <ion-segment [(ng-model)]="appType" light>
     <ion-segment-button value="paid">
       Primary
     </ion-segment-button>
@@ -96,8 +96,8 @@
   </ion-segment>
 </ion-toolbar>
 
-<ion-toolbar position="bottom" light>
-  <ion-segment [(ng-model)]="appType" primary>
+<ion-toolbar position="bottom">
+  <ion-segment [(ng-model)]="appType" danger>
     <ion-segment-button value="paid">
       Light
     </ion-segment-button>
@@ -110,8 +110,8 @@
   </ion-segment>
 </ion-toolbar>
 
-<ion-toolbar position="bottom" light>
-  <ion-segment [(ng-model)]="appType">
+<ion-toolbar position="bottom">
+  <ion-segment [(ng-model)]="appType" dark>
     <ion-segment-button value="paid">
       Light
     </ion-segment-button>
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 98424535d1..4145e568a5 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -277,7 +277,6 @@ ion-buttons[right] {
 .toolbar {
   [menu-toggle] {
     order: map-get($toolbar-order-ios, menu-toggle-start);
-    cursor: pointer;
   }
 
   [menu-toggle][end],
@@ -286,12 +285,6 @@ ion-buttons[right] {
   }
 }
 
-ion-segment-button[button] {
-  line-height: 2.4rem;
-  min-height: 2.4rem;
-  font-size: 1.2rem;
-}
-
 
 // iOS Toolbar Color Generation
 // --------------------------------------------------

From d8e82bb2c752426de55ff1c96d484698d3c65cd8 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 22:01:57 -0600
Subject: [PATCH 058/100] iOS segment buttons

---
 ionic/components/segment/modes/ios.scss | 183 +++++++++---------------
 ionic/components/segment/modes/md.scss  |  11 +-
 ionic/components/segment/segment.ts     |   2 +-
 3 files changed, 77 insertions(+), 119 deletions(-)

diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index 5905a62053..15259a4fd3 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -4,154 +4,111 @@
 // iOS Segment
 // --------------------------------------------------
 
-$segment-button-ios-border-width:             1px !default;
-$segment-button-ios-min-height:               3.0rem !default;
-$segment-button-ios-line-height:              3.0rem !default;
 $segment-button-ios-bg-color:                 transparent !default;
-$segment-button-ios-font-size:                1.3rem !default;
-$segment-button-ios-border-radius:            4px !default;
+$segment-button-ios-bg-color-activated:       $toolbar-ios-active-color !default;
 
-$segment-button-ios-bg-color-activated:       map-get($colors-ios, primary) !default;
 $segment-button-ios-text-color:               inverse($segment-button-ios-bg-color-activated) !default;
 $segment-button-ios-activated-transition:     100ms all linear !default;
 $segment-button-ios-hover-opacity:            0.16 !default;
 
-$segment-button-ios-toolbar-button-max-width: 100px !default;
+$segment-button-ios-border-width:             1px !default;
+$segment-button-ios-min-height:               3.0rem !default;
+$segment-button-ios-line-height:              3.0rem !default;
+$segment-button-ios-font-size:                1.3rem !default;
+$segment-button-ios-border-radius:            4px !default;
 
-$segment-button-ios-padding:    0 16px !default;
+$segment-button-ios-toolbar-button-max-width: 100px !default;
+$segment-button-ios-padding:                  0 16px !default;
 
 
 ion-segment {
   padding: $segment-button-ios-padding;
-
-  button,
-  [button] {
-    border-width: 1px 0px 1px 1px;
-    border-width: $segment-button-ios-border-width;
-    border-style: solid;
-
-    min-height: $segment-button-ios-min-height;
-    line-height: $segment-button-ios-line-height;
-
-    background-color: $segment-button-ios-bg-color;
-    color: $segment-button-ios-text-color;
-    font-size: $segment-button-ios-font-size;
-
-    &[outline] {
-      border: 1px solid $segment-button-ios-bg-color-activated;
-      background: $segment-button-ios-bg-color;
-      color: $segment-button-ios-bg-color-activated;
-
-      &.segment-activated {
-        opacity: 1;
-        color: $segment-button-ios-text-color;
-        background-color: $segment-button-ios-bg-color-activated;
-        transition: $segment-button-ios-activated-transition;
-      }
-
-      &:hover:not(.segment-activated) {
-        background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
-      }
-    }
-
-    &:first-of-type {
-      border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
-      margin-right: 0;
-    }
-
-    &:not(:first-of-type) {
-      border-left-width: 0;
-    }
-
-    &:last-of-type {
-      border-left-width: 0;
-      border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
-      margin-left: 0;
-    }
-  }
-
 }
 
-ion-segment-button[button] {
-  line-height: 2.4rem;
-  min-height: 2.4rem;
-  font-size: 1.2rem;
+.segment-button {
+  min-height: $segment-button-ios-min-height;
+  line-height: $segment-button-ios-line-height;
+  font-size: $segment-button-ios-font-size;
+
+  border-width: $segment-button-ios-border-width;
+  border-style: solid;
+  border-color: $segment-button-ios-bg-color-activated;
+
+  color: $segment-button-ios-bg-color-activated;
+  background-color: $segment-button-ios-bg-color;
+
+  &.segment-activated {
+    opacity: 1;
+    color: $segment-button-ios-text-color;
+    background-color: $segment-button-ios-bg-color-activated;
+    transition: $segment-button-ios-activated-transition;
+  }
+
+  &:hover:not(.segment-activated) {
+    background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
+  }
+
+  &:first-of-type {
+    border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius;
+    margin-right: 0;
+  }
+
+  &:not(:first-of-type) {
+    border-left-width: 0;
+  }
+
+  &:last-of-type {
+    border-left-width: 0;
+    border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0;
+    margin-left: 0;
+  }
 }
 
 .toolbar {
 
-  // TODO this is to get the segment centered with nav-items, but like ion-title it will need to be fixed
   ion-segment {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
-
-    button,
-    [button] {
-      max-width: $segment-button-ios-toolbar-button-max-width;
-    }
   }
 
+  .segment-button {
+    max-width: $segment-button-ios-toolbar-button-max-width;
+    min-height: 2.4rem;
+    line-height: 2.4rem;
+    font-size: 1.2rem;
+  }
 }
 
-// Generate Default Segment Colors
+
+// iOS Segment Button Mixin
 // --------------------------------------------------
 
-@mixin segment-button($button-color, $activated-text-color) {
-  background-color: transparent;
+@mixin ios-segment-button($color-name, $color-value) {
 
-  &[outline] {
-    border-color: $button-color;
-    background: $segment-button-ios-bg-color;
-    color: $button-color;
-
-    &.segment-activated {
-      opacity: 1;
-      color: $activated-text-color;
-      background-color: $button-color;
-    }
+  ion-segment[#{$color-name}] .segment-button {
+    border-color: $color-value;
+    color: $color-value;
 
     &:hover:not(.segment-activated) {
-      background-color: rgba($button-color, $segment-button-ios-hover-opacity);
+      background-color: rgba($color-value, $segment-button-ios-hover-opacity);
+    }
+
+    &.activated,
+    &.segment-activated {
+      color: inverse($color-value);
+      background-color: $color-value;
     }
   }
+
 }
 
-// Loop through all of the colors to change the segment colors
-// based on the toolbar color or if it isn't in a toolbar then based on
-// the segment color value
+
+// iOS Segment Color Generation
+// --------------------------------------------------
+
 @each $color-name, $color-value in $colors-ios {
-  $inverse-color-value: inverse($color-value);
-
-  .toolbar[#{$color-name}] {
-
-    ion-segment {
-      ion-segment-button[button] {
-        @include segment-button($inverse-color-value, $color-value);
-      }
-    }
-
-    // Loop through all of the colors again to change the segment colors
-    // for each toolbar based on the segment color
-    // this will take priority over the default toolbar colors
-    @each $color-name, $color-value in $colors-ios {
-      $inverse-color-value: inverse($color-value);
-
-      ion-segment[#{$color-name}] {
-        ion-segment-button[button] {
-          @include segment-button($color-value, $inverse-color-value);
-        }
-      }
-    }
-
-  }
-
-  ion-segment[#{$color-name}] {
-    ion-segment-button[button] {
-      @include segment-button($color-value, $inverse-color-value);
-    }
-
-  }
+  @include ios-segment-button($color-name, $color-value);
 }
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index 44a14d4005..274e18e6d3 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -4,16 +4,17 @@
 // Material Design Segment
 // --------------------------------------------------
 
+$segment-button-md-text-color-activated:       $toolbar-md-active-color !default;
+$segment-button-md-border-color-activated:     $toolbar-md-active-color !default;
+
+$segment-button-md-border-bottom-width:        2px !default;
+$segment-button-md-border-bottom-color:        rgba(#000000, 0.10) !default;
+
 $segment-button-md-padding:                    0 6px !default;
 $segment-button-md-min-height:                 4.0rem !default;
 $segment-button-md-line-height:                4.0rem !default;
 $segment-button-md-font-size:                  1.2rem !default;
 
-$segment-button-md-text-color-activated:       $toolbar-md-active-color !default;
-$segment-button-md-border-color-activated:     $toolbar-md-active-color !default;
-$segment-button-md-border-bottom-width:        2px !default;
-$segment-button-md-border-bottom-color:        rgba(#000000, 0.10) !default;
-
 
 .segment-button {
   padding: $segment-button-md-padding;
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index 958cace5aa..bffec63e0c 100644
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -140,7 +140,7 @@ export class Segment extends Ion {
  * @property {string} [value] - the value of the segment-button.
  * @usage
  * ```html
- * <ion-segment [(ng-model)]="relationship" danger>
+ * <ion-segment [(ng-model)]="relationship" primary>
  *   <ion-segment-button value="friends">
  *     Friends
  *   </ion-segment-button>

From 2bba23445e0d82991c895fa173f9b37cd9f344fb Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 08:47:57 -0600
Subject: [PATCH 059/100] iOS toolbar segment button color

---
 ionic/components/segment/modes/ios.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index 15259a4fd3..cc9feea7e5 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -111,4 +111,8 @@ ion-segment {
 
 @each $color-name, $color-value in $colors-ios {
   @include ios-segment-button($color-name, $color-value);
+
+  .toolbar[#{$color-name}] .segment-button.segment-activated {
+    color: $color-value;
+  }
 }

From 329007c716949199c34d918e29666ed65c58b030 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 10:52:07 -0500
Subject: [PATCH 060/100] refactor(radio): removed global radio file and moved
 to the modes

references #689
---
 ionic/components/radio/modes/ios.scss |  6 +++++-
 ionic/components/radio/modes/md.scss  |  6 +++++-
 ionic/components/radio/radio.scss     | 17 -----------------
 3 files changed, 10 insertions(+), 19 deletions(-)
 delete mode 100644 ionic/components/radio/radio.scss

diff --git a/ionic/components/radio/modes/ios.scss b/ionic/components/radio/modes/ios.scss
index 66f2dccd99..8663ad92fc 100644
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -1,5 +1,4 @@
 @import "../../../globals.ios";
-@import "../radio";
 
 // iOS Radio
 // --------------------------------------------------
@@ -12,9 +11,12 @@ $radio-ios-icon-border-width:      2px !default;
 $radio-ios-icon-border-style:      solid !default;
 
 $radio-ios-disabled-text-color:    $subdued-text-ios-color !default;
+$radio-ios-disabled-opacity:       0.5 !default;
 
 
 ion-radio {
+  cursor: pointer;
+  @include user-select-none();
 
   &[aria-checked=true] {
     color: $radio-ios-color-on;
@@ -43,6 +45,8 @@ ion-radio {
 
 ion-radio[aria-disabled=true] {
   color: $radio-ios-disabled-text-color;
+  opacity: $radio-ios-disabled-opacity;
+  pointer-events: none;
 }
 
 .radio-media {
diff --git a/ionic/components/radio/modes/md.scss b/ionic/components/radio/modes/md.scss
index cdf484c72d..c22a3eed03 100644
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -1,5 +1,4 @@
 @import "../../../globals.md";
-@import "../radio";
 
 // Material Design Radio
 // --------------------------------------------------
@@ -17,9 +16,12 @@ $radio-md-transition-duration:    280ms !default;
 $radio-md-transition-easing:      cubic-bezier(.4, 0, .2, 1) !default;
 
 $radio-md-disabled-text-color:    $subdued-text-md-color !default;
+$radio-md-disabled-opacity:       0.5 !default;
 
 
 ion-radio {
+  cursor: pointer;
+  @include user-select-none();
 
   &[aria-checked=true] {
     color: $radio-md-color-on;
@@ -37,6 +39,8 @@ ion-radio {
 
 ion-radio[aria-disabled=true] {
   color: $radio-md-disabled-text-color;
+  opacity: $radio-md-disabled-opacity;
+  pointer-events: none;
 }
 
 .radio-icon {
diff --git a/ionic/components/radio/radio.scss b/ionic/components/radio/radio.scss
deleted file mode 100644
index d164a64855..0000000000
--- a/ionic/components/radio/radio.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import "../../globals.core";
-
-// Radio
-// --------------------------------------------------
-
-$radio-disabled-opacity:       0.5 !default;
-
-
-ion-radio {
-  cursor: pointer;
-  @include user-select-none();
-}
-
-ion-radio[aria-disabled=true] {
-  opacity: $radio-disabled-opacity;
-  pointer-events: none;
-}

From cd40213495e60cc7b7388143772daaea78e93185 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 10:03:41 -0600
Subject: [PATCH 061/100] item wip

---
 ionic/components/item/item.scss      | 41 ++++++++++------------------
 ionic/components/item/modes/ios.scss |  6 ++--
 2 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 70d2ee88ab..44d4ec90d7 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -13,11 +13,15 @@
   margin: 0;
   padding: 0;
   border: 0;
+  width: 100%;
   min-height: 4.4rem;
-  text-align: initial;
   overflow: hidden;
 
-  box-sizing: border-box;
+  text-align: initial;
+  font-weight: normal;
+  line-height: normal;
+  text-decoration: none;
+  color: inherit;
 }
 
 .item-inner {
@@ -26,7 +30,6 @@
   padding: 0;
   border: 0;
   overflow: hidden;
-  box-sizing: border-box;
 
   flex: 1;
   flex-direction: inherit;
@@ -34,12 +37,9 @@
   align-self: stretch;
 }
 
-.item[no-lines] {
+.item[no-lines],
+.item[no-lines] .item-inner {
   border: none;
-
-  .item-inner {
-    border: none;
-  }
 }
 
 ion-item-group {
@@ -49,9 +49,9 @@ ion-item-group {
 ion-item-divider {
   display: block;
   min-height: 30px;
-  font-weight: 500;
   width: 100%;
   z-index: 1000;
+  font-weight: 500;
 
   &[sticky] {
     position: -webkit-sticky;
@@ -60,23 +60,6 @@ ion-item-divider {
   }
 }
 
-a.item,
-button.item {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  width: 100%;
-  justify-content: inherit;
-  min-height: 4.4rem;
-  font-weight: normal;
-  line-height: normal;
-  text-decoration: none;
-  text-transform: none;
-  color: inherit;
-  border-radius: 0;
-  box-shadow: none;
-}
-
 ion-item-content {
   margin: 0;
   flex: 1;
@@ -86,7 +69,8 @@ ion-item-content {
   pointer-events: none;
 
   a,
-  button {
+  button,
+  [tappable] {
     pointer-events: auto;
   }
 }
@@ -103,3 +87,6 @@ ion-input.item {
 ion-item-content + ion-item-content[cnt] {
   display: none;
 }
+
+@import "item-media";
+@import "item-sliding";
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 04c6fa75de..baf7060866 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -209,8 +209,6 @@ ion-item-divider {
 }
 
 
-&.hairlines {
-  .item-inner {
-    border-bottom-width: 0.55px;
-  }
+&.hairlines .item-inner {
+  border-bottom-width: 0.55px;
 }

From 7c3b642b683b292aa935c58d06e49b18a0b4bd93 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 10:03:56 -0600
Subject: [PATCH 062/100] create changelog

---
 CHANGELOG.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000000..2dab535261
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,25 @@
+<a name="2.0.0-alpha.41"></a>
+# 2.0.0-alpha.41 (2015-12-8)
+
+
+### Breaking Changes
+
+#### CSS Refactor
+
+* Attributes are now used by Ionic to add the correct CSS classes to elements
+* Drastically reduced the depth of CSS selectors
+* Further modularized Sass files to allow individual imports
+* Ionic CSS comes in 3 flavors
+    * `ionic.css`: Core CSS, iOS CSS, and Material Design CSS
+    * `ionic.ios.css`: Core CSS and iOS CSS
+    * `ionic.md.css`: Core CSS and Material Design CSS
+* App's `index.html` file can be setup to dynamically load only the stylesheet it needs
+* Different Sass color maps for iOS and Material Design
+    * Allows colors to be different per platform
+    * ie: Gray navbars in iOS, blue navbars in MD. Identical HTML/JS
+
+
+####  `<ion-nav-items>` renamed to `<ion-buttons>`
+
+* `primary` attribute `<ion-nav-items primary>` now `<ion-buttons start>`
+* `secondary` attribute `<ion-nav-items secondary>` now `<ion-buttons end>`

From 2b6aa10e05eef50ba79e1afe21c0aca01b04e2d6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 11:29:09 -0500
Subject: [PATCH 063/100] refactor(switch): changed some of the markup and
 flattened the css

references #689
---
 ionic/components/switch/modes/ios.scss    | 174 ++++++++++++----------
 ionic/components/switch/switch.scss       |  21 ---
 ionic/components/switch/switch.ts         |   8 +-
 ionic/components/switch/test/basic/e2e.ts |   2 +-
 4 files changed, 102 insertions(+), 103 deletions(-)
 delete mode 100644 ionic/components/switch/switch.scss

diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index e1d29da473..a96ab37399 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -1,5 +1,4 @@
 @import "../../../globals.ios";
-@import "../switch";
 
 // iOS Switch
 // --------------------------------------------------
@@ -21,108 +20,129 @@ $switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px
 
 $switch-ios-handle-background-color:   $switch-ios-background-color-off !default;
 
+$switch-ios-media-margin:              0 !default;
+$switch-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
+
 $switch-ios-transition-duration:       300ms !default;
 
+$switch-ios-disabled-opacity:          0.5 !default;
+$switch-ios-disabled-text-color:       $subdued-text-color !default;
+
 
 ion-switch {
+  display: block;
+  @include user-select-none();
 
   &.item.activated {
     background: $list-ios-background-color;
   }
+}
 
-  media-switch {
-    padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left);
-  }
-
-
-  // Switch Background Track
-  // -----------------------------------------
-
-  switch-icon {
-    // bg track, when not checked
-    position: relative;
-    display: block;
-    width: $switch-ios-width;
-    height: $switch-ios-height;
-    border-radius: $switch-ios-border-radius;
-    pointer-events: none;
-
-    background-color: $switch-ios-border-color-off;
-    will-change: background-color;
-    transition: background-color $switch-ios-transition-duration;
-  }
-
-  &[aria-checked=true] switch-icon {
+ion-switch[aria-checked=true] {
+  .switch-icon {
     // bg track, when checked
     background-color: $switch-ios-background-color-on;
+
+    &:before {
+      // inner bg track's oval, when checked
+      transform: scale3d(0, 0, 0);
+    }
+
+    &:after {
+      // knob, when checked
+      transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
+    }
   }
 
+  .switch-activated .switch-icon {
+    &:before {
+      // inner bg track's oval, when checked
+      transform: scale3d(0, 0, 0);
+    }
 
-  // Switch Background Track, Inner Oval
-  // -----------------------------------------
+    &:after {
+      // when pressing down on the switch and IS checked
+      // make the knob wider and move it left a bit
+      left: $switch-ios-border-width - 6;
 
-  switch-icon:before {
-    // inner bg track's oval, when not checked
-    content: '';
-    position: absolute;
-    top: $switch-ios-border-width;
-    right: $switch-ios-border-width;
-    left: $switch-ios-border-width;
-    bottom: $switch-ios-border-width;
-
-    border-radius: $switch-ios-border-radius;
-    background-color: $switch-ios-background-color-off;
-
-    will-change: transform;
-    transform: scale3d(1, 1, 1);
-    transition: transform $switch-ios-transition-duration;
+      // when pressing down on the switch and NOT checked
+      // then make the knob wider
+      width: $switch-ios-handle-width + 6;
+    }
   }
+}
 
-  &[aria-checked=true] switch-icon:before,
-  .switch-activated switch-icon:before {
-    // inner bg track's oval, when checked
-    transform: scale3d(0, 0, 0);
-  }
+// Switch Disabled
+// -----------------------------------------
 
+ion-switch[aria-disabled=true] {
+  opacity: $switch-ios-disabled-opacity;
+  color: $switch-ios-disabled-text-color;
+  pointer-events: none;
+}
 
-  // Switch Knob
-  // -----------------------------------------
+// Switch Wrapper
+// -----------------------------------------
 
-  switch-icon:after {
-    // knob, when not checked
-    content: '';
-    position: absolute;
-    top: $switch-ios-border-width;
-    left: $switch-ios-border-width;
+.switch-media {
+  margin: $switch-ios-media-margin;
+  cursor: pointer;
+  padding: $switch-ios-media-padding;
+}
 
-    width: $switch-ios-handle-width;
-    height: $switch-ios-handle-height;
+// Switch Background Track
+// -----------------------------------------
 
-    border-radius: $switch-ios-handle-radius;
-    background-color: $switch-ios-handle-background-color;
-    box-shadow: $switch-ios-handle-box-shadow;
+.switch-icon {
+  // bg track, when not checked
+  position: relative;
+  display: block;
+  width: $switch-ios-width;
+  height: $switch-ios-height;
+  border-radius: $switch-ios-border-radius;
+  pointer-events: none;
 
-    will-change: transform, width, left;
-    transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
-  }
+  background-color: $switch-ios-border-color-off;
+  transition: background-color $switch-ios-transition-duration;
+}
 
-  &[aria-checked=true] switch-icon:after {
-    // knob, when checked
-    transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
-  }
+// Switch Background Track, Inner Oval
+// -----------------------------------------
 
-  .switch-activated switch-icon:after {
-    // when pressing down on the switch and NOT checked
-    // then make the knob wider
-    width: $switch-ios-handle-width + 6;
-  }
+.switch-icon:before {
+  // inner bg track's oval, when not checked
+  content: '';
+  position: absolute;
+  top: $switch-ios-border-width;
+  right: $switch-ios-border-width;
+  left: $switch-ios-border-width;
+  bottom: $switch-ios-border-width;
 
-  &[aria-checked=true] .switch-activated switch-icon:after {
-    // when pressing down on the switch and IS checked
-    // make the knob wider and move it left a bit
-    left: $switch-ios-border-width - 6;
-  }
+  border-radius: $switch-ios-border-radius;
+  background-color: $switch-ios-background-color-off;
 
+  transform: scale3d(1, 1, 1);
+  transition: transform $switch-ios-transition-duration;
+}
+
+// Switch Knob
+// -----------------------------------------
+
+.switch-icon:after {
+  // knob, when not checked
+  content: '';
+  position: absolute;
+  top: $switch-ios-border-width;
+  left: $switch-ios-border-width;
+
+  width: $switch-ios-handle-width;
+  height: $switch-ios-handle-height;
+
+  border-radius: $switch-ios-handle-radius;
+  background-color: $switch-ios-handle-background-color;
+  box-shadow: $switch-ios-handle-box-shadow;
+
+  transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
 }
 
 
@@ -133,7 +153,7 @@ ion-switch {
 
   ion-switch[#{$color-name}] {
 
-    &[aria-checked=true] switch-icon {
+    &[aria-checked=true] .switch-icon {
       background-color: $bg-on;
     }
 
diff --git a/ionic/components/switch/switch.scss b/ionic/components/switch/switch.scss
deleted file mode 100644
index 1dcec2e97a..0000000000
--- a/ionic/components/switch/switch.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import "../../globals.core";
-
-// Switch
-// --------------------------------------------------
-
-
-ion-switch {
-  display: block;
-  @include user-select-none();
-}
-
-ion-switch media-switch {
-  margin: 0;
-  cursor: pointer;
-}
-
-ion-switch[aria-disabled=true] {
-  opacity: 0.5;
-  color: $subdued-text-color;
-  pointer-events: none;
-}
diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts
index 644ca18e37..05b1c19373 100644
--- a/ionic/components/switch/switch.ts
+++ b/ionic/components/switch/switch.ts
@@ -9,7 +9,7 @@ import {pointerCoord} from '../../util/dom';
  * @private
  */
 @Directive({
-  selector: 'media-switch',
+  selector: '.switch-media',
   host: {
     '[class.switch-activated]': 'swtch.isActivated'
   }
@@ -97,9 +97,9 @@ class MediaSwitch {
       '<ion-item-content id="{{labelId}}">' +
         '<ng-content></ng-content>' +
       '</ion-item-content>' +
-      '<media-switch disable-activated>' +
-        '<switch-icon></switch-icon>' +
-      '</media-switch>' +
+      '<div disable-activated class="switch-media">' +
+        '<div class="switch-icon"></div>' +
+      '</div>' +
     `</div>`,
   directives: [MediaSwitch]
 })
diff --git a/ionic/components/switch/test/basic/e2e.ts b/ionic/components/switch/test/basic/e2e.ts
index 9baa3e1550..6c4ea1b431 100644
--- a/ionic/components/switch/test/basic/e2e.ts
+++ b/ionic/components/switch/test/basic/e2e.ts
@@ -1,6 +1,6 @@
 
 it('should check apple via switch element click', function() {
-  element(by.css('[ng-control=appleCtrl] media-switch')).click();
+  element(by.css('[ng-control=appleCtrl] .switch-media')).click();
 });
 
 

From c1af0e741be340368153a767fcdc242456452671 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 11:44:15 -0500
Subject: [PATCH 064/100] refactor(switch): flattened markup and added some
 Sass vars

references #689
---
 ionic/components/switch/modes/ios.scss | 144 +++++++++++++------------
 ionic/components/switch/modes/md.scss  | 118 ++++++++++++--------
 2 files changed, 151 insertions(+), 111 deletions(-)

diff --git a/ionic/components/switch/modes/ios.scss b/ionic/components/switch/modes/ios.scss
index a96ab37399..22ac526f20 100644
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -15,7 +15,7 @@ $switch-ios-background-color-on:       map-get($colors-ios, primary) !default;
 
 $switch-ios-handle-width:              $switch-ios-height - ($switch-ios-border-width * 2) !default;
 $switch-ios-handle-height:             $switch-ios-handle-width !default;
-$switch-ios-handle-radius:             $switch-ios-handle-height / 2 !default;
+$switch-ios-handle-border-radius:      $switch-ios-handle-height / 2 !default;
 $switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
 
 $switch-ios-handle-background-color:   $switch-ios-background-color-off !default;
@@ -26,9 +26,12 @@ $switch-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($i
 $switch-ios-transition-duration:       300ms !default;
 
 $switch-ios-disabled-opacity:          0.5 !default;
-$switch-ios-disabled-text-color:       $subdued-text-color !default;
+$switch-ios-disabled-text-color:       $subdued-text-ios-color !default;
 
 
+// Switch
+// -----------------------------------------
+
 ion-switch {
   display: block;
   @include user-select-none();
@@ -38,6 +41,78 @@ ion-switch {
   }
 }
 
+
+// Switch Wrapper
+// -----------------------------------------
+
+.switch-media {
+  margin: $switch-ios-media-margin;
+  padding: $switch-ios-media-padding;
+  cursor: pointer;
+}
+
+
+// Switch Background Track
+// -----------------------------------------
+
+.switch-icon {
+  // bg track, when not checked
+  position: relative;
+  display: block;
+  width: $switch-ios-width;
+  height: $switch-ios-height;
+  border-radius: $switch-ios-border-radius;
+  pointer-events: none;
+
+  background-color: $switch-ios-border-color-off;
+  transition: background-color $switch-ios-transition-duration;
+}
+
+
+// Switch Background Track, Inner Oval
+// -----------------------------------------
+
+.switch-icon:before {
+  // inner bg track's oval, when not checked
+  content: '';
+  position: absolute;
+  top: $switch-ios-border-width;
+  right: $switch-ios-border-width;
+  left: $switch-ios-border-width;
+  bottom: $switch-ios-border-width;
+
+  border-radius: $switch-ios-border-radius;
+  background-color: $switch-ios-background-color-off;
+
+  transform: scale3d(1, 1, 1);
+  transition: transform $switch-ios-transition-duration;
+}
+
+
+// Switch Knob
+// -----------------------------------------
+
+.switch-icon:after {
+  // knob, when not checked
+  content: '';
+  position: absolute;
+  top: $switch-ios-border-width;
+  left: $switch-ios-border-width;
+
+  width: $switch-ios-handle-width;
+  height: $switch-ios-handle-height;
+
+  border-radius: $switch-ios-handle-border-radius;
+  background-color: $switch-ios-handle-background-color;
+  box-shadow: $switch-ios-handle-box-shadow;
+
+  transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
+}
+
+
+// Switch Checked
+// -----------------------------------------
+
 ion-switch[aria-checked=true] {
   .switch-icon {
     // bg track, when checked
@@ -72,6 +147,7 @@ ion-switch[aria-checked=true] {
   }
 }
 
+
 // Switch Disabled
 // -----------------------------------------
 
@@ -81,70 +157,6 @@ ion-switch[aria-disabled=true] {
   pointer-events: none;
 }
 
-// Switch Wrapper
-// -----------------------------------------
-
-.switch-media {
-  margin: $switch-ios-media-margin;
-  cursor: pointer;
-  padding: $switch-ios-media-padding;
-}
-
-// Switch Background Track
-// -----------------------------------------
-
-.switch-icon {
-  // bg track, when not checked
-  position: relative;
-  display: block;
-  width: $switch-ios-width;
-  height: $switch-ios-height;
-  border-radius: $switch-ios-border-radius;
-  pointer-events: none;
-
-  background-color: $switch-ios-border-color-off;
-  transition: background-color $switch-ios-transition-duration;
-}
-
-// Switch Background Track, Inner Oval
-// -----------------------------------------
-
-.switch-icon:before {
-  // inner bg track's oval, when not checked
-  content: '';
-  position: absolute;
-  top: $switch-ios-border-width;
-  right: $switch-ios-border-width;
-  left: $switch-ios-border-width;
-  bottom: $switch-ios-border-width;
-
-  border-radius: $switch-ios-border-radius;
-  background-color: $switch-ios-background-color-off;
-
-  transform: scale3d(1, 1, 1);
-  transition: transform $switch-ios-transition-duration;
-}
-
-// Switch Knob
-// -----------------------------------------
-
-.switch-icon:after {
-  // knob, when not checked
-  content: '';
-  position: absolute;
-  top: $switch-ios-border-width;
-  left: $switch-ios-border-width;
-
-  width: $switch-ios-handle-width;
-  height: $switch-ios-handle-height;
-
-  border-radius: $switch-ios-handle-radius;
-  background-color: $switch-ios-handle-background-color;
-  box-shadow: $switch-ios-handle-box-shadow;
-
-  transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
-}
-
 
 // iOS Switch Color Mixin
 // --------------------------------------------------
diff --git a/ionic/components/switch/modes/md.scss b/ionic/components/switch/modes/md.scss
index 92e61a56d6..0b081adcb6 100644
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -1,5 +1,4 @@
 @import "../../../globals.md";
-@import "../switch";
 
 // Material Design Switch
 // --------------------------------------------------
@@ -16,69 +15,98 @@ $switch-md-handle-height:                20px !default;
 $switch-md-handle-background-color-off:  $background-md-color !default;
 $switch-md-handle-background-color-on:   $switch-md-active-color !default;
 $switch-md-handle-box-shadow:            0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$switch-md-handle-border-radius:         50% !default;
+
+$switch-md-media-margin:                 0 !default;
+$switch-md-media-padding:                12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
 
 $switch-md-transition-duration:          300ms !default;
 
+$switch-md-disabled-opacity:             0.5 !default;
+$switch-md-disabled-text-color:          $subdued-text-md-color !default;
+
+
+// Switch
+// -----------------------------------------
 
 ion-switch {
-
-  media-switch {
-    padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left;
-  }
+  display: block;
+  @include user-select-none();
+}
 
 
-  // Switch Background Track
-  // -----------------------------------------
+// Switch Wrapper
+// -----------------------------------------
 
-  switch-icon {
-    // bg track, when not checked
-    position: relative;
-    display: block;
-    width: $switch-md-track-width;
-    height: $switch-md-track-height;
-    pointer-events: none;
-    border-radius: $switch-md-track-height;
-
-    background-color: $switch-md-track-background-color-off;
-    will-change: background-color;
-    transition: background-color $switch-md-transition-duration
-  }
-
-  &[aria-checked=true] switch-icon {
-    // bg track, when not checked
-    background-color: $switch-md-track-background-color-on;
-  }
+.switch-media {
+  margin: $switch-md-media-margin;
+  padding: $switch-md-media-padding;
+  cursor: pointer;
+}
 
 
-  // Switch Knob
-  // -----------------------------------------
+// Switch Background Track
+// -----------------------------------------
 
-  switch-icon:after {
-    // knob, when not checked
-    content: '';
-    position: absolute;
-    top: ($switch-md-handle-height - $switch-md-track-height) / -2;
-    left: 0;
+.switch-icon {
+  // bg track, when not checked
+  position: relative;
+  display: block;
+  width: $switch-md-track-width;
+  height: $switch-md-track-height;
+  pointer-events: none;
+  border-radius: $switch-md-track-height;
 
-    width: $switch-md-handle-width;
-    height: $switch-md-handle-height;
+  background-color: $switch-md-track-background-color-off;
+  transition: background-color $switch-md-transition-duration
+}
 
-    border-radius: 50%;
-    box-shadow: $switch-md-handle-box-shadow;
 
-    background-color: $switch-md-handle-background-color-off;
+// Switch Knob
+// -----------------------------------------
 
-    will-change: transform, background-color;
-    transition-property: transform, background-color;
-    transition-duration: $switch-md-transition-duration;
-  }
+.switch-icon:after {
+  // knob, when not checked
+  content: '';
+  position: absolute;
+  top: ($switch-md-handle-height - $switch-md-track-height) / -2;
+  left: 0;
 
-  &[aria-checked=true] switch-icon:after {
+  width: $switch-md-handle-width;
+  height: $switch-md-handle-height;
+
+  border-radius: $switch-md-handle-border-radius;
+  box-shadow: $switch-md-handle-box-shadow;
+
+  background-color: $switch-md-handle-background-color-off;
+
+  transition-property: transform, background-color;
+  transition-duration: $switch-md-transition-duration;
+}
+
+
+// Switch Checked
+// -----------------------------------------
+
+ion-switch[aria-checked=true] .switch-icon {
+  // bg track, when not checked
+  background-color: $switch-md-track-background-color-on;
+
+  &:after {
     // knob, when not checked
     background-color: $switch-md-handle-background-color-on;
     transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
   }
+}
 
+
+// Switch Disabled
+// -----------------------------------------
+
+ion-switch[aria-disabled=true] {
+  opacity: $switch-md-disabled-opacity;
+  color: $switch-md-disabled-text-color;
+  pointer-events: none;
 }
 
 
@@ -89,11 +117,11 @@ ion-switch {
 
   ion-switch[#{$color-name}] {
 
-    &[aria-checked=true] switch-icon {
+    &[aria-checked=true] .switch-icon {
       background-color: lighten($bg-on, 25%);
     }
 
-    &[aria-checked=true] switch-icon:after {
+    &[aria-checked=true] .switch-icon:after {
       background-color: $bg-on;
     }
 

From 450c9c5efeafbd1ec506511ad84429f447e95fff Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 11:14:35 -0600
Subject: [PATCH 065/100] detail-push should only go on ion-item

---
 ionic/components/item/item.scss              | 2 +-
 ionic/components/item/test/sliding/main.html | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index 44d4ec90d7..4a77ca8f68 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -79,7 +79,7 @@ ion-item-content {
   white-space: normal;
 }
 
-.vertical-align-top,
+[vertical-align-top],
 ion-input.item {
   align-items: flex-start;
 }
diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html
index 481cfd48e6..bbebd8d795 100644
--- a/ionic/components/item/test/sliding/main.html
+++ b/ionic/components/item/test/sliding/main.html
@@ -35,8 +35,8 @@
       </ion-item-options>
     </ion-item-sliding>
 
-    <ion-item-sliding text-wrap detail-push *ng-if="shouldShow" #item>
-      <ion-item>
+    <ion-item-sliding *ng-if="shouldShow" #item>
+      <ion-item text-wrap detail-push>
         <h3>Ben Sperry</h3>
         <p>
           I like paper

From 88276afc0b2d6f8444bdc5f542121e00b355a190 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 12:22:30 -0500
Subject: [PATCH 066/100] refactor(searchbar): cleaned up some nested css,
 renamed some classes and added some comemnts

references #689
---
 ionic/components/searchbar/modes/ios.scss     |  97 ++++++++++-----
 ionic/components/searchbar/modes/md.scss      | 114 +++++++++++-------
 ionic/components/searchbar/searchbar.scss     |   5 +-
 ionic/components/searchbar/searchbar.ts       |  13 +-
 .../components/searchbar/test/floating/e2e.ts |   2 +-
 5 files changed, 148 insertions(+), 83 deletions(-)

diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index e4ab7fd12f..9a0b2965cc 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -4,28 +4,31 @@
 // iOS Searchbar
 // --------------------------------------------------
 
-$searchbar-ios-padding-top-bottom:       0 !default;
-$searchbar-ios-padding-left-right:       8px !default;
-$searchbar-ios-background-color:         rgba(0, 0, 0, 0.2) !default;
-$searchbar-ios-border-color:             rgba(0, 0, 0, 0.05) !default;
-$searchbar-ios-min-height:               44px !default;
+$searchbar-ios-padding-top-bottom:        0 !default;
+$searchbar-ios-padding-left-right:        8px !default;
+$searchbar-ios-background-color:          rgba(0, 0, 0, 0.2) !default;
+$searchbar-ios-border-color:              rgba(0, 0, 0, 0.05) !default;
+$searchbar-ios-min-height:                44px !default;
 
-$searchbar-ios-input-search-icon-color:  rgba(0, 0, 0, 0.5) !default;
-$searchbar-ios-input-search-icon-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $searchbar-ios-input-search-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='" + $searchbar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
-$searchbar-ios-input-search-icon-size:   13px !default;
+$searchbar-ios-input-search-icon-color:   rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $searchbar-ios-input-search-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='" + $searchbar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
+$searchbar-ios-input-search-icon-size:    13px !default;
 
-$searchbar-ios-input-height:             28px !default;
-$searchbar-ios-input-placeholder-color:  rgba(0, 0, 0, 0.5) !default;
-$searchbar-ios-input-text-color:         #000 !default;
-$searchbar-ios-input-background-color:   #FFFFFF !default;
-$searchbar-ios-input-transition:         all 400ms cubic-bezier(.25, .45, .05, 1) !default;
-$searchbar-ios-cancel-transition:        all 400ms cubic-bezier(.25, .45, .05, 1) !default;
+$searchbar-ios-input-height:              100% !default;
+$searchbar-ios-input-placeholder-color:   rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-text-color:          #000 !default;
+$searchbar-ios-input-background-color:    #FFFFFF !default;
+$searchbar-ios-input-transition:          all 400ms cubic-bezier(.25, .45, .05, 1) !default;
+$searchbar-ios-cancel-transition:         all 400ms cubic-bezier(.25, .45, .05, 1) !default;
 
-$searchbar-ios-input-close-icon-color:   rgba(0, 0, 0, 0.5) !default;
-$searchbar-ios-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
-$searchbar-ios-input-close-icon-size:    18px !default;
+$searchbar-ios-input-clear-icon-color:    rgba(0, 0, 0, 0.5) !default;
+$searchbar-ios-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-ios-input-clear-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
+$searchbar-ios-input-clear-icon-size:     18px !default;
 
 
+// Searchbar
+// -----------------------------------------
+
 ion-searchbar {
   padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
   background: $searchbar-ios-background-color;
@@ -33,6 +36,10 @@ ion-searchbar {
   min-height: $searchbar-ios-min-height;
 }
 
+
+// Searchbar Search Icon
+// -----------------------------------------
+
 .searchbar-search-icon {
   width: $searchbar-ios-input-search-icon-size + 1;
   height: $searchbar-ios-input-search-icon-size + 1;
@@ -48,6 +55,10 @@ ion-searchbar {
   transition: $searchbar-ios-input-transition;
 }
 
+
+// Searchbar Input Field
+// -----------------------------------------
+
 .searchbar-input {
   height: $searchbar-ios-input-height;
   padding: 0 28px;
@@ -66,12 +77,16 @@ ion-searchbar {
   transition: $searchbar-ios-input-transition;
 }
 
-.searchbar-close-icon {
+
+// Searchbar Clear Input Icon
+// -----------------------------------------
+
+.searchbar-clear-icon {
   width: 30px;
   height: 100%;
 
-  @include svg-background-image($searchbar-ios-input-close-icon-svg);
-  background-size: $searchbar-ios-input-close-icon-size;
+  @include svg-background-image($searchbar-ios-input-clear-icon-svg);
+  background-size: $searchbar-ios-input-clear-icon-size;
   background-repeat: no-repeat;
   background-position: center;
   position: absolute;
@@ -79,8 +94,11 @@ ion-searchbar {
   top: 0;
 }
 
-.searchbar-cancel {
-  @extend button[clear];
+
+// Searchbar Cancel (iOS only)
+// -----------------------------------------
+
+.searchbar-ios-cancel {
   transition: $searchbar-ios-cancel-transition;
   min-height: 30px;
 
@@ -92,14 +110,18 @@ ion-searchbar {
   flex: 0 0 0%;
 }
 
-ion-searchbar.left-align {
+
+// Searchbar Left Aligned (iOS only)
+// -----------------------------------------
+
+.searchbar-left-aligned {
   .searchbar-search-icon {
     margin-left: 0;
   }
   .searchbar-input {
     padding-left: 30px;
   }
-  .searchbar-cancel {
+  .searchbar-ios-cancel {
     transform: translateX(0);
     flex: 0 0 auto;
     padding-left: 8px;
@@ -107,9 +129,9 @@ ion-searchbar.left-align {
   }
 }
 
-&.hairlines ion-searchbar {
-  border-bottom-width: 0.55px;
-}
+
+// Searchbar in Toolbar
+// -----------------------------------------
 
 .toolbar {
 
@@ -121,21 +143,34 @@ ion-searchbar.left-align {
       background-color: rgba(0, 0, 0, 0.08);
     }
 
-    .searchbar-cancel {
+    .searchbar-ios-cancel {
       padding: 0;
     }
   }
 
-  .left-align .searchbar-cancel {
+  .searchbar-left-aligned .searchbar-ios-cancel {
     padding-left: 8px;
   }
 
 }
 
-.searchbar-cancel-icon {
+
+// Searchbar Cancel (MD only)
+// -----------------------------------------
+
+.searchbar-md-cancel {
   display: none;
 }
 
+
+// Searchbar Hairlines (iOS only)
+// -----------------------------------------
+
+&.hairlines ion-searchbar {
+  border-bottom-width: 0.55px;
+}
+
+
 // Generate Default Search Bar Colors
 // --------------------------------------------------
 
@@ -143,7 +178,7 @@ ion-searchbar.left-align {
 
   ion-searchbar[#{$color-name}] {
 
-    .searchbar-cancel {
+    .searchbar-ios-cancel {
       color: $color-value;
     }
   }
diff --git a/ionic/components/searchbar/modes/md.scss b/ionic/components/searchbar/modes/md.scss
index d90cc29c98..0e347176a9 100644
--- a/ionic/components/searchbar/modes/md.scss
+++ b/ionic/components/searchbar/modes/md.scss
@@ -4,34 +4,63 @@
 // Material Design Searchbar
 // --------------------------------------------------
 
-$searchbar-md-padding:                  8px !default;
-$searchbar-md-background-color:         inherit !default;
+$searchbar-md-padding:                   8px !default;
+$searchbar-md-background-color:          inherit !default;
 
-$searchbar-md-input-search-icon-color:  #5B5B5B !default;
-$searchbar-md-input-search-icon-svg:    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
-$searchbar-md-input-search-icon-size:   20px !default;
+$searchbar-md-input-search-icon-color:   #5B5B5B !default;
+$searchbar-md-input-search-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $searchbar-md-input-search-icon-color + "' d='M337.509,305.372h-17.501l-6.571-5.486c20.791-25.232,33.922-57.054,33.922-93.257C347.358,127.632,283.896,64,205.135,64C127.452,64,64,127.632,64,206.629s63.452,142.628,142.225,142.628c35.011,0,67.831-13.167,92.991-34.008l6.561,5.487v17.551L415.18,448L448,415.086L337.509,305.372z M206.225,305.372c-54.702,0-98.463-43.887-98.463-98.743c0-54.858,43.761-98.742,98.463-98.742c54.7,0,98.462,43.884,98.462,98.742C304.687,261.485,260.925,305.372,206.225,305.372z'/></svg>" !default;
+$searchbar-md-input-search-icon-size:    20px !default;
 
-$searchbar-md-input-height:             28px !default;
-$searchbar-md-input-box-shadow:         0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
-$searchbar-md-input-placeholder-color:  #AEAEAE !default;
-$searchbar-md-input-text-color:         #141414 !default;
-$searchbar-md-input-background-color:   #FFFFFF !default;
-$searchbar-md-input-border-radius:      2px !default;
+$searchbar-md-input-height:              100% !default;
+$searchbar-md-input-box-shadow:          0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$searchbar-md-input-placeholder-color:   #AEAEAE !default;
+$searchbar-md-input-text-color:          #141414 !default;
+$searchbar-md-input-background-color:    #FFFFFF !default;
+$searchbar-md-input-border-radius:       2px !default;
 
-$searchbar-md-input-close-icon-color:   #5B5B5B !default;
-$searchbar-md-input-close-icon-svg:     "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-close-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
-$searchbar-md-input-close-icon-size:    22px !default;
+$searchbar-md-input-clear-icon-color:    #5B5B5B !default;
+$searchbar-md-input-clear-icon-svg:      "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $searchbar-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
+$searchbar-md-input-clear-icon-size:     22px !default;
+
+
+// Searchbar
+// -----------------------------------------
 
 ion-searchbar {
   padding: $searchbar-md-padding;
   background: $searchbar-md-background-color;
 }
 
-.searchbar-search-icon,
-button.searchbar-cancel-icon {
+
+// Searchbar Search Icon
+// -----------------------------------------
+
+.searchbar-search-icon {
   width: $searchbar-md-input-search-icon-size + 1;
   height: $searchbar-md-input-search-icon-size + 1;
+  top: 11px;
+  left: 16px;
+  @include svg-background-image($searchbar-md-input-search-icon-svg);
+}
 
+
+// Searchbar Cancel Icon (MD only)
+// -----------------------------------------
+
+.searchbar-md-cancel {
+  display: none;
+  width: $searchbar-md-input-search-icon-size + 1;
+  height: 100%;
+  margin: 0;
+  top: 0;
+  left: 10px;
+}
+
+// Searchbar Search & Cancel Icon
+// -----------------------------------------
+
+.searchbar-search-icon,
+.searchbar-md-cancel {
   background-size: $searchbar-md-input-search-icon-size;
   background-repeat: no-repeat;
   position: absolute;
@@ -41,19 +70,9 @@ button.searchbar-cancel-icon {
   }
 }
 
-.searchbar-search-icon {
-  top: 11px;
-  left: 16px;
-  @include svg-background-image($searchbar-md-input-search-icon-svg);
-}
 
-button.searchbar-cancel-icon {
-  display: none;
-  height: 100%;
-  margin: 0;
-  top: 0;
-  left: 10px;
-}
+// Searchbar Input Field
+// -----------------------------------------
 
 .searchbar-input {
   padding: 6px 55px;
@@ -72,13 +91,17 @@ button.searchbar-cancel-icon {
   @include placeholder($searchbar-md-input-placeholder-color);
 }
 
-button.searchbar-close-icon {
-  width: $searchbar-md-input-close-icon-size;
+
+// Searchbar Clear Input Icon
+// -----------------------------------------
+
+.searchbar-clear-icon {
+  width: $searchbar-md-input-clear-icon-size;
   height: 100%;
   padding: 0;
 
-  @include svg-background-image($searchbar-md-input-close-icon-svg);
-  background-size: $searchbar-md-input-close-icon-size;
+  @include svg-background-image($searchbar-md-input-clear-icon-svg);
+  background-size: $searchbar-md-input-clear-icon-size;
   background-repeat: no-repeat;
   background-position: center;
   position: absolute;
@@ -90,31 +113,38 @@ button.searchbar-close-icon {
   }
 }
 
-.searchbar-cancel {
-  display: none;
-}
 
-.focused {
+// Searchbar Focused
+// -----------------------------------------
 
+.searchbar-focused {
   .searchbar-search-icon {
     display: none;
   }
 
-  button.searchbar-cancel-icon {
+  .searchbar-md-cancel {
     display: inline-flex;
   }
-
 }
 
-.toolbar {
 
+// Searchbar in Toolbar
+// -----------------------------------------
+
+.toolbar {
   ion-searchbar {
     padding: 3px;
   }
 
-  button.searchbar-cancel-icon {
+  .searchbar-md-cancel {
     left: 14px;
   }
-
-
+}
+
+
+// Searchbar Cancel Icon (iOS only)
+// -----------------------------------------
+
+.searchbar-ios-cancel {
+  display: none;
 }
diff --git a/ionic/components/searchbar/searchbar.scss b/ionic/components/searchbar/searchbar.scss
index 1da21d8d86..104eac8ae8 100644
--- a/ionic/components/searchbar/searchbar.scss
+++ b/ionic/components/searchbar/searchbar.scss
@@ -23,17 +23,16 @@ ion-searchbar {
   width: 100%;
 }
 
-input[type="search"].searchbar-input {
+.searchbar-input {
   display: block;
   width: 100%;
-  height: 100%;
   border: none;
   font-family: inherit;
   line-height: 3rem;
   @include appearance(none);
 }
 
-.searchbar-close-icon {
+.searchbar-clear-icon {
   min-height: 0;
   padding: 0;
   margin: 0;
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index cb69280e8a..8dfeb51f59 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -4,6 +4,7 @@ import {Ion} from '../ion';
 import {Config} from '../../config/config';
 import {ConfigComponent} from '../../config/decorators';
 import {Icon} from '../icon/icon';
+import {Button} from '../button/button';
 
 /**
  * @name Searchbar
@@ -31,19 +32,19 @@ import {Icon} from '../icon/icon';
   },
   inputs: ['cancelAction'],
   host: {
-   '[class.left-align]': 'shouldLeftAlign',
-   '[class.focused]': 'isFocused',
+   '[class.searchbar-left-aligned]': 'shouldLeftAlign',
+   '[class.searchbar-focused]': 'isFocused',
   },
   template:
     '<div class="searchbar-input-container">' +
-      '<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-cancel-icon"><icon arrow-back></icon></button>' +
+      '<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel"><icon arrow-back></icon></button>' +
       '<div class="searchbar-search-icon"></div>' +
       '<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
       '(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
-      '<button clear *ng-if="query" class="searchbar-close-icon" (click)="clearInput($event)"></button>' +
+      '<button clear *ng-if="query" class="searchbar-clear-icon" (click)="clearInput($event)"></button>' +
     '</div>' +
-    '<button *ng-if="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-cancel">{{cancelText}}</button>',
-  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon]
+    '<button clear *ng-if="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-ios-cancel">{{cancelText}}</button>',
+  directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button]
 })
 export class Searchbar extends Ion {
   /**
diff --git a/ionic/components/searchbar/test/floating/e2e.ts b/ionic/components/searchbar/test/floating/e2e.ts
index 80da38ae4e..3c67c74834 100644
--- a/ionic/components/searchbar/test/floating/e2e.ts
+++ b/ionic/components/searchbar/test/floating/e2e.ts
@@ -21,5 +21,5 @@ it('custom cancel action should focus', function() {
 
 // TODO - this test will work on iOS but fail on Android
 // it('custom cancel action should alert', function() {
-//   element(by.css('.e2eCustomCancelActionFloatingSearchbar .searchbar-cancel')).click();
+//   element(by.css('.e2eCustomCancelActionFloatingSearchbar .searchbar-ios-cancel')).click();
 // });

From e608170d193db3272246e7d6b64fd0d448adc35e Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 12:49:05 -0500
Subject: [PATCH 067/100] test(searchbar): added tests for searchbars in
 toolbars

references #289
---
 ionic/components/searchbar/test/toolbar/e2e.ts    | 12 ++++++++++++
 ionic/components/searchbar/test/toolbar/index.ts  |  4 +++-
 ionic/components/searchbar/test/toolbar/main.html |  6 +++---
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ionic/components/searchbar/test/toolbar/e2e.ts b/ionic/components/searchbar/test/toolbar/e2e.ts
index e69de29bb2..375fb57626 100644
--- a/ionic/components/searchbar/test/toolbar/e2e.ts
+++ b/ionic/components/searchbar/test/toolbar/e2e.ts
@@ -0,0 +1,12 @@
+
+it('default should focus', function() {
+  element(by.css('.e2eDefaultToolbarSearchbar input')).sendKeys("AA");
+});
+
+it('primary should focus', function() {
+  element(by.css('.e2ePrimaryToolbarSearchbar input')).sendKeys("BB");
+});
+
+it('danger should focus', function() {
+  element(by.css('.e2eDangerToolbarSearchbar input')).sendKeys("CC");
+});
diff --git a/ionic/components/searchbar/test/toolbar/index.ts b/ionic/components/searchbar/test/toolbar/index.ts
index bb059287ad..c81eb2b477 100644
--- a/ionic/components/searchbar/test/toolbar/index.ts
+++ b/ionic/components/searchbar/test/toolbar/index.ts
@@ -7,7 +7,9 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
   templateUrl: 'main.html'
 })
 class E2EApp {
-  toolbarSearch: string;
+  DefaultToolbarSearch: string;
+  PrimaryToolbarSearch: string;
+  DangerToolbarSearch: string;
 
   constructor() {
 
diff --git a/ionic/components/searchbar/test/toolbar/main.html b/ionic/components/searchbar/test/toolbar/main.html
index 04e8f2686b..8af9afce60 100644
--- a/ionic/components/searchbar/test/toolbar/main.html
+++ b/ionic/components/searchbar/test/toolbar/main.html
@@ -5,17 +5,17 @@
 <ion-content>
   <h5 padding-left padding-top> Search - Default Toolbar </h5>
   <ion-toolbar>
-    <ion-searchbar [(ng-model)]="toolbarSearch" show-cancel="true"></ion-searchbar>
+    <ion-searchbar [(ng-model)]="defaultToolbarSearch" show-cancel="true" class="e2eDefaultToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Primary Toolbar </h5>
   <ion-toolbar primary>
-    <ion-searchbar [(ng-model)]="toolbarSearch" show-cancel="true"></ion-searchbar>
+    <ion-searchbar [(ng-model)]="primaryToolbarSearch" show-cancel="true" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
   <h5 padding-left padding-top> Search - Danger Toolbar </h5>
   <ion-toolbar danger>
-    <ion-searchbar [(ng-model)]="toolbarSearch" show-cancel="true"></ion-searchbar>
+    <ion-searchbar [(ng-model)]="dangerToolbarSearch" show-cancel="true" class="e2eDangerToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
 </ion-content>

From 5f55f9b4ad758422786012d2db6175d089602e78 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 12:54:20 -0500
Subject: [PATCH 068/100] fix(searchbar): iOS fixed searchbar cancel button
 color in a toolbar

references #289
---
 ionic/components/searchbar/modes/ios.scss         | 7 ++++++-
 ionic/components/searchbar/test/toolbar/e2e.ts    | 4 ++++
 ionic/components/searchbar/test/toolbar/index.ts  | 3 ---
 ionic/components/searchbar/test/toolbar/main.html | 5 +++++
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ionic/components/searchbar/modes/ios.scss b/ionic/components/searchbar/modes/ios.scss
index 9a0b2965cc..c1509f0e6f 100644
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -177,10 +177,15 @@ ion-searchbar {
 @each $color-name, $color-value in $colors-ios {
 
   ion-searchbar[#{$color-name}] {
-
     .searchbar-ios-cancel {
       color: $color-value;
     }
   }
 
+  .toolbar[#{$color-name}] ion-searchbar {
+    .searchbar-ios-cancel {
+      color: inverse($color-value);
+    }
+  }
+
 }
diff --git a/ionic/components/searchbar/test/toolbar/e2e.ts b/ionic/components/searchbar/test/toolbar/e2e.ts
index 375fb57626..7d8a311063 100644
--- a/ionic/components/searchbar/test/toolbar/e2e.ts
+++ b/ionic/components/searchbar/test/toolbar/e2e.ts
@@ -10,3 +10,7 @@ it('primary should focus', function() {
 it('danger should focus', function() {
   element(by.css('.e2eDangerToolbarSearchbar input')).sendKeys("CC");
 });
+
+it('light should focus', function() {
+  element(by.css('.e2eLightToolbarSearchbar input')).sendKeys("DD");
+});
diff --git a/ionic/components/searchbar/test/toolbar/index.ts b/ionic/components/searchbar/test/toolbar/index.ts
index c81eb2b477..bf5a6c4b9d 100644
--- a/ionic/components/searchbar/test/toolbar/index.ts
+++ b/ionic/components/searchbar/test/toolbar/index.ts
@@ -7,9 +7,6 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
   templateUrl: 'main.html'
 })
 class E2EApp {
-  DefaultToolbarSearch: string;
-  PrimaryToolbarSearch: string;
-  DangerToolbarSearch: string;
 
   constructor() {
 
diff --git a/ionic/components/searchbar/test/toolbar/main.html b/ionic/components/searchbar/test/toolbar/main.html
index 8af9afce60..b50f292116 100644
--- a/ionic/components/searchbar/test/toolbar/main.html
+++ b/ionic/components/searchbar/test/toolbar/main.html
@@ -18,4 +18,9 @@
     <ion-searchbar [(ng-model)]="dangerToolbarSearch" show-cancel="true" class="e2eDangerToolbarSearchbar"></ion-searchbar>
   </ion-toolbar>
 
+  <h5 padding-left padding-top> Search - Light Toolbar </h5>
+  <ion-toolbar light>
+    <ion-searchbar [(ng-model)]="lightToolbarSearch" show-cancel="true" class="e2eLightToolbarSearchbar"></ion-searchbar>
+  </ion-toolbar>
+
 </ion-content>

From 0fdbe7b89bd413a9826cff2ce603fb4f33a7e315 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 13:10:53 -0500
Subject: [PATCH 069/100] fix(badge): changed back to ion-badge with a color
 attribute

also changed segment test to reflect actual color references #289
---
 ionic/components/badge/badge.scss             | 2 +-
 ionic/components/segment/test/basic/main.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ionic/components/badge/badge.scss b/ionic/components/badge/badge.scss
index 0af4a0c567..091160ec4d 100644
--- a/ionic/components/badge/badge.scss
+++ b/ionic/components/badge/badge.scss
@@ -35,7 +35,7 @@ ion-badge {
 
 @each $color-name, $color-value in $colors {
 
-  .badge-#{$color-name} {
+  ion-badge[#{$color-name}] {
     background-color: $color-value;
     color: inverse($color-value);
   }
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index 6a84043f38..486746e657 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -105,7 +105,7 @@
       Toolbar
     </ion-segment-button>
     <ion-segment-button value="top" class="e2eSegmentTopGrossing">
-      Primary Segment
+      Danger Segment
     </ion-segment-button>
   </ion-segment>
 </ion-toolbar>

From 111d7f97a63b930adaf9d3701f110df05efd0e84 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 13:54:17 -0500
Subject: [PATCH 070/100] refactor(item-sliding): fix buttons

references #689
---
 ionic/components/item/item-sliding.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/ionic/components/item/item-sliding.scss b/ionic/components/item/item-sliding.scss
index f6330677cd..4d46151b7b 100644
--- a/ionic/components/item/item-sliding.scss
+++ b/ionic/components/item/item-sliding.scss
@@ -22,6 +22,13 @@ ion-item-options {
   visibility: hidden;
 }
 
+ion-item-options .button {
+  margin: 0;
+  border-radius: 0;
+  box-shadow: none;
+  height: 100%;
+}
+
 ion-item-sliding.active-slide {
 
   .item,

From 6a7f5fadc91b985e46a8bad0699c5ecf2f94398d Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 13:48:27 -0600
Subject: [PATCH 071/100] fix item-sliding bg bug

---
 ionic/components/item/item-sliding.scss |  9 +++++++--
 ionic/components/item/modes/ios.scss    | 14 ++++++++++----
 ionic/components/item/modes/md.scss     | 11 +++++++++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/ionic/components/item/item-sliding.scss b/ionic/components/item/item-sliding.scss
index 4d46151b7b..11a56bf6a9 100644
--- a/ionic/components/item/item-sliding.scss
+++ b/ionic/components/item/item-sliding.scss
@@ -1,7 +1,10 @@
 @import "../../globals.core";
 
-
+// Item Sliding
+// --------------------------------------------------
 // The hidden right-side buttons that can be exposed under a list item with dragging.
+
+
 ion-item-sliding {
   display: block;
   position: relative;
@@ -31,13 +34,15 @@ ion-item-options .button {
 
 ion-item-sliding.active-slide {
 
+
   .item,
-  .item.item.activated {
+  .item.activated {
     position: relative;
     z-index: $z-index-item-options + 1;
     opacity: 1;
     transition: all 300ms cubic-bezier(0.36,0.66,0.04,1);
     pointer-events: none;
+
   }
 
   ion-item-options {
diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index baf7060866..71f9ad3cb0 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -14,8 +14,7 @@ $item-ios-divider-bg:                 #f7f7f7 !default;
 $item-ios-divider-color:              #222 !default;
 $item-ios-divider-padding:            5px 15px !default;
 
-$item-ios-sliding-content-bg:         $background-ios-color !default;
-$item-ios-sliding-transition:         transform 250ms ease-in-out !default;
+$item-ios-sliding-content-bg:         $list-ios-background-color !default;
 
 
 // iOS Item
@@ -82,6 +81,10 @@ $item-ios-sliding-transition:         transform 250ms ease-in-out !default;
   border-bottom: 1px solid $list-ios-border-color;
 }
 
+&.hairlines .item-inner {
+  border-bottom-width: 0.55px;
+}
+
 ion-item-content {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
 }
@@ -209,6 +212,9 @@ ion-item-divider {
 }
 
 
-&.hairlines .item-inner {
-  border-bottom-width: 0.55px;
+// iOS Item Sliding
+// --------------------------------------------------
+
+ion-item-sliding {
+  background-color: $item-ios-sliding-content-bg;
 }
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index a7bdc45beb..83066f77fc 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -16,8 +16,7 @@ $item-md-divider-bg:                 #fff !default;
 $item-md-divider-color:              #222 !default;
 $item-md-divider-padding:            5px 15px !default;
 
-$item-md-sliding-content-bg:         $background-md-color !default;
-$item-md-sliding-transition:         transform 250ms ease-in-out !default;
+$item-md-sliding-content-bg:         $list-md-background-color !default;
 
 
 .item {
@@ -184,3 +183,11 @@ ion-item-divider {
   background-color: $item-md-divider-bg;
   color: $item-md-divider-color;
 }
+
+
+// Material Design Item Sliding
+// --------------------------------------------------
+
+ion-item-sliding {
+  background-color: $item-md-sliding-content-bg;
+}

From 8b0316cbb25820103585cb2c4685c4c9151a9721 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 14:20:31 -0600
Subject: [PATCH 072/100] fix menu-toggle style in content

---
 ionic/components/button/button.ts           | 2 +-
 ionic/components/menu/test/basic/page1.html | 2 +-
 ionic/components/toolbar/toolbar.ts         | 8 +++++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 863783f333..3dbdb6b3cc 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -169,7 +169,7 @@ const BUTTON_SIZE_ATTRS = ['large', 'small'];
 const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid'];
 const BUTTON_SHAPE_ATTRS = ['round', 'fab'];
 const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
-const IGNORE_ATTRS = /_ng|button/;
+const IGNORE_ATTRS = /_ng|button|left|right/;
 
 const TEXT = 1;
 const ICON = 2;
diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html
index ed3744ca64..f8f5b40f8a 100644
--- a/ionic/components/menu/test/basic/page1.html
+++ b/ionic/components/menu/test/basic/page1.html
@@ -21,7 +21,7 @@
     </button>
   </ion-buttons>
 
-  <button menu-toggle="rightMenu" right>
+  <button menu-toggle="rightMenu" right secondary>
     <icon menu></icon>
   </button>
 
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index b0d1e07b5a..21290614e4 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -151,19 +151,21 @@ export class ToolbarTitle extends Ion {
 @Directive({
   selector: 'ion-buttons,[menu-toggle]'
 })
-export class ToolbarItem extends Ion {
+export class ToolbarItem {
   constructor(
     elementRef: ElementRef,
     @Optional() toolbar: Toolbar,
     @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar
   ) {
-    super(elementRef, null);
     toolbar && toolbar.addItemRef(elementRef);
     navbar && navbar.addItemRef(elementRef);
+    this.inToolbar = !!(toolbar || navbar);
   }
 
   @ContentChildren(Button)
   set _buttons(buttons) {
-    Button.setRoles(buttons, 'bar-button');
+    if (this.inToolbar) {
+      Button.setRoles(buttons, 'bar-button');
+    }
   }
 }

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 073/100] 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;
 }
 

From 2fae5ba1bedcd2dcb0edcdc52ab45fbdcd6fee00 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 14:43:03 -0600
Subject: [PATCH 074/100] change [text-input] to .text-input, add .item-input

---
 ionic/components/text-input/text-input.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index 785a3bb4d5..b4dac94297 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -461,12 +461,14 @@ export class TextInputElement {
     this.type = type;
     this.elementRef = elementRef;
     this.wrapper = wrapper;
-
     this.renderer = renderer;
-    renderer.setElementAttribute(this.elementRef, 'text-input', '');
+
+    // all text inputs (textarea, input[type=text],input[type=password], etc)
+    renderer.setElementClass(elementRef, 'text-input', true);
 
     if (wrapper) {
       // it's within ionic's ion-input, let ion-input handle what's up
+      renderer.setElementClass(elementRef, 'item-input', true);
       wrapper.registerInput(this);
     }
   }

From abc93bc355328c200a750dfee8c9f2ee50267aec Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 15:44:11 -0500
Subject: [PATCH 075/100] refactor(text-input): renamed some classes and
 removed some nesting

references #689
---
 ionic/components/text-input/label.scss               |  8 ++------
 ionic/components/text-input/modes/ios.scss           |  4 ++--
 ionic/components/text-input/modes/md.scss            | 12 ++++++------
 .../text-input/test/floating-labels/main.html        |  2 +-
 ionic/components/text-input/text-input.scss          |  2 +-
 ionic/components/text-input/text-input.ts            |  4 ++--
 6 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/ionic/components/text-input/label.scss b/ionic/components/text-input/label.scss
index a1af3688b3..8df7c0c830 100644
--- a/ionic/components/text-input/label.scss
+++ b/ionic/components/text-input/label.scss
@@ -18,14 +18,10 @@ ion-label {
   max-width: 200px;
 }
 
-ion-input[stacked-label],
-ion-input[floating-label] {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
 [stacked-label],
 [floating-label] {
+  flex-direction: column;
+  align-items: flex-start;
 
   ion-label {
     align-self: stretch;
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
index f6ebb8adbb..70c19af48c 100644
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -48,8 +48,8 @@ ion-label + [text-input] {
   transition: transform 150ms ease-in-out;
 }
 
-[floating-label].has-focus ion-label,
-[floating-label].has-value ion-label  {
+[floating-label].input-focused ion-label,
+[floating-label].input-has-value ion-label  {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 
diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss
index 23a728c389..6be1140da1 100644
--- a/ionic/components/text-input/modes/md.scss
+++ b/ionic/components/text-input/modes/md.scss
@@ -37,11 +37,11 @@ ion-input:after {
   content: '';
 }
 
-ion-input.has-focus:after {
+.input-focused:after {
   border-bottom: 2px solid $text-input-md-highlight-color;
 }
 
-ion-input.ng-valid.has-value:after {
+ion-input.ng-valid.input-has-value:after {
   border-bottom: 2px solid $text-input-md-hightlight-color-valid;
 }
 
@@ -59,8 +59,8 @@ ion-input.ng-invalid.ng-touched:after {
   margin-left: 0;
 }
 
-[stacked-label].has-focus ion-label,
-[floating-label].has-focus ion-label {
+[stacked-label].input-focused ion-label,
+[floating-label].input-focused ion-label {
   color: $text-input-md-highlight-color;
 }
 
@@ -78,8 +78,8 @@ ion-input.ng-invalid.ng-touched:after {
   transition: transform 150ms ease-in-out;
 }
 
-[floating-label].has-focus ion-label,
-[floating-label].has-value ion-label  {
+[floating-label].input-focused ion-label,
+[floating-label].input-has-value ion-label  {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 
diff --git a/ionic/components/text-input/test/floating-labels/main.html b/ionic/components/text-input/test/floating-labels/main.html
index 1534d821ee..ca011371cc 100644
--- a/ionic/components/text-input/test/floating-labels/main.html
+++ b/ionic/components/text-input/test/floating-labels/main.html
@@ -11,7 +11,7 @@
       <input type="text">
     </ion-input>
 
-    <ion-input floating-label class="has-value">
+    <ion-input floating-label class="input-has-value">
       <ion-label>Floating Label 2</ion-label>
       <input value="Has Value" type="text">
     </ion-input>
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index 2f3d9cab20..a1b41df532 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -34,7 +34,7 @@ ion-input [text-input] {
   pointer-events: none;
 }
 
-ion-input.has-focus [text-input] {
+.input-focused [text-input] {
   pointer-events: auto;
 }
 
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index 785a3bb4d5..cc4d99d84e 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -372,7 +372,7 @@ export class TextInput {
    * @private
    */
   focusChange(hasFocus) {
-    this.renderer.setElementClass(this.elementRef, 'has-focus', hasFocus);
+    this.renderer.setElementClass(this.elementRef, 'input-focused', hasFocus);
     if (!hasFocus) {
       this.deregMove();
       this.input.hideFocus(false);
@@ -383,7 +383,7 @@ export class TextInput {
    * @private
    */
   hasValue(inputValue) {
-    this.renderer.setElementClass(this.elementRef, 'has-value', inputValue && inputValue !== '');
+    this.renderer.setElementClass(this.elementRef, 'input-has-value', inputValue && inputValue !== '');
   }
 
   /**

From ad57fc02f8a48fa29992fed4fe44e2abe8efad9a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 14:59:50 -0600
Subject: [PATCH 076/100] add ion-input display type to inner label/input

---
 ionic/components/text-input/label.ts      | 13 +++++++++++--
 ionic/components/text-input/text-input.ts | 17 +++++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/ionic/components/text-input/label.ts b/ionic/components/text-input/label.ts
index 1e899a6a82..4ab39bfae4 100644
--- a/ionic/components/text-input/label.ts
+++ b/ionic/components/text-input/label.ts
@@ -1,4 +1,4 @@
-import {Directive, Optional} from 'angular2/angular2';
+import {Directive, Optional, ElementRef, Renderer} from 'angular2/angular2';
 
 import {Config} from '../../config/config';
 import {TextInput} from './text-input';
@@ -35,7 +35,12 @@ import {pointerCoord, hasPointerMoved} from '../../util/dom';
 })
 export class Label {
 
-  constructor(config: Config, @Optional() container: TextInput) {
+  constructor(
+    config: Config,
+    @Optional() container: TextInput,
+    private elementRef: ElementRef,
+    private renderer: Renderer
+  ) {
     this.scrollAssist = config.get('scrollAssist');
     if (!this.id) {
       this.id = 'lbl-' + (++labelIds);
@@ -74,6 +79,10 @@ export class Label {
     }
   }
 
+  addClass(className) {
+    this.renderer.setElementClass(this.elementRef, className, true);
+  }
+
 }
 
 let labelIds = -1;
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index ccca96552d..045175f6f6 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute} from 'angular2/angular2';
+import {Component, Directive, Attribute, NgIf, forwardRef, Host, Optional, ElementRef, Renderer, Attribute} from 'angular2/angular2';
 
 import {NavController} from '../nav/nav-controller';
 import {Config} from '../../config/config';
@@ -73,7 +73,9 @@ export class TextInput {
     app: IonicApp,
     platform: Platform,
     @Optional() @Host() scrollView: Content,
-    @Optional() navCtrl: NavController
+    @Optional() navCtrl: NavController,
+    @Attribute('floating-label') isFloating: string,
+    @Attribute('stacked-label') isStacked: string
   ) {
     this.renderer = renderer;
 
@@ -82,6 +84,7 @@ export class TextInput {
 
     this.type = 'text';
     this.lastTouch = 0;
+    this.displayType = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : null));
 
     this.app = app;
     this.elementRef = elementRef;
@@ -105,6 +108,9 @@ export class TextInput {
    * @private
    */
   registerInput(textInputElement) {
+    if (this.displayType) {
+      textInputElement.addClass(this.displayType + '-input');
+    }
     this.input = textInputElement;
     this.type = textInputElement.type || 'text';
   }
@@ -113,6 +119,9 @@ export class TextInput {
    * @private
    */
   registerLabel(label) {
+    if (this.displayType) {
+      label.addClass(this.displayType + '-label');
+    }
     this.label = label;
   }
 
@@ -543,6 +552,10 @@ export class TextInputElement {
     return dom.hasFocus(this.getNativeElement());
   }
 
+  addClass(className) {
+    this.renderer.setElementClass(this.elementRef, className, true);
+  }
+
   getNativeElement() {
     return this.elementRef.nativeElement;
   }

From 32f24f0b19786e2ded53fbb09809d2c6aadb6955 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 16:00:07 -0500
Subject: [PATCH 077/100] refactor(text-input): changed text-input references
 to item-input

cleaned up main text-input Sass file references #689
---
 ionic/components/text-input/label.scss      |  2 +-
 ionic/components/text-input/modes/ios.scss  | 10 ++--
 ionic/components/text-input/modes/md.scss   |  8 +--
 ionic/components/text-input/text-input.scss | 60 +++++++++------------
 4 files changed, 34 insertions(+), 46 deletions(-)

diff --git a/ionic/components/text-input/label.scss b/ionic/components/text-input/label.scss
index 8df7c0c830..d5987a5955 100644
--- a/ionic/components/text-input/label.scss
+++ b/ionic/components/text-input/label.scss
@@ -29,7 +29,7 @@ ion-label {
     max-width: 100%;
   }
 
-  [text-input] {
+  .item-input {
     align-self: stretch;
     width: auto;
   }
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
index 70c19af48c..12be1c2d35 100644
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -9,13 +9,13 @@ $text-input-ios-background-color:    $list-ios-background-color !default;
 $text-input-ios-label-color:         #7f7f7f !default;
 
 
-[text-input] {
+.item-input {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
   padding: 0;
   background-color: $text-input-ios-background-color;
 }
 
-ion-input[inset] [text-input] {
+ion-input[inset] .item-input {
   margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left;
   padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
 }
@@ -25,7 +25,7 @@ ion-label {
   color: $text-input-ios-label-color;
 }
 
-ion-label + [text-input] {
+ion-label + .item-input {
   margin-left: $item-ios-padding-left;
 }
 
@@ -34,8 +34,8 @@ ion-label + [text-input] {
   margin-bottom: 4px;
 }
 
-[stacked-label] [text-input],
-[floating-label] [text-input] {
+[stacked-label] .item-input,
+[floating-label] .item-input {
   margin-left: 0;
   margin-top: 8px;
   margin-bottom: 8px;
diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss
index 6be1140da1..a371cdcd88 100644
--- a/ionic/components/text-input/modes/md.scss
+++ b/ionic/components/text-input/modes/md.scss
@@ -12,13 +12,13 @@ $text-input-md-hightlight-color-valid:      map-get($colors-md, secondary) !defa
 $text-input-md-hightlight-color-invalid:    map-get($colors-md, danger) !default;
 
 
-[text-input] {
+.item-input {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
   padding: 0;
   background-color: $text-input-md-background-color;
 }
 
-ion-input[inset] [text-input] {
+ion-input[inset] .item-input {
   margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
   padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
 }
@@ -64,8 +64,8 @@ ion-input.ng-invalid.ng-touched:after {
   color: $text-input-md-highlight-color;
 }
 
-[stacked-label] [text-input],
-[floating-label] [text-input] {
+[stacked-label] .item-input,
+[floating-label] .item-input {
   margin-bottom: 8px;
   margin-top: 8px;
   margin-left: 0;
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index a1b41df532..4eba474f0e 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -3,57 +3,45 @@
 // Text Input
 // --------------------------------------------------
 
+$text-input-textarea-resize:          none !default;
 
-ion-input {
 
-  // text inputs
-  textarea,
-  input[type="text"],
-  input[type="password"],
-  input[type="datetime"],
-  input[type="datetime-local"],
-  input[type="date"],
-  input[type="month"],
-  input[type="time"],
-  input[type="week"],
-  input[type="number"],
-  input[type="email"],
-  input[type="url"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="color"] {
-    display: block;
-    background: transparent;
-    border: 0;
-    width: 100%;
-  }
-}
+// All Inputs in ion-input
+// --------------------------------------------------
 
-ion-input [text-input] {
+.item-input {
+  display: block;
+  background: transparent;
+  border: 0;
   flex: 1;
   pointer-events: none;
 }
 
-.input-focused [text-input] {
-  pointer-events: auto;
-}
 
-ion-input input[scroll-assist] {
-  display: inline-block;
-  padding: 0;
-  margin: 0;
+// Scroll Assist
+// --------------------------------------------------
+
+[scroll-assist] {
   width: 1px;
   height: 1px;
+  background: transparent;
+  border: 0;
   pointer-events: none;
 }
 
-ion-input textarea {
-  padding-top: 9px;
+
+// Input focused
+// --------------------------------------------------
+
+.input-focused .item-input {
+  pointer-events: auto;
 }
 
+
+// Input textarea
+// --------------------------------------------------
+
 textarea {
-  margin: 0;
-  padding: 0;
   height: auto;
   overflow: auto;
   font: inherit;
@@ -61,7 +49,7 @@ textarea {
 }
 
 .platform-mobile textarea {
-  resize: none;
+  resize: $text-input-textarea-resize;
 }
 
 input,

From eb39909fd5334b7cfcbe9755f45aaeaa4a25edf2 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 15:02:51 -0600
Subject: [PATCH 078/100] add fixed-label and fixed-input css class

---
 ionic/components/text-input/text-input.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index 045175f6f6..35ed230f5d 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -75,7 +75,8 @@ export class TextInput {
     @Optional() @Host() scrollView: Content,
     @Optional() navCtrl: NavController,
     @Attribute('floating-label') isFloating: string,
-    @Attribute('stacked-label') isStacked: string
+    @Attribute('stacked-label') isStacked: string,
+    @Attribute('fixed-label') isFixed: string
   ) {
     this.renderer = renderer;
 
@@ -84,7 +85,9 @@ export class TextInput {
 
     this.type = 'text';
     this.lastTouch = 0;
-    this.displayType = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : null));
+
+    // make more gud with pending @Attributes API
+    this.displayType = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : null)));
 
     this.app = app;
     this.elementRef = elementRef;

From ce2e4a3e325ea9f467eb55dd7e93be4f017af583 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 15:48:40 -0600
Subject: [PATCH 079/100] fix back button, add deprecation warnings

---
 CHANGELOG.md                                  |  6 ++++--
 demos/list/basic-list.html                    |  4 ++--
 demos/list/inset-list.html                    |  4 ++--
 demos/list/list-headers.html                  |  4 ++--
 demos/list/no-lines-list.html                 |  4 ++--
 demos/list/sliding-items.html                 |  4 ++--
 ionic/components/menu/menu-toggle.ts          |  5 +++++
 .../components/menu/test/multiple/page1.html  |  4 ++--
 ionic/components/navbar/navbar.ts             |  2 +-
 ionic/components/text-input/label.ts          |  3 +++
 ionic/components/toolbar/modes/ios.scss       |  5 +++--
 ionic/components/toolbar/toolbar.ts           | 19 ++++++++++++++++++-
 12 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2dab535261..893b0b7bea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Breaking Changes
 
-#### CSS Refactor
+##### CSS Refactor
 
 * Attributes are now used by Ionic to add the correct CSS classes to elements
 * Drastically reduced the depth of CSS selectors
@@ -19,7 +19,9 @@
     * ie: Gray navbars in iOS, blue navbars in MD. Identical HTML/JS
 
 
-####  `<ion-nav-items>` renamed to `<ion-buttons>`
+#####  `<ion-nav-items>` renamed to `<ion-buttons>`
 
 * `primary` attribute `<ion-nav-items primary>` now `<ion-buttons start>`
 * `secondary` attribute `<ion-nav-items secondary>` now `<ion-buttons end>`
+
+##### <a menu-toggle> should now be <button menu-toggle>
diff --git a/demos/list/basic-list.html b/demos/list/basic-list.html
index ba143f812b..857f63fc19 100644
--- a/demos/list/basic-list.html
+++ b/demos/list/basic-list.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar class="show-navbar">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Basic List
diff --git a/demos/list/inset-list.html b/demos/list/inset-list.html
index 0aaf03e24d..dc56d52d6c 100644
--- a/demos/list/inset-list.html
+++ b/demos/list/inset-list.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar class="show-navbar">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Inset List
diff --git a/demos/list/list-headers.html b/demos/list/list-headers.html
index f0ca3edbd7..8d460c6be4 100644
--- a/demos/list/list-headers.html
+++ b/demos/list/list-headers.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar class="show-navbar">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     List Headers
diff --git a/demos/list/no-lines-list.html b/demos/list/no-lines-list.html
index 734b743271..088124fac6 100644
--- a/demos/list/no-lines-list.html
+++ b/demos/list/no-lines-list.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar class="show-navbar">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     No-lines List
diff --git a/demos/list/sliding-items.html b/demos/list/sliding-items.html
index 5158570b9a..8b7234cf80 100644
--- a/demos/list/sliding-items.html
+++ b/demos/list/sliding-items.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar class="show-navbar">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Sliding Items
diff --git a/ionic/components/menu/menu-toggle.ts b/ionic/components/menu/menu-toggle.ts
index 6f1fdb3e35..2bdfdfe4a6 100644
--- a/ionic/components/menu/menu-toggle.ts
+++ b/ionic/components/menu/menu-toggle.ts
@@ -34,6 +34,11 @@ export class MenuToggle extends Ion {
     this.app = app;
     this.viewCtrl = viewCtrl;
     this.withinNavbar = !!navbar;
+
+    // Deprecation warning
+    if (this.withinNavbar && elementRef.nativeElement.tagName === 'A') {
+      console.warn('Menu toggles within a navbar should use <button menu-toggle> instead of <a toggle>')
+    }
   }
 
   /**
diff --git a/ionic/components/menu/test/multiple/page1.html b/ionic/components/menu/test/multiple/page1.html
index a8e989f07c..d6cb252a13 100644
--- a/ionic/components/menu/test/multiple/page1.html
+++ b/ionic/components/menu/test/multiple/page1.html
@@ -1,8 +1,8 @@
 
 <ion-navbar *navbar>
-  <a [menu-toggle]="activeMenu">
+  <button [menu-toggle]="activeMenu">
     <icon menu></icon>
-  </a>
+  </button>
   <ion-title>
     Multiple Menus
   </ion-title>
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index 7145a01aa0..833c3fdfae 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -65,7 +65,7 @@ class ToolbarBackground {
   selector: 'ion-navbar',
   template:
     '<div class="toolbar-background"></div>' +
-    '<button class="back-button" [hidden]="hideBackButton">' +
+    '<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
       '<icon class="back-button-icon" [name]="bbIcon"></icon>' +
       '<span class="back-button-text">' +
         '<span class="back-default">{{bbText}}</span>' +
diff --git a/ionic/components/text-input/label.ts b/ionic/components/text-input/label.ts
index 4ab39bfae4..507f69e3d7 100644
--- a/ionic/components/text-input/label.ts
+++ b/ionic/components/text-input/label.ts
@@ -79,6 +79,9 @@ export class Label {
     }
   }
 
+  /**
+   * @private
+   */
   addClass(className) {
     this.renderer.setElementClass(this.elementRef, className, true);
   }
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 417c3e39af..b1ec74b9fa 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -85,8 +85,9 @@ ion-title {
       background-color: $color-value;
       border-color: darken($color-value, 10%);
     }
-
-    .toolbar-title {
+    
+    .toolbar-title,
+    .bar-button-default {
       color: inverse($color-value);
     }
   }
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index 21290614e4..f6cd4f608b 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -149,7 +149,7 @@ export class ToolbarTitle extends Ion {
  * @private
  */
 @Directive({
-  selector: 'ion-buttons,[menu-toggle]'
+  selector: 'ion-buttons,[menu-toggle],ion-nav-items'
 })
 export class ToolbarItem {
   constructor(
@@ -160,6 +160,23 @@ export class ToolbarItem {
     toolbar && toolbar.addItemRef(elementRef);
     navbar && navbar.addItemRef(elementRef);
     this.inToolbar = !!(toolbar || navbar);
+
+    // Deprecation warning
+    if (elementRef.nativeElement.tagName === 'ION-NAV-ITEMS') {
+
+      if (elementRef.nativeElement.hasAttribute('primary')) {
+        console.warn('<ion-nav-items primary> has been renamed to <ion-buttons start>, please update your HTML');
+        elementRef.nativeElement.setAttribute('start', '');
+
+      } else if (elementRef.nativeElement.hasAttribute('secondary')) {
+        console.warn('<ion-nav-items secondary> has been renamed to <ion-buttons end>, please update your HTML');
+        elementRef.nativeElement.setAttribute('end', '');
+
+      } else {
+        console.warn('<ion-nav-items> has been renamed to <ion-buttons>, please update your HTML');
+      }
+    }
+
   }
 
   @ContentChildren(Button)

From afaf4d6de403b0297f682e16ae04e3c0f2abdcc0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 16:58:50 -0500
Subject: [PATCH 080/100] refactor(text-input): flattened css selectors,
 renamed some, cleaned up styles

references #689
---
 ionic/components/card/modes/md.scss         |  2 +-
 ionic/components/text-input/label.scss      | 31 ++++----
 ionic/components/text-input/modes/ios.scss  | 50 ++++++++----
 ionic/components/text-input/modes/md.scss   | 84 +++++++++++++--------
 ionic/components/text-input/text-input.scss |  1 +
 ionic/components/text-input/text-input.ts   |  5 +-
 6 files changed, 109 insertions(+), 64 deletions(-)

diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss
index 4c7a2d22c0..f08581434a 100644
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -23,7 +23,7 @@ $card-md-thumbnail-size:              8rem !default;
 $card-md-background-color:            $list-md-background-color !default;
 $card-md-box-shadow:                  0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 $card-md-border-radius:               2px !default;
-$card-md-font-size:                   1.4rem !default;
+$card-md-font-size:                   1.6rem !default;
 $card-md-line-height:                 1.5 !default;
 
 $card-md-text-color:                  #222 !default;
diff --git a/ionic/components/text-input/label.scss b/ionic/components/text-input/label.scss
index d5987a5955..df13d1281e 100644
--- a/ionic/components/text-input/label.scss
+++ b/ionic/components/text-input/label.scss
@@ -12,7 +12,11 @@ ion-label {
   pointer-events: none;
 }
 
-[fixed-label] ion-label {
+
+// Stacked & Floating Inputs
+// --------------------------------------------------
+
+.fixed-label {
   width: 30%;
   min-width: 100px;
   max-width: 200px;
@@ -22,16 +26,17 @@ ion-label {
 [floating-label] {
   flex-direction: column;
   align-items: flex-start;
-
-  ion-label {
-    align-self: stretch;
-    margin-bottom: 0;
-    max-width: 100%;
-  }
-
-  .item-input {
-    align-self: stretch;
-    width: auto;
-  }
-
+}
+
+.stacked-label,
+.floating-label {
+  align-self: stretch;
+  margin-bottom: 0;
+  max-width: 100%;
+}
+
+.stacked-input,
+.floating-input {
+  align-self: stretch;
+  width: auto;
 }
diff --git a/ionic/components/text-input/modes/ios.scss b/ionic/components/text-input/modes/ios.scss
index 12be1c2d35..ada044e3b1 100644
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -9,17 +9,15 @@ $text-input-ios-background-color:    $list-ios-background-color !default;
 $text-input-ios-label-color:         #7f7f7f !default;
 
 
+// Default Input
+// --------------------------------------------------
+
 .item-input {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
   padding: 0;
   background-color: $text-input-ios-background-color;
 }
 
-ion-input[inset] .item-input {
-  margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left;
-  padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
-}
-
 ion-label {
   margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0;
   color: $text-input-ios-label-color;
@@ -29,30 +27,50 @@ ion-label + .item-input {
   margin-left: $item-ios-padding-left;
 }
 
-[stacked-label] ion-label {
+
+// Inset Input
+// --------------------------------------------------
+
+.inset-input {
+  margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) $item-ios-padding-left;
+  padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2);
+}
+
+
+// Stacked & Floating Inputs
+// --------------------------------------------------
+
+.stacked-label {
   font-size: 1.2rem;
   margin-bottom: 4px;
 }
 
-[stacked-label] .item-input,
-[floating-label] .item-input {
-  margin-left: 0;
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
-[floating-label] ion-label {
+.floating-label {
   margin-bottom: 0;
   transform-origin: left top;
   transform: translate3d(0, 27px, 0);
   transition: transform 150ms ease-in-out;
 }
 
-[floating-label].input-focused ion-label,
-[floating-label].input-has-value ion-label  {
+.stacked-input,
+.floating-input {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.input-focused .floating-label,
+.input-has-value .floating-label {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 
+ion-label + .stacked-input,
+ion-label + .floating-input {
+  margin-left: 0;
+}
+
+
+// Generate iOS label colors
+// --------------------------------------------------
 
 @each $color-name, $color-value in $colors-ios {
   ion-label[#{$color-name}] {
diff --git a/ionic/components/text-input/modes/md.scss b/ionic/components/text-input/modes/md.scss
index a371cdcd88..ad6f3941f3 100644
--- a/ionic/components/text-input/modes/md.scss
+++ b/ionic/components/text-input/modes/md.scss
@@ -12,77 +12,97 @@ $text-input-md-hightlight-color-valid:      map-get($colors-md, secondary) !defa
 $text-input-md-hightlight-color-invalid:    map-get($colors-md, danger) !default;
 
 
+// Default Input
+// --------------------------------------------------
+
 .item-input {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
   padding: 0;
   background-color: $text-input-md-background-color;
 }
 
-ion-input[inset] .item-input {
-  margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
-  padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
-}
-
 ion-label {
   margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom ($item-md-padding-left / 2);
   color: $text-input-md-label-color;
 }
 
+
+// Inset Input
+// --------------------------------------------------
+
+.inset-input {
+  margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left;
+  padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2);
+}
+
+
+// Highlighted Input
+// --------------------------------------------------
+
 ion-input:after {
   position: absolute;
   bottom: 0;
   right: 0;
   left: $item-md-padding-left;
-  border-bottom: 2px solid transparent;
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+  border-bottom-color: transparent;
   content: '';
 }
 
 .input-focused:after {
-  border-bottom: 2px solid $text-input-md-highlight-color;
+  border-bottom-color: $text-input-md-highlight-color;
 }
 
 ion-input.ng-valid.input-has-value:after {
-  border-bottom: 2px solid $text-input-md-hightlight-color-valid;
+  border-bottom-color: $text-input-md-hightlight-color-valid;
 }
 
 ion-input.ng-invalid.ng-touched:after {
-  border-bottom: 2px solid $text-input-md-hightlight-color-invalid;
+  border-bottom-color: $text-input-md-hightlight-color-invalid;
 }
 
-[stacked-label] ion-label {
+
+// Stacked & Floating Inputs
+// --------------------------------------------------
+
+.stacked-label {
   font-size: 1.2rem;
-  margin-bottom: 0;
 }
 
-[stacked-label] ion-label,
-[floating-label] ion-label {
-  margin-left: 0;
-}
-
-[stacked-label].input-focused ion-label,
-[floating-label].input-focused ion-label {
-  color: $text-input-md-highlight-color;
-}
-
-[stacked-label] .item-input,
-[floating-label] .item-input {
-  margin-bottom: 8px;
-  margin-top: 8px;
-  margin-left: 0;
-}
-
-[floating-label] ion-label {
-  margin-bottom: 0;
+.floating-label {
   transform-origin: left top;
   transform: translate3d(0, 27px, 0);
   transition: transform 150ms ease-in-out;
 }
 
-[floating-label].input-focused ion-label,
-[floating-label].input-has-value ion-label  {
+.stacked-label,
+.floating-label {
+  margin-left: 0;
+  margin-bottom: 0;
+}
+
+.stacked-input,
+.floating-input {
+  margin-left: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.input-focused .stacked-label,
+.input-focused .floating-label {
+  color: $text-input-md-highlight-color;
+}
+
+.input-focused .floating-label,
+.input-has-value .floating-label  {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 
+
+// Generate Material Design label colors
+// --------------------------------------------------
+
 @each $color-name, $color-value in $colors-md {
   ion-label[#{$color-name}] {
     color: $color-value !important;
diff --git a/ionic/components/text-input/text-input.scss b/ionic/components/text-input/text-input.scss
index 4eba474f0e..618f19c1dd 100644
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -24,6 +24,7 @@ $text-input-textarea-resize:          none !default;
 [scroll-assist] {
   width: 1px;
   height: 1px;
+  padding: 0;
   background: transparent;
   border: 0;
   pointer-events: none;
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index 35ed230f5d..f5f6f21a80 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -76,7 +76,8 @@ export class TextInput {
     @Optional() navCtrl: NavController,
     @Attribute('floating-label') isFloating: string,
     @Attribute('stacked-label') isStacked: string,
-    @Attribute('fixed-label') isFixed: string
+    @Attribute('fixed-label') isFixed: string,
+    @Attribute('inset') isInset: string
   ) {
     this.renderer = renderer;
 
@@ -87,7 +88,7 @@ export class TextInput {
     this.lastTouch = 0;
 
     // make more gud with pending @Attributes API
-    this.displayType = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : null)));
+    this.displayType = (isFloating === '' ? 'floating' : (isStacked === '' ? 'stacked' : (isFixed === '' ? 'fixed' : (isInset === '' ? 'inset' : null))));
 
     this.app = app;
     this.elementRef = elementRef;

From 96616842ecf76ebcedb79e04c541bb861f7d3b28 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 17:08:31 -0500
Subject: [PATCH 081/100] fix(button): fixed block button margin left & right

references #689
---
 ionic/components/button/button.scss    | 2 --
 ionic/components/button/modes/ios.scss | 2 ++
 ionic/components/button/modes/md.scss  | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 129f26b846..3a30935ded 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -48,8 +48,6 @@ a.button {
 .button-block {
   display: flex;
   clear: both;
-  margin-right: 0;
-  margin-left: 0;
   width: 100%;
 
   &:after {
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index 983747486a..37e1fc151a 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -96,6 +96,8 @@ $button-ios-small-icon-font-size:     1.3em !default;
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
   line-height: $button-ios-height;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 1c69af9b15..b5e55f8dc7 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -121,6 +121,15 @@ $button-md-small-icon-font-size:           1.4em !default;
 }
 
 
+// Material Design Block Button
+// --------------------------------------------------
+
+.button-block {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+
 // Material Design Outline Button
 // --------------------------------------------------
 

From 6eb2c7eaeb59e094722bc4a6c04631d22f3e779c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 17:36:01 -0500
Subject: [PATCH 082/100] fix(button): fix button icons and fab buttons

references #689
---
 ionic/components/button/button-fab.scss  | 10 +++++-----
 ionic/components/button/button-icon.scss |  1 -
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/ionic/components/button/button-fab.scss b/ionic/components/button/button-fab.scss
index 7494950782..eaa925c709 100644
--- a/ionic/components/button/button-fab.scss
+++ b/ionic/components/button/button-fab.scss
@@ -31,23 +31,23 @@ $button-fab-size:           56px !default;
 
 }
 
-.button-fab-center {
+[fab-center] {
   left: 50%;
   margin-left: -$button-fab-size / 2;
 }
 
-.button-fab-top {
+[fab-top] {
   top: 16px;
 }
 
-.button-fab-right {
+[fab-right] {
   right: 16px;
 }
 
-.button-fab-bottom {
+[fab-bottom] {
   bottom: 16px;
 }
 
-.button-fab-left {
+[fab-left] {
   left: 16px;
 }
diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss
index 62870852b7..ea334e0422 100644
--- a/ionic/components/button/button-icon.scss
+++ b/ionic/components/button/button-icon.scss
@@ -5,7 +5,6 @@
 
 
 .button-icon-left icon {
-  margin-left: -0.3em;
   padding-right: 0.3em;
   font-size: 1.4em;
   line-height: 0.67;

From 12f61c2fba32ccf4eff5677abb40c43faa31cf13 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 17:49:28 -0500
Subject: [PATCH 083/100] fix(badge): fixed badge styles and added modes to
 differentiate border radius

references #689
---
 ionic/components.ios.scss                   |  1 +
 ionic/components.md.scss                    |  1 +
 ionic/components/badge/badge.scss           |  2 --
 ionic/components/badge/modes/ios.scss       | 11 +++++++++++
 ionic/components/badge/modes/md.scss        | 11 +++++++++++
 ionic/components/badge/test/basic/main.html | 20 ++++++++++----------
 6 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 ionic/components/badge/modes/ios.scss
 create mode 100644 ionic/components/badge/modes/md.scss

diff --git a/ionic/components.ios.scss b/ionic/components.ios.scss
index d3cee062eb..037a0ab7da 100644
--- a/ionic/components.ios.scss
+++ b/ionic/components.ios.scss
@@ -7,6 +7,7 @@
 @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",
diff --git a/ionic/components.md.scss b/ionic/components.md.scss
index 55ed41bb6f..bd97ece4c2 100644
--- a/ionic/components.md.scss
+++ b/ionic/components.md.scss
@@ -7,6 +7,7 @@
 @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",
diff --git a/ionic/components/badge/badge.scss b/ionic/components/badge/badge.scss
index 091160ec4d..24da8e84f2 100644
--- a/ionic/components/badge/badge.scss
+++ b/ionic/components/badge/badge.scss
@@ -5,7 +5,6 @@
 
 $badge-font-size:                 1.3rem !default;
 $badge-font-weight:               bold !default;
-$badge-border-radius:             10px !default;
 
 
 ion-badge {
@@ -13,7 +12,6 @@ ion-badge {
 
   padding: 3px 8px;
   min-width: 10px;
-  border-radius: $badge-border-radius;
 
   vertical-align: baseline;
   text-align: center;
diff --git a/ionic/components/badge/modes/ios.scss b/ionic/components/badge/modes/ios.scss
new file mode 100644
index 0000000000..a369cb4015
--- /dev/null
+++ b/ionic/components/badge/modes/ios.scss
@@ -0,0 +1,11 @@
+@import "../badge";
+
+// iOS Badge
+// --------------------------------------------------
+
+$badge-ios-border-radius:             10px !default;
+
+
+ion-badge {
+  border-radius: $badge-ios-border-radius;
+}
diff --git a/ionic/components/badge/modes/md.scss b/ionic/components/badge/modes/md.scss
new file mode 100644
index 0000000000..4156b406f2
--- /dev/null
+++ b/ionic/components/badge/modes/md.scss
@@ -0,0 +1,11 @@
+@import "../badge";
+
+// Material Design Badge
+// --------------------------------------------------
+
+$badge-md-border-radius:             4px !default;
+
+
+ion-badge {
+  border-radius: $badge-md-border-radius;
+}
diff --git a/ionic/components/badge/test/basic/main.html b/ionic/components/badge/test/basic/main.html
index 80548bc1a2..3a2f0cf16a 100644
--- a/ionic/components/badge/test/basic/main.html
+++ b/ionic/components/badge/test/basic/main.html
@@ -13,23 +13,23 @@
     </ion-item>
     <ion-item>
       Primary Badge
-      <ion-badge item-right class="badge-primary">99</ion-badge>
+      <ion-badge item-right primary>99</ion-badge>
     </ion-item>
     <ion-item>
       Secondary Badge
-      <ion-badge item-right class="badge-secondary">99</ion-badge>
+      <ion-badge item-right secondary>99</ion-badge>
     </ion-item>
     <ion-item>
       Danger Badge
-      <ion-badge item-right class="badge-danger">99</ion-badge>
+      <ion-badge item-right danger>99</ion-badge>
     </ion-item>
     <ion-item>
       Light Badge
-      <ion-badge item-right class="badge-light">99</ion-badge>
+      <ion-badge item-right light>99</ion-badge>
     </ion-item>
     <ion-item>
       Dark Badge
-      <ion-badge item-right class="badge-dark">99</ion-badge>
+      <ion-badge item-right dark>99</ion-badge>
     </ion-item>
   </ion-list>
   <ion-list>
@@ -42,23 +42,23 @@
     </ion-item>
     <ion-item>
       Primary Badge
-      <ion-badge item-left class="badge-primary">99</ion-badge>
+      <ion-badge item-left primary>99</ion-badge>
     </ion-item>
     <ion-item>
       Secondary Badge
-      <ion-badge item-left class="badge-secondary">99</ion-badge>
+      <ion-badge item-left secondary>99</ion-badge>
     </ion-item>
     <ion-item>
       Danger Badge
-      <ion-badge item-left class="badge-danger">99</ion-badge>
+      <ion-badge item-left danger>99</ion-badge>
     </ion-item>
     <ion-item>
       Light Badge
-      <ion-badge item-left class="badge-light">99</ion-badge>
+      <ion-badge item-left light>99</ion-badge>
     </ion-item>
     <ion-item>
       Dark Badge
-      <ion-badge item-left class="badge-dark">99</ion-badge>
+      <ion-badge item-left dark>99</ion-badge>
     </ion-item>
   </ion-list>
 </ion-content>

From ece85f7a07097f9906d29a8696c35e2542070fee Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 17:49:47 -0500
Subject: [PATCH 084/100] fix(list/button): fixed button icon margin and list
 header bg color in inset

references #689
---
 ionic/components/button/button-icon.scss | 1 -
 ionic/components/list/modes/ios.scss     | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ionic/components/button/button-icon.scss b/ionic/components/button/button-icon.scss
index ea334e0422..4b6c2a057f 100644
--- a/ionic/components/button/button-icon.scss
+++ b/ionic/components/button/button-icon.scss
@@ -12,7 +12,6 @@
 }
 
 .button-icon-right icon {
-  margin-right: -0.2em;
   padding-left: 0.4em;
   font-size: 1.4em;
   line-height: 0.67;
diff --git a/ionic/components/list/modes/ios.scss b/ionic/components/list/modes/ios.scss
index f377a826fd..415b1af0d2 100644
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -134,6 +134,10 @@ ion-list[inset] {
   margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left;
   border-radius: $list-inset-ios-border-radius;
 
+  ion-list-header {
+    background-color: $list-ios-background-color;
+  }
+
   .item {
     border-bottom: 1px solid $list-ios-border-color;
 

From 0c6f87a541506c80f9cacc277d67ffe071ddf6be Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 8 Dec 2015 18:17:31 -0500
Subject: [PATCH 085/100] fix(segment/toolbar): fixed segment padding iOS and
 toolbar text for MD

references #689
---
 ionic/components/segment/modes/ios.scss | 5 -----
 ionic/components/toolbar/modes/md.scss  | 2 ++
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index cc9feea7e5..1b2f0d6ae8 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -18,13 +18,8 @@ $segment-button-ios-font-size:                1.3rem !default;
 $segment-button-ios-border-radius:            4px !default;
 
 $segment-button-ios-toolbar-button-max-width: 100px !default;
-$segment-button-ios-padding:                  0 16px !default;
 
 
-ion-segment {
-  padding: $segment-button-ios-padding;
-}
-
 .segment-button {
   min-height: $segment-button-ios-min-height;
   line-height: $segment-button-ios-line-height;
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 00aa75102e..139efd8838 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -115,6 +115,8 @@ ion-buttons[right] {
   border: 0;
   font-size: $toolbar-md-button-font-size;
   border-radius: $bar-button-md-border-radius;
+  text-transform: uppercase;
+  font-weight: 500;
 }
 
 @mixin md-bar-button-default($color-name, $color-value) {

From 30b88d746b414577721aa78a52a2fc1ba28ae328 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 21:38:26 -0600
Subject: [PATCH 086/100] chore(): add ng prefix to lifecycle interfaces

---
 ionic/components/app/id.ts                  | 6 +++---
 ionic/components/checkbox/checkbox.ts       | 4 ++--
 ionic/components/content/content.ts         | 4 ++--
 ionic/components/icon/icon.ts               | 2 +-
 ionic/components/ion.ts                     | 2 +-
 ionic/components/list/list.ts               | 8 ++++----
 ionic/components/menu/menu-types.ts         | 2 +-
 ionic/components/menu/menu.ts               | 8 ++++----
 ionic/components/nav/nav.ts                 | 4 ++--
 ionic/components/navbar/navbar.ts           | 4 ++--
 ionic/components/popup/popup.ts             | 2 +-
 ionic/components/radio/radio.ts             | 6 +++---
 ionic/components/scroll/pull-to-refresh.ts  | 2 +-
 ionic/components/scroll/scroll.ts           | 2 +-
 ionic/components/searchbar/searchbar.ts     | 2 +-
 ionic/components/segment/segment.ts         | 2 +-
 ionic/components/slides/slides.ts           | 2 +-
 ionic/components/slides/test/basic/index.ts | 2 +-
 ionic/components/switch/switch.ts           | 4 ++--
 ionic/components/tabs/tab.ts                | 4 ++--
 ionic/components/tabs/tabs.ts               | 6 +++---
 ionic/components/tabs/test/ghost/index.ts   | 4 ++--
 ionic/components/text-input/text-input.ts   | 6 +++---
 package.json                                | 5 +++--
 scripts/e2e/e2e.template.html               | 2 +-
 25 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/ionic/components/app/id.ts b/ionic/components/app/id.ts
index d5c5879e72..c89f3f1f5e 100644
--- a/ionic/components/app/id.ts
+++ b/ionic/components/app/id.ts
@@ -42,14 +42,14 @@ export class IdRef {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     this.app.register(this.id, this.component);
   }
 
   /**
    * @private
    */
-  onDestroy() {
+  ngOnDestroy() {
     this.app.unregister(this.id);
   }
 }
@@ -75,7 +75,7 @@ export class Attr {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     this.renderer.setElementAttribute(this.elementRef, this.attr, '');
   }
 }
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index 17704a8b86..1f9bc4431a 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -65,7 +65,7 @@ export class Checkbox {
     if (ngControl) ngControl.valueAccessor = this;
   }
 
-  onInit() {
+  ngOnInit() {
     this.labelId = 'label-' + this.inputId;
   }
 
@@ -118,7 +118,7 @@ export class Checkbox {
   /**
    * @private
    */
-  onDestroy() {
+  ngOnDestroy() {
     this.form.deregister(this);
   }
 }
diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts
index f95d9dd1fe..4f3cc7c4bb 100644
--- a/ionic/components/content/content.ts
+++ b/ionic/components/content/content.ts
@@ -49,8 +49,8 @@ export class Content extends Ion {
   /**
    * @private
    */
-  onInit() {
-    super.onInit();
+  ngOnInit() {
+    super.ngOnInit();
     this.scrollElement = this.getNativeElement().children[0];
   }
 
diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts
index 14a9b4b43c..e329e07949 100644
--- a/ionic/components/icon/icon.ts
+++ b/ionic/components/icon/icon.ts
@@ -42,7 +42,7 @@ export class Icon {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     let ele = this.elementRef.nativeElement;
 
     if (this.mode == 'ios' && this.ios) {
diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts
index 3ddb77f0ea..fc67620d11 100644
--- a/ionic/components/ion.ts
+++ b/ionic/components/ion.ts
@@ -14,7 +14,7 @@ export class Ion {
     this.config = config;
   }
 
-  onInit() {
+  ngOnInit() {
     let cls = this.constructor;
 
     if (cls.defaultInputs && this.config) {
diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts
index d5e932bac2..0189f0c2bd 100644
--- a/ionic/components/list/list.ts
+++ b/ionic/components/list/list.ts
@@ -39,8 +39,8 @@ export class List extends Ion {
   /**
    * @private
    */
-  onInit() {
-    super.onInit();
+  ngOnInit() {
+    super.ngOnInit();
 
     if (util.isDefined(this.virtual)) {
       console.log('Content', this.content);
@@ -53,7 +53,7 @@ export class List extends Ion {
   /**
    * @private
    */
-  onDestroy() {
+  ngOnDestroy() {
     this.ele = null;
     this.slidingGesture && this.slidingGesture.unlisten();
   }
@@ -104,7 +104,7 @@ export class List extends Ion {
   /**
    * @private
    */
-  afterViewInit() {
+  ngAfterViewInit() {
     this._init = true;
     if (this._enableSliding) {
       this.enableSlidingItems(true);
diff --git a/ionic/components/menu/menu-types.ts b/ionic/components/menu/menu-types.ts
index db1e7614a4..6396604c32 100644
--- a/ionic/components/menu/menu-types.ts
+++ b/ionic/components/menu/menu-types.ts
@@ -67,7 +67,7 @@ export class MenuType {
     return promise;
   }
 
-  onDestroy() {
+  ngOnDestroy() {
     this.open && this.open.dispose();
     this.close && this.close.dispose();
     this.seek && this.seek.dispose();
diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts
index 39fc69c370..db383a9038 100644
--- a/ionic/components/menu/menu.ts
+++ b/ionic/components/menu/menu.ts
@@ -92,8 +92,8 @@ export class Menu extends Ion {
   /**
    * @private
    */
-  onInit() {
-    super.onInit();
+  ngOnInit() {
+    super.ngOnInit();
     let self = this;
 
     let content = self.content;
@@ -352,11 +352,11 @@ export class Menu extends Ion {
   /**
    * @private
    */
-  onDestroy() {
+  ngOnDestroy() {
     this.app.unregister(this.id);
     this._gesture && this._gesture.destroy();
     this._targetGesture && this._targetGesture.destroy();
-    this._type && this._type.onDestroy();
+    this._type && this._type.ngOnDestroy();
     this._cntEle = null;
   }
 
diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts
index 110922a74e..94ae9a877d 100644
--- a/ionic/components/nav/nav.ts
+++ b/ionic/components/nav/nav.ts
@@ -136,8 +136,8 @@ export class Nav extends NavController {
   /**
    * @private
    */
-  onInit() {
-    super.onInit();
+  ngOnInit() {
+    super.ngOnInit();
 
     if (this.root) {
       if (typeof this.root !== 'function') {
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index dabe77ab62..fa2c28ae5e 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -114,8 +114,8 @@ export class Navbar extends ToolbarBase {
   /**
    * @private
    */
-  onInit() {
-    super.onInit();
+  ngOnInit() {
+    super.ngOnInit();
     let hideBackButton = this.hideBackButton;
     if (typeof hideBackButton === 'string') {
       this.hideBackButton = (hideBackButton === '' || hideBackButton === 'true');
diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts
index 125197776e..ee21acc5a2 100644
--- a/ionic/components/popup/popup.ts
+++ b/ionic/components/popup/popup.ts
@@ -300,7 +300,7 @@ class PopupCmp {
     }
   }
 
-  onInit() {
+  ngOnInit() {
     setTimeout(() => {
       // TODO: make more better, no DOM BS
       this.promptInput = this.elementRef.nativeElement.querySelector('input');
diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts
index b331ff4615..4ac216bd93 100644
--- a/ionic/components/radio/radio.ts
+++ b/ionic/components/radio/radio.ts
@@ -72,7 +72,7 @@ export class RadioGroup extends Ion {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     let header = this.headerQuery.first;
     if (header) {
       if (!header.id) {
@@ -210,8 +210,8 @@ export class RadioButton extends Ion {
   /**
    * @private
    */
-  onInit() {
-    super.onInit();
+  ngOnInit() {
+    super.ngOnInit();
     this.group.registerRadio(this);
     this.labelId = 'label-' + this.id;
   }
diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts
index 774f92481b..2dc200cb01 100644
--- a/ionic/components/scroll/pull-to-refresh.ts
+++ b/ionic/components/scroll/pull-to-refresh.ts
@@ -84,7 +84,7 @@ export class Refresher {
     this.pulling = new EventEmitter('pulling');
   }
 
-  onInit() {
+  ngOnInit() {
     this.initEvents();
   }
 
diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts
index 30fcdcbae8..a6bcc1ae6d 100644
--- a/ionic/components/scroll/scroll.ts
+++ b/ionic/components/scroll/scroll.ts
@@ -56,7 +56,7 @@ export class Scroll extends Ion {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     this.scrollElement = this.getNativeElement().children[0];
   }
 
diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts
index cb69280e8a..fa1ddf3313 100644
--- a/ionic/components/searchbar/searchbar.ts
+++ b/ionic/components/searchbar/searchbar.ts
@@ -74,7 +74,7 @@ export class Searchbar extends Ion {
    * After the view has initialized check if the searchbar has a value
    * and then store that value in query
    */
-  afterViewInit() {
+  ngAfterViewInit() {
     // If the user passes in a value to the model we should left align
     this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
     this.query = this.ngControl.value || '';
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index 9c6a262de5..32bd431e4b 100644
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -196,7 +196,7 @@ export class SegmentButton {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     this.segment.register(this);
   }
 
diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts
index 4f663b2721..5ec9763846 100644
--- a/ionic/components/slides/slides.ts
+++ b/ionic/components/slides/slides.ts
@@ -110,7 +110,7 @@ export class Slides extends Ion {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     if(!this.options) {
       this.options = {};
     }
diff --git a/ionic/components/slides/test/basic/index.ts b/ionic/components/slides/test/basic/index.ts
index f52423b989..cb020b52ff 100644
--- a/ionic/components/slides/test/basic/index.ts
+++ b/ionic/components/slides/test/basic/index.ts
@@ -34,7 +34,7 @@ class MyApp {
     })
   }
 
-  onInit() {
+  ngOnInit() {
     setTimeout(() => {
       this.slider = this.app.getComponent('slider');
       console.log('Got slider', this.slider);
diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts
index 644ca18e37..625e701803 100644
--- a/ionic/components/switch/switch.ts
+++ b/ionic/components/switch/switch.ts
@@ -160,7 +160,7 @@ export class Switch {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     this.labelId = 'label-' + this.inputId;
   }
 
@@ -238,7 +238,7 @@ export class Switch {
   /**
    * @private
    */
-  onDestroy() {
+  ngOnDestroy() {
     this.removeMoveListener();
     this.switchEle = this.addMoveListener = this.removeMoveListener = null;
     this.form.deregister(this);
diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts
index fa79f20d95..131f6e7005 100644
--- a/ionic/components/tabs/tab.ts
+++ b/ionic/components/tabs/tab.ts
@@ -79,7 +79,7 @@ export class Tab extends NavController {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     if (this._isInitial) {
       this.parent.select(this);
 
@@ -173,7 +173,7 @@ export class Tab extends NavController {
   /**
    * @private
    */
-  onDestroy() {
+  ngOnDestroy() {
     clearTimeout(this._loadTimer);
   }
 
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 67aa6f9cc4..6febe49b76 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -110,8 +110,8 @@ export class Tabs extends Ion {
   /**
    * @private
    */
-  onInit() {
-    super.onInit();
+  ngOnInit() {
+    super.ngOnInit();
     this.preloadTabs = (this.preloadTabs !== "false" && this.preloadTabs !== false);
 
     if (this._highlight) {
@@ -277,7 +277,7 @@ class TabButton extends Ion {
     this.disHover = (config.get('hoverCSS') === false);
   }
 
-  onInit() {
+  ngOnInit() {
     this.tab.btn = this;
     this.hasTitle = !!this.tab.tabTitle;
     this.hasIcon = !!this.tab.tabIcon;
diff --git a/ionic/components/tabs/test/ghost/index.ts b/ionic/components/tabs/test/ghost/index.ts
index 86588d5051..4789aeb584 100644
--- a/ionic/components/tabs/test/ghost/index.ts
+++ b/ionic/components/tabs/test/ghost/index.ts
@@ -109,7 +109,7 @@ class QuesaritoPage {
 export class TabsPage {
   @ViewChildren(Tab) tab : QueryList<Tab>;
 
-  afterViewInit() {
+  ngAfterViewInit() {
     console.log('Tab', this.tab);
     console.log(this.tab.first.setRoot);
   }
@@ -128,6 +128,6 @@ export class TabsPage {
     this.root2 = Tab2;
     this.root3 = Tab3;
   }
-  onInit() {
+  ngOnInit() {
   }
 }
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index 785a3bb4d5..a368527b20 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -119,7 +119,7 @@ export class TextInput {
   /**
    * @private
    */
-  onInit() {
+  ngOnInit() {
     if (this.input && this.label) {
       // if there is an input and an label
       // then give the label an ID
@@ -430,7 +430,7 @@ export class TextInput {
   /**
    * @private
    */
-  onDestroy() {
+  ngOnDestroy() {
     this.deregMove();
     this.form.deregister(this);
   }
@@ -471,7 +471,7 @@ export class TextInputElement {
     }
   }
 
-  onInit() {
+  ngOnInit() {
     this.wrapper && this.wrapper.hasValue(this.value);
   }
 
diff --git a/package.json b/package.json
index da676d7771..5b4c6ca255 100644
--- a/package.json
+++ b/package.json
@@ -20,14 +20,15 @@
     "tooling"
   ],
   "dependencies": {
-    "@reactivex/rxjs": "5.0.0-alpha.7",
-    "angular2": "tlancina/angular-package",
+    "angular2": "2.0.0-alpha.50",
     "colors": "^1.1.2",
+    "es6-promise": "^3.0.2",
     "es6-shim": "0.33.6",
     "inquirer": "0.11.0",
     "lodash": "3.10.1",
     "q": "1.4.1",
     "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-alpha.14",
     "shelljs": "0.5.3",
     "zone.js": "0.5.8"
   },
diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html
index 01cd01b8ab..3a42e28fd2 100644
--- a/scripts/e2e/e2e.template.html
+++ b/scripts/e2e/e2e.template.html
@@ -84,7 +84,7 @@
         "*": "*.js",
         "ionic/*": "ionic/*",
         "angular2/*": "angular2/*",
-        "rx": "rx"
+        "rxjs/*": "rxjs/*"
       }
     })
     System.import("index").then(function(m) {}, console.error.bind(console));

From ec0c146be6cb56734f6b70f8d8172fcfb0d849b8 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 8 Dec 2015 22:00:55 -0600
Subject: [PATCH 087/100] fix(router): create custom ResolvedInstruction class

---
 ionic/components/nav/nav-router.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/ionic/components/nav/nav-router.ts b/ionic/components/nav/nav-router.ts
index fe7d0385bd..a7c17beac1 100644
--- a/ionic/components/nav/nav-router.ts
+++ b/ionic/components/nav/nav-router.ts
@@ -84,8 +84,8 @@ export class NavRouter extends RouterOutlet {
       // generate a componentInstruction from the view's PathRecognizer and params
       let componentInstruction = pathRecognizer.generate(viewCtrl.params.data);
 
-      // create an Instruction from the componentInstruction
-      let instruction = new Instruction(componentInstruction, null);
+      // create a ResolvedInstruction from the componentInstruction
+      let instruction = new ResolvedInstruction(componentInstruction, null);
 
       this._parentRouter.navigateByInstruction(instruction);
     }
@@ -113,3 +113,16 @@ export class NavRouter extends RouterOutlet {
   }
 
 }
+
+// TODO: hacked from
+// https://github.com/angular/angular/blob/6ddfff5cd59aac9099aa6da5118c5598eea7ea11/modules/angular2/src/router/instruction.ts#L207
+class ResolvedInstruction extends Instruction {
+  constructor(public component: ComponentInstruction, public child: Instruction,
+              public auxInstruction: {[key: string]: Instruction}) {
+    super();
+  }
+
+  resolveComponent(): Promise<ComponentInstruction> {
+    return Promise.resolve(this.component);
+  }
+}

From 05aaa2d34d6ac4422713491906c2d47f4ca04308 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 9 Dec 2015 08:26:44 -0600
Subject: [PATCH 088/100] fix templates after alpha50

---
 ionic/components/button/button.ts                       | 2 +-
 ionic/components/nav/test/routing/view2.html            | 2 +-
 ionic/components/text-input/test/form-inputs/main.html  | 2 +-
 ionic/components/text-input/test/inset-inputs/main.html | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 3dbdb6b3cc..37adca5541 100644
--- a/ionic/components/button/button.ts
+++ b/ionic/components/button/button.ts
@@ -60,7 +60,7 @@ export class Button {
     this._readIcon(element);
   }
 
-  afterContentInit() {
+  ngAfterContentInit() {
     this._assignCss(true);
   }
 
diff --git a/ionic/components/nav/test/routing/view2.html b/ionic/components/nav/test/routing/view2.html
index 98ae4bf8f5..3ee8d3f3df 100644
--- a/ionic/components/nav/test/routing/view2.html
+++ b/ionic/components/nav/test/routing/view2.html
@@ -5,7 +5,7 @@
     <button>
       <icon help></icon>
     </button>
-  </ion-nav-item>
+  </ion-buttons>
 </ion-navbar>
 
 <ion-content padding>
diff --git a/ionic/components/text-input/test/form-inputs/main.html b/ionic/components/text-input/test/form-inputs/main.html
index 3356ff2d82..545ed7758b 100644
--- a/ionic/components/text-input/test/form-inputs/main.html
+++ b/ionic/components/text-input/test/form-inputs/main.html
@@ -4,7 +4,7 @@
 
 <ion-content>
 
-  <form (ng-submit)="submit($event)" [ng-form-model]="loginForm" #mf="form" novalidate>
+  <form (ng-submit)="submit($event)" [ng-form-model]="loginForm" #mf="ngForm" novalidate>
 
     <ion-list>
       <ion-input>
diff --git a/ionic/components/text-input/test/inset-inputs/main.html b/ionic/components/text-input/test/inset-inputs/main.html
index 1fd688c97b..4b8476c78b 100644
--- a/ionic/components/text-input/test/inset-inputs/main.html
+++ b/ionic/components/text-input/test/inset-inputs/main.html
@@ -46,7 +46,7 @@
       <icon search item-left></icon>
       <input value="Inset input inside a list" type="text">
       <button outline item-right>Search</button>
-    </ion-input inset>
+    </ion-input>
 
   </ion-list>
 

From 6ca7e357b62cc60d41712ffa96e9bda9141556e3 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 9 Dec 2015 09:46:55 -0600
Subject: [PATCH 089/100] chore(): remove navbarStyle/tabbarStyle configs

---
 ionic/components/navbar/navbar.ts         | 12 +-----------
 ionic/components/tabs/tabs.ts             |  3 +--
 ionic/components/tabs/test/basic/index.ts |  6 +-----
 3 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index e717945b28..517ff91d72 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -82,8 +82,7 @@ class ToolbarBackground {
     'class': 'toolbar'
   },
   inputs: [
-    'hideBackButton',
-    'navbarStyle'
+    'hideBackButton'
   ],
   directives: [BackButton, BackButtonText, Icon, ToolbarBackground]
 })
@@ -100,11 +99,6 @@ export class Navbar extends ToolbarBase {
     this.app = app;
     this.renderer = renderer;
 
-    let navbarStyle = config.get('navbarStyle');
-    if (navbarStyle) {
-      renderer.setElementAttribute(elementRef, navbarStyle, '');
-    }
-
     viewCtrl && viewCtrl.setNavbar(this);
 
     this.bbIcon = config.get('backButtonIcon');
@@ -120,10 +114,6 @@ export class Navbar extends ToolbarBase {
     if (typeof hideBackButton === 'string') {
       this.hideBackButton = (hideBackButton === '' || hideBackButton === 'true');
     }
-
-    if (this.navbarStyle) {
-      this.renderer.setElementAttribute(this.elementRef, this.navbarStyle, '');
-    }
   }
 
   /**
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 6febe49b76..0e9c91070c 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -39,7 +39,6 @@ import {rafFrames} from '../../util/dom';
   defaultInputs: {
     'tabbarPlacement': 'bottom',
     'tabbarIcons': 'top',
-    'tabbarStyle': 'default',
     'preloadTabs': false
   },
   template:
@@ -47,7 +46,7 @@ import {rafFrames} from '../../util/dom';
       '<template navbar-anchor></template>' +
     '</ion-navbar-section>' +
     '<ion-tabbar-section>' +
-      '<tabbar role="tablist" [attr]="tabbarStyle">' +
+      '<tabbar role="tablist">' +
         '<a *ng-for="#t of _tabs" [tab]="t" class="tab-button" role="tab">' +
           '<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' +
           '<span class="tab-button-text">{{t.tabTitle}}</span>' +
diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts
index 5a1209855c..6648d682c1 100644
--- a/ionic/components/tabs/test/basic/index.ts
+++ b/ionic/components/tabs/test/basic/index.ts
@@ -104,11 +104,7 @@ class Tab3 {}
       <ion-tab tab-title="Schedule" tab-icon="globe" [root]="root2"></ion-tab>
       <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="root3"></ion-tab>
     </ion-tabs>
-  `,
-  config: {
-    navbarStyle: 'secondary',
-    tabbarStyle: 'secondary'
-  }
+  `
 })
 export class TabsPage {
   constructor() {

From 3bebe9869097b873448dea9b3899a0fad5fb12bd Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 12:52:23 -0500
Subject: [PATCH 090/100] fix(tabs): fix tab text color MD

references #689
---
 ionic/components/tabs/modes/md.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ionic/components/tabs/modes/md.scss b/ionic/components/tabs/modes/md.scss
index 38b09d5d5c..3d8459c4e9 100644
--- a/ionic/components/tabs/modes/md.scss
+++ b/ionic/components/tabs/modes/md.scss
@@ -34,6 +34,7 @@ tabbar {
 
   &[aria-selected=true] {
     opacity: 1.0;
+    color: $tab-button-md-active-color;
   }
 }
 

From 677277de90d4c7e5c82586807961b481fc484c97 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 13:00:08 -0500
Subject: [PATCH 091/100] fix(segment): add ion-content back in for the sake of
 snapshot

---
 ionic/components/segment/test/basic/main.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index 486746e657..6e6af81ecb 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -25,7 +25,7 @@
   </ion-segment>
 </ion-toolbar>
 
-<div padding>
+<ion-content padding>
   <div>Are we friends or enemies? <b>{{ relationship }}</b></div>
 
   <h4>Map mode: NgControl</h4>
@@ -80,7 +80,7 @@
   </ion-segment>
 
   <p>Model Style: <b>Model {{ modelStyle }}</b></p>
-</div>
+</ion-content>
 
 <ion-toolbar position="bottom" primary>
   <ion-segment [(ng-model)]="appType" light>

From 33e2c0b151e698e664699e419b6cc25a7514da9d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 13:02:23 -0500
Subject: [PATCH 092/100] fix(card): fix font-size for items

references #689
---
 ionic/components/card/modes/md.scss | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/ionic/components/card/modes/md.scss b/ionic/components/card/modes/md.scss
index f08581434a..9b61313270 100644
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -23,7 +23,7 @@ $card-md-thumbnail-size:              8rem !default;
 $card-md-background-color:            $list-md-background-color !default;
 $card-md-box-shadow:                  0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 $card-md-border-radius:               2px !default;
-$card-md-font-size:                   1.6rem !default;
+$card-md-font-size:                   1.4rem !default;
 $card-md-line-height:                 1.5 !default;
 
 $card-md-text-color:                  #222 !default;
@@ -61,10 +61,6 @@ ion-card {
     }
   }
 
-  .item {
-    font-size: $card-md-font-size;
-  }
-
   .item-inner {
     border: none;
   }

From 4666f6c6878cc76d5a3d39508205949617543304 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 14:13:29 -0500
Subject: [PATCH 093/100] fix(list): fixed list border color for MD

references #689
---
 ionic/themes/default.md.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ionic/themes/default.md.scss b/ionic/themes/default.md.scss
index 3a087a40ed..69e90ae815 100644
--- a/ionic/themes/default.md.scss
+++ b/ionic/themes/default.md.scss
@@ -37,7 +37,7 @@ $toolbar-md-inactive-color:           $toolbar-inactive-color !default;
 // --------------------------------------------------
 
 $list-md-text-color:                  $list-text-color !default;
-$list-md-border-color:                $list-border-color !default;
+$list-md-border-color:                #dedede !default;
 $list-md-background-color:            $list-background-color !default;
 $list-md-activated-background-color:  #f1f1f1 !default;
 

From aeb0bc31caef9eb8b47e4a17ad51685972f018db Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 14:51:06 -0500
Subject: [PATCH 094/100] fix(menu): convert backdrop to class

references #689
---
 ionic/components/menu/menu.scss | 4 ++--
 ionic/components/menu/menu.ts   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss
index 9bf48a9441..234d22916e 100644
--- a/ionic/components/menu/menu.scss
+++ b/ionic/components/menu/menu.scss
@@ -27,7 +27,7 @@ ion-menu[side=right] {
   left: auto;
 }
 
-ion-menu backdrop {
+ion-menu .backdrop {
   z-index: -1;
   display: none;
 }
@@ -73,7 +73,7 @@ ion-menu[type=overlay] {
   z-index: $z-index-menu-overlay;
   left: -8px; // make up for the box-shadow hanging over on the left
 
-  backdrop {
+  .backdrop {
     display: block;
     transform: translate3d(-9999px, 0px, 0px);
     opacity: 0.01;
diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts
index db383a9038..19d6809866 100644
--- a/ionic/components/menu/menu.ts
+++ b/ionic/components/menu/menu.ts
@@ -66,7 +66,7 @@ import * as gestures from  './menu-gestures';
     '[attr.side]': 'side',
     '[attr.type]': 'type'
   },
-  template: '<ng-content></ng-content><backdrop tappable disable-activated></backdrop>',
+  template: '<ng-content></ng-content><div tappable disable-activated class="backdrop"></div>',
   directives: [forwardRef(() => MenuBackdrop)]
 })
 export class Menu extends Ion {
@@ -366,7 +366,7 @@ let menuTypes = {};
 
 
 @Directive({
-  selector: 'backdrop',
+  selector: '.backdrop',
   host: {
     '(click)': 'clicked($event)'
   }

From b20405a06d0c24c86664a409a26f2e13ff89be37 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 15:04:46 -0500
Subject: [PATCH 095/100] fix(menu): make MD default button change color based
 on toolbar color

references #689
---
 ionic/components/toolbar/modes/md.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 139efd8838..58a5e7f72e 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -70,7 +70,8 @@ ion-title {
       background-color: $color-value;
     }
 
-    .toolbar-title {
+    .toolbar-title,
+    .bar-button-default {
       color: inverse($color-value);
     }
   }

From 61e857115f68fd980f0199d52b19a223d2a3dd49 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 16:21:21 -0500
Subject: [PATCH 096/100] chore(CHANGELOG): updated changelog with some other
 changes

references #689
---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 893b0b7bea..805a81f220 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,12 @@
 * Different Sass color maps for iOS and Material Design
     * Allows colors to be different per platform
     * ie: Gray navbars in iOS, blue navbars in MD. Identical HTML/JS
+* config: `tabbarStyle` has been removed, should now use different Sass color maps instead of setting it in the config
+* text-input: class `has-value` has become `input-has-value`  
+* text-input: class `has-focus` has become `input-focused`  
+* searchbar: class `left-align` has become `searchbar-left-aligned`
+* searchbar: class `focused` has become `searchbar-focused`
+
 
 
 #####  `<ion-nav-items>` renamed to `<ion-buttons>`

From b7cc9fd6cff9ee9d5ce767658802be6c77205389 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 16:21:40 -0500
Subject: [PATCH 097/100] fix(item): fix button icon only with item left or
 right

references #689
---
 ionic/components/item/modes/ios.scss |  8 ++++----
 ionic/components/item/modes/md.scss  | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/ionic/components/item/modes/ios.scss b/ionic/components/item/modes/ios.scss
index 71f9ad3cb0..309f2a19e6 100644
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -127,10 +127,10 @@ button[item-right],
   margin-top: 9px;
 }
 
-[item-left].icon-only,
-[item-right].icon-only,
-[item-left].icon-only icon,
-[item-right].icon-only icon,
+[item-left].button-icon-only,
+[item-right].button-icon-only,
+[item-left].button-icon-only icon,
+[item-right].button-icon-only icon,
 [item-left][clear],
 [item-right][clear] {
   padding: 0 1px;
diff --git a/ionic/components/item/modes/md.scss b/ionic/components/item/modes/md.scss
index 83066f77fc..d9b0042920 100644
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -104,10 +104,10 @@ button[item-right],
   font-size: 1.2rem;
 }
 
-[item-left].icon-only,
-[item-right].icon-only,
-[item-left].icon-only icon,
-[item-right].icon-only icon {
+[item-left].button-icon-only,
+[item-right].button-icon-only,
+[item-left].button-icon-only icon,
+[item-right].button-icon-only icon {
   padding: 0 1px;
 }
 
@@ -135,7 +135,7 @@ button[item-right],
 }
 
 icon[item-left] + .item-inner,
-icon[item-left] + [text-input] {
+icon[item-left] + .item-input {
   margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
 }
 

From bb98c451d3f4aec523831c1958686de9b7a00752 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 16:22:08 -0500
Subject: [PATCH 098/100] fix(toolbar): fix margin and width on toolbar buttons

references #689
---
 ionic/components/toolbar/modes/ios.scss       |  3 +-
 ionic/components/toolbar/modes/md.scss        |  5 +-
 .../toolbar/test/scenarios/main.html          | 76 +++++++++----------
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index b1ec74b9fa..df7c505258 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -85,7 +85,7 @@ ion-title {
       background-color: $color-value;
       border-color: darken($color-value, 10%);
     }
-    
+
     .toolbar-title,
     .bar-button-default {
       color: inverse($color-value);
@@ -232,7 +232,6 @@ ion-buttons[right] {
 }
 
 .bar-button-icon-right icon {
-  margin-right: -0.2em;
   padding-left: 0.4em;
   font-size: 1.4em;
   line-height: 0.67;
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 58a5e7f72e..c4d77392ce 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -111,6 +111,8 @@ ion-buttons[right] {
 .bar-button {
   margin-top: 0;
   margin-bottom: 0;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;  
   padding: 0 5px;
   min-height: 32px;
   border: 0;
@@ -221,7 +223,6 @@ ion-buttons[right] {
 }
 
 .bar-button-icon-right icon {
-  margin-right: -0.2em;
   padding-left: 0.4em;
   font-size: 1.4em;
   line-height: 0.67;
@@ -230,12 +231,12 @@ ion-buttons[right] {
 
 .bar-button-icon-only {
   padding: 0;
-  min-width: 0.9em;
 
   icon {
     padding: 0 0.1em;
     font-size: 1.8em;
     line-height: 0.67;
+    min-width: 28px;
     pointer-events: none;
   }
 }
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index c881c22591..7b6d6dba75 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -40,44 +40,6 @@
 </ion-toolbar>
 
 
-<ion-toolbar>
-  <ion-buttons start>
-    <button outline>
-      <icon contact></icon>
-    </button>
-    <button outline>
-      <icon star></icon>
-      Star
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary outline>
-      <icon contact></icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Outline</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button outline class="activated">
-      <icon contact></icon>
-    </button>
-    <button outline class="activated">
-      <icon star></icon>
-      Star
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary outline class="activated">
-      <icon contact></icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Outline.activated</ion-title>
-</ion-toolbar>
-
-
 <ion-toolbar>
   <ion-buttons start>
     <button solid>
@@ -118,6 +80,44 @@
 </ion-toolbar>
 
 
+<ion-toolbar>
+  <ion-buttons start>
+    <button outline>
+      <icon contact></icon>
+    </button>
+    <button outline>
+      <icon star></icon>
+      Star
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary outline>
+      <icon contact></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Outline</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar>
+  <ion-buttons start>
+    <button outline class="activated">
+      <icon contact></icon>
+    </button>
+    <button outline class="activated">
+      <icon star></icon>
+      Star
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary outline class="activated">
+      <icon contact></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Outline.activated</ion-title>
+</ion-toolbar>
+
+
 <ion-toolbar>
   <ion-buttons start>
     <button>

From a95e626be954d92e83221398ff16c13bd0296c5d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 16:22:23 -0500
Subject: [PATCH 099/100] fix(util): found a spot has-focus wasn't changed to
 input-focused

references #689
---
 ionic/util/util.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ionic/util/util.scss b/ionic/util/util.scss
index 70b65c4952..6483857860 100755
--- a/ionic/util/util.scss
+++ b/ionic/util/util.scss
@@ -88,7 +88,7 @@ $focus-outline-box-shadow:     0px 0px 8px 0px $focus-outline-border-color !defa
     outline: thin solid $focus-outline-border-color;
   }
 
-  ion-input.has-focus,
+  ion-input.input-focused,
   button[ion-item]:focus,
   a[ion-item]:focus {
     border-color: $focus-outline-border-color;

From 32ba6e29be8dd383d896a106bd39eb37453cad08 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 9 Dec 2015 16:32:20 -0500
Subject: [PATCH 100/100] chore(CHANGELOG): added some more to CHANGELOG

---
 CHANGELOG.md | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 805a81f220..fa9098b644 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,7 +17,7 @@
 * Different Sass color maps for iOS and Material Design
     * Allows colors to be different per platform
     * ie: Gray navbars in iOS, blue navbars in MD. Identical HTML/JS
-* config: `tabbarStyle` has been removed, should now use different Sass color maps instead of setting it in the config
+* config: `tabbarStyle`, `navbarStyle` has been removed, should now use different Sass color maps instead of setting it in the config
 * text-input: class `has-value` has become `input-has-value`  
 * text-input: class `has-focus` has become `input-focused`  
 * searchbar: class `left-align` has become `searchbar-left-aligned`
@@ -30,4 +30,15 @@
 * `primary` attribute `<ion-nav-items primary>` now `<ion-buttons start>`
 * `secondary` attribute `<ion-nav-items secondary>` now `<ion-buttons end>`
 
-##### <a menu-toggle> should now be <button menu-toggle>
+##### `<a menu-toggle>` should now be `<button menu-toggle>`
+
+
+
+##### Bug Fixes
+
+* **item-sliding**: fixed item-sliding, onDragEnd on mouseout of sliding element [f9199fb](https://github.com/driftyco/ionic2/commit/f9199fb3be6ce6b0a693e2e3b944b47ed8575531), closes [#702](https://github.com/driftyco/ionic2/issues/702)
+
+
+##### Features
+
+* Upgraded to Angular alpha.50