update button

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] {

ionic/components/button/button-clear.scss

@@ -1,15 +0,0 @@
-@import "../../globals.core";
-
-// Clear Button
-// --------------------------------------------------
-
-.button-clear {
-  border-color: transparent;
-  background: transparent;
-
-  &.activated {
-    opacity: 0.4;
-    background: transparent;
-  }
-
-}

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.

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";

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);
   }
 }
 

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;

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);
+}