using material design term instead of android

src/components/alert/extensions/android.scss

@@ -1,41 +0,0 @@
-
-// Android Alert
-// --------------------------------------------------
-
-$alert-android-content-margin:           24px !default;
-$alert-android-background-color:         #fff !default;
-$alert-android-border-radius:            4px !default;
-$alert-android-box-shadow:               0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
-
-
-.alert-android {
-
-  .alert-container {
-    box-shadow: $alert-android-box-shadow;
-    border-radius: $alert-android-border-radius;
-    overflow: hidden;
-  }
-
-  .alert-header {
-    margin: $alert-android-content-margin;
-    font-size: 2rem;
-    font-weight: 400;
-  }
-
-  .alert-content {
-    position: relative;
-    margin: $alert-android-content-margin;
-    background: $alert-android-background-color;
-  }
-
-  .alert-actions {
-    min-height: 44px;
-    background: $alert-android-background-color;
-    margin: $alert-android-content-margin;
-
-    .button {
-      border: 0;
-    }
-  }
-
-}

src/components/alert/extensions/material.scss

@@ -0,0 +1,41 @@
+
+// Material Design Alert
+// --------------------------------------------------
+
+$alert-material-content-margin:           24px !default;
+$alert-material-background-color:         #fff !default;
+$alert-material-border-radius:            4px !default;
+$alert-material-box-shadow:               0px 27px 24px 0 rgba(0, 0, 0, 0.2) !default;
+
+
+.alert-md {
+
+  .alert-container {
+    box-shadow: $alert-material-box-shadow;
+    border-radius: $alert-material-border-radius;
+    overflow: hidden;
+  }
+
+  .alert-header {
+    margin: $alert-material-content-margin;
+    font-size: 2rem;
+    font-weight: 400;
+  }
+
+  .alert-content {
+    position: relative;
+    margin: $alert-material-content-margin;
+    background: $alert-material-background-color;
+  }
+
+  .alert-actions {
+    min-height: 44px;
+    background: $alert-material-background-color;
+    margin: $alert-material-content-margin;
+
+    .button {
+      border: 0;
+    }
+  }
+
+}

src/components/button/extensions/material.scss

@@ -1,5 +1,5 @@
 
-// Material Design Button Variables
+// Material Design Button
 // --------------------------------------------------
 
 $button-material-font-size:                1.4rem !default;
@@ -8,11 +8,7 @@ $button-material-box-shadow:               0 2px 5px 0 rgba(0, 0, 0, 0.26) !defa
 $button-material-border-radius:            3px !default;
 
 
-// Material Design Button
+.button.button-md {
-// --------------------------------------------------
-
-
-.button.button-android {
   border: 0;
   border-radius: $button-material-border-radius;
 
@@ -35,4 +31,5 @@ $button-material-border-radius:            3px !default;
   &.button-small.button-icon {
     font-size: $button-small-icon-size;
   }
+
 }

src/components/tabs/extensions/android.scss

@@ -1,33 +0,0 @@
-
-// Android Toolbar
-// --------------------------------------------------
-
-$tab-bar-android-min-height:                40px !default;
-$tab-bar-android-item-padding:              4px 10px !default;
-$tab-bar-android-active-border-width:       3px !default;
-$tab-bar-android-active-border-color:       red !default;
-$tab-bar-android-text-transform:            uppercase !default;
-$tab-bar-android-text-font-weight:          500 !default;
-
-
-.tabs-android {
-
-  .tab-bar-container {
-    min-height: $tab-bar-android-min-height;
-  }
-
-  .tab-bar-item {
-    padding: $tab-bar-item-padding;
-    text-transform: $tab-bar-android-text-transform;
-    font-weight: $tab-bar-android-text-font-weight;
-  }
-
-  .tab-bar .tab-bar-item {
-    border-bottom: $tab-bar-android-active-border-width solid transparent;
-  }
-
-  .tab-bar .tab-active {
-    border-bottom-color: $tab-bar-android-active-border-color;
-  }
-
-}

src/components/tabs/extensions/material.scss

@@ -0,0 +1,33 @@
+
+// Material Design Toolbar
+// --------------------------------------------------
+
+$tab-bar-material-min-height:                40px !default;
+$tab-bar-material-item-padding:              4px 10px !default;
+$tab-bar-material-active-border-width:       3px !default;
+$tab-bar-material-active-border-color:       red !default;
+$tab-bar-material-text-transform:            uppercase !default;
+$tab-bar-material-text-font-weight:          500 !default;
+
+
+.tabs-md {
+
+  .tab-bar-container {
+    min-height: $tab-bar-material-min-height;
+  }
+
+  .tab-bar-item {
+    padding: $tab-bar-material-item-padding;
+    text-transform: $tab-bar-material-text-transform;
+    font-weight: $tab-bar-material-text-font-weight;
+  }
+
+  .tab-bar .tab-bar-item {
+    border-bottom: $tab-bar-material-active-border-width solid transparent;
+  }
+
+  .tab-bar .tab-active {
+    border-bottom-color: $tab-bar-material-active-border-color;
+  }
+
+}

src/components/toolbar/extensions/android.scss

@@ -1,33 +0,0 @@
-
-// Android Toolbar
-// --------------------------------------------------
-
-$toolbar-android-height:                  6.4rem !default;
-$toolbar-android-background:              #f7f7f8 !default;
-
-$toolbar-android-title-font-size:         2rem !default;
-$toolbar-android-button-font-size:        2rem !default;
-$toolbar-android-button-text-color:       #007aff !default;
-
-
-.toolbar-android {
-  height: $toolbar-android-height;
-  background: $toolbar-android-background;
-
-  .toolbar-title {
-    font-size: $toolbar-android-title-font-size;
-  }
-
-  .button {
-    font-size: $toolbar-android-button-font-size;
-    color: $toolbar-android-button-text-color;
-    border: none;
-
-    padding: 0;
-    margin: 0 10px;
-
-    min-height: $toolbar-android-height;
-    min-width: 0;
-  }
-
-}

src/components/toolbar/extensions/material.scss

@@ -0,0 +1,33 @@
+
+// Material Design Toolbar
+// --------------------------------------------------
+
+$toolbar-material-height:                  6.4rem !default;
+$toolbar-material-background:              #f7f7f8 !default;
+
+$toolbar-material-title-font-size:         2rem !default;
+$toolbar-material-button-font-size:        2rem !default;
+$toolbar-material-button-text-color:       #007aff !default;
+
+
+.toolbar-md {
+  height: $toolbar-material-height;
+  background: $toolbar-material-background;
+
+  .toolbar-title {
+    font-size: $toolbar-material-title-font-size;
+  }
+
+  .button {
+    font-size: $toolbar-material-button-font-size;
+    color: $toolbar-material-button-text-color;
+    border: none;
+
+    padding: 0;
+    margin: 0 10px;
+
+    min-height: $toolbar-material-height;
+    min-width: 0;
+  }
+
+}

src/config/component.js

@@ -42,6 +42,25 @@ export class IonicComponent {
     instance.domElement.classList.add(this.componentCssName)
     instance.domElement.classList.add(`${this.componentCssName}-${platformName}`)
 
+
+    /****** TODO: HACK!!! MAKE MORE GOOD!!! ********/
+    /*
+      Manually assigning "md" for android platform, but we need
+      to be able to set which "mode" to use for each platform.
+
+      ios platform == ios mode
+      android platform == md mode (material design mode)
+      everything else == core mode
+
+      Uber hack below until we come up with a pretty "mode" API
+    */
+    if (platformName == 'android') {
+      instance.domElement.classList.add(`${this.componentCssName}-md`)
+    }
+    /****** TODO: HACK!!! MAKE MORE GOOD!!! ********/
+
+
+
     for (let attrName in this.bind) {
       let binding = this.bind[attrName]
       let defaultValue = binding._defaultValue

src/ionic.scss

@@ -62,12 +62,10 @@
 
 // Material Design Components
 @import
-  "components/alert/extensions/android",
+  "components/alert/extensions/material",
-  "components/button/extensions/android",
+  "components/button/extensions/material",
-  "components/list/extensions/android",
+  "components/tabs/extensions/material",
-  "components/item/extensions/android",
+  "components/toolbar/extensions/material";
-  "components/tabs/extensions/android",
-  "components/toolbar/extensions/android";
 
 
 // Icons