From dd47e93b0b61d73703b5989ab5e22bc40d7fef81 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 21 Sep 2015 22:09:43 -0500
Subject: [PATCH] refactor(button): button[clear] :hover

Closes #145
---
 ionic/components/button/button-clear.scss | 50 +++++++++++------------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
index 1f246e7c60..8141d1a316 100644
--- a/ionic/components/button/button-clear.scss
+++ b/ionic/components/button/button-clear.scss
@@ -2,47 +2,43 @@
 // Clear Button
 // --------------------------------------------------
 
-button,
-[button] {
+button[clear],
+[button][clear] {
+  border-color: transparent;
+  background: transparent;
+  color: darken-or-lighten($button-color);
 
-  &[clear] {
-    border-color: transparent;
-    background: transparent;
-    color: darken-or-lighten($button-color);
-
-    &.activated {
-      opacity: 0.4;
-    }
+  &.activated {
+    opacity: 0.4;
   }
 
 }
 
-
-// Clear Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-clear($fg-color) {
-
-  &[clear] {
-    border-color: transparent;
-    background: transparent;
-    color: $fg-color;
-  }
-
+.enable-hover button[clear]:hover,
+.enable-hover [button][clear]:hover {
+  opacity: 0.6;
+  color: darken-or-lighten($button-color);
 }
 
 
+
 // Generate Clear Button Colors
 // --------------------------------------------------
 
-@each $color, $value in auxiliary-colors() {
+@each $color-name, $color-value in auxiliary-colors() {
 
-  button[#{$color}],
-  [button][#{$color}] {
+  $fg-color: darken-or-lighten($color-value);
 
-    $fg-color: darken-or-lighten($value);
-    @include button-clear($fg-color);
+  button[clear][#{$color-name}],
+  [button][clear][#{$color-name}] {
+    border-color: transparent;
+    background: transparent;
+    color: $fg-color;
+  }
 
+  .enable-hover button[clear][#{$color-name}]:hover,
+  .enable-hover [button][clear][#{$color-name}]:hover {
+    color: darken-or-lighten($fg-color);
   }
 
 }