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