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