From 3b78a6894c12522c3e04c595af7f8e596d289f52 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Dec 2015 15:23:21 -0600
Subject: [PATCH] re-org buttons

---
 ionic/components/button/button.scss    |  31 ----
 ionic/components/button/modes/ios.scss | 161 ++++++++++---------
 ionic/components/button/modes/md.scss  | 207 ++++++++++++++++++-------
 3 files changed, 232 insertions(+), 167 deletions(-)

diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index ecfc4e27af..2df50c1d4d 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -3,12 +3,6 @@
 // Buttons
 // --------------------------------------------------
 
-$button-font-size:                1.6rem !default;
-$button-margin:                   0.4rem 0.2rem !default;
-$button-padding:                  0 1em !default;
-$button-height:                   2.8em !default;
-$button-border-radius:            4px !default;
-
 $button-round-padding:            0 2.6rem !default;
 $button-round-border-radius:      64px !default;
 
@@ -21,16 +15,6 @@ $button-round-border-radius:      64px !default;
   align-items: center;
   justify-content: center;
   transition: background-color, opacity 100ms linear;
-  margin: $button-margin;
-  padding: $button-padding;
-  min-height: $button-height;
-  line-height: $button-height;
-
-  border: 1px solid #ccc;
-  border: transparent;
-  border-radius: $button-border-radius;
-
-  font-size: $button-font-size;
 
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -96,21 +80,6 @@ a.button {
 }
 
 
-// Clear Button
-// --------------------------------------------------
-
-.button-clear {
-  border-color: transparent;
-  background: transparent;
-
-  &.activated {
-    opacity: 0.4;
-    background: transparent;
-  }
-
-}
-
-
 
 // TODO
 // button should have classes:
diff --git a/ionic/components/button/modes/ios.scss b/ionic/components/button/modes/ios.scss
index ae706baefc..949d03d2c1 100644
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -7,53 +7,80 @@
 // iOS Button
 // --------------------------------------------------
 
+$button-ios-margin:                   0.4rem 0.2rem !default;
+$button-ios-padding:                  0 1em !default;
+$button-ios-font-size:                1.6rem !default;
+$button-ios-height:                   2.8em !default;
 $button-ios-color:                    map-get($colors-ios, primary) !default;
 $button-ios-color-activated:          color-shade($button-ios-color) !default;
 $button-ios-text-color:               inverse($button-ios-color) !default;
 $button-ios-hover-opacity:            0.8 !default;
+$button-ios-border-radius:            4px !default;
 
 
+// iOS Default Button
+// --------------------------------------------------
+
 .button {
-  background: $button-ios-color;
+  margin: $button-ios-margin;
+  padding: $button-ios-padding;
+
+  min-height: $button-ios-height;
+  line-height: $button-ios-height;
+  font-size: $button-ios-font-size;
+
+  border-radius: $button-ios-border-radius;
   color: $button-ios-text-color;
+  background-color: $button-ios-color;
 
   &:hover:not(.disable-hover) {
-     opacity: $button-ios-hover-opacity;
-     text-decoration: none;
-   }
+    opacity: $button-ios-hover-opacity;
+    text-decoration: none;
+  }
 
-   &.activated {
-     opacity: 1;
-     background-color: $button-ios-color-activated;
-   }
+  &.activated {
+    opacity: 1;
+    background-color: $button-ios-color-activated;
+  }
 }
 
 
+// iOS Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin ios-button-default($color-name, $color-value) {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $fg-color: inverse($bg-color);
+
+    color: $fg-color;
+    background-color: $bg-color;
+
+    &.activated {
+      background-color: $bg-color-activated;
+    }
+  }
+
+}
+
+
+// iOS Block Button
+// --------------------------------------------------
+
 .button-block {
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
 }
 
 
-// Clear Button
-// --------------------------------------------------
-
-.button-clear {
-  color: color-shade($button-ios-color);
-
-  &:hover:not(.disable-hover) {
-    opacity: 0.6;
-    color: color-shade($button-ios-color);
-  }
-}
-
-
-// Outline Button
+// iOS Outline Button
 // --------------------------------------------------
 
 .button-outline {
   border: 1px solid $button-ios-color;
-  background: transparent;
+  background-color: transparent;
   color: $button-ios-color;
 
   &.activated {
@@ -64,89 +91,69 @@ $button-ios-hover-opacity:            0.8 !default;
 }
 
 
-
-// Default Button Color Mixin
+// iOS Outline Button Color Mixin
 // --------------------------------------------------
 
-@mixin button-default($bg-color, $bg-color-activated, $fg-color) {
-  background-color: $bg-color;
-  color: $fg-color;
+@mixin ios-button-outline($color-name, $color-value) {
 
-  &.activated {
-    background-color: $bg-color-activated;
-  }
-}
+  .button-outline-#{$color-name} {
+    $fg-color: color-shade($color-value, 5%);
+    border-color: $fg-color;
+    background-color: transparent;
+    color: $fg-color;
 
-
-// Generate Default Button Colors
-// --------------------------------------------------
-
-@each $color-name, $color-value in $colors-ios {
-
-  .button-#{$color-name} {
-    $bg-color: $color-value;
-    $bg-color-activated: color-shade($bg-color);
-    $fg-color: inverse($bg-color);
-    @include button-default($bg-color, $bg-color-activated, $fg-color);
+    &.activated {
+      color: $background-ios-color;
+      background-color: $fg-color;
+    }
   }
 
 }
 
 
-// Generate Clear Button Colors
+// iOS Clear Button
 // --------------------------------------------------
 
-// TODO primary activated is wrong
-@each $color-name, $color-value in $colors-ios {
+.button-clear {
+  border-color: transparent;
+  color: color-shade($button-ios-color);
+  background-color: transparent;
 
-  $fg-color: color-shade($color-value);
+  &:hover:not(.disable-hover) {
+    opacity: 0.6;
+    color: color-shade($button-ios-color);
+  }
+}
+
+
+// iOS Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin ios-button-clear($color-name, $color-value) {
 
   .button-clear-#{$color-name} {
+    $fg-color: color-shade($color-value);
     border-color: transparent;
-    background: transparent;
+    background-color: transparent;
     color: $fg-color;
 
     &.activated {
       opacity: 0.4;
-      background: transparent;
+      background-color: transparent;
     }
 
     &:hover:not(.disable-hover) {
       color: color-shade($fg-color);
     }
   }
-
 }
 
 
-
-// Outline Button Color Mixin
-// --------------------------------------------------
-
-@mixin button-outline($fg-color) {
-
-  border-color: $fg-color;
-  background: transparent;
-  color: $fg-color;
-
-  &.activated {
-    color: $background-ios-color;
-    background-color: $fg-color;
-  }
-
-}
-
-
-// Outline Clear Button Colors
+// Generate iOS Button Colors
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-ios {
-
-  .button-outline-#{$color-name} {
-
-    $fg-color: color-shade($color-value, 5%);
-    @include button-outline($fg-color);
-
-  }
-
+  @include ios-button-default($color-name, $color-value);
+  @include ios-button-outline($color-name, $color-value);
+  @include ios-button-clear($color-name, $color-value);
 }
diff --git a/ionic/components/button/modes/md.scss b/ionic/components/button/modes/md.scss
index 7a3e6718c2..fea32031cc 100644
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -7,9 +7,10 @@
 // Material Design Button
 // --------------------------------------------------
 
+$button-md-margin:                        0.4rem 0.2rem !default;
+$button-md-padding:                       0 1.1em !default;
 $button-md-font-size:                      1.4rem !default;
-$button-md-min-height:                     3.6rem !default;
-$button-md-padding:                        0 1.1em !default;
+$button-md-height:                         3.6rem !default;
 $button-md-box-shadow:                     0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
 $button-md-box-shadow-active:              0 3px 5px rgba(0, 0, 0, 0.14), 0 3px 5px rgba(0, 0, 0, 0.21) !default;
 
@@ -29,18 +30,29 @@ $button-md-text-color:                     inverse($button-md-color) !default;
 $button-md-hover-opacity:                  0.8 !default;
 
 
+// Material Design Default Button
+// --------------------------------------------------
+
 .button {
-  border-radius: $button-md-border-radius;
-
-  min-height: $button-md-min-height;
-
+  margin: $button-md-margin;
   padding: $button-md-padding;
-  text-transform: uppercase;
+
+  min-height: $button-md-height;
+  line-height: $button-md-height;
+  font-size: $button-md-font-size;
+
+  border: 0;
+  border-radius: $button-md-border-radius;
 
   font-weight: 500;
   font-size: $button-md-font-size;
+
+  color: $button-md-text-color;
+  background-color: $button-md-color;
   box-shadow: $button-md-box-shadow;
 
+  text-transform: uppercase;
+
   transition: box-shadow $button-md-transition-duration $button-md-animation-curve,
               background-color $button-md-transition-duration $button-md-animation-curve,
               color $button-md-transition-duration $button-md-animation-curve;
@@ -48,16 +60,35 @@ $button-md-hover-opacity:                  0.8 !default;
   &:hover:not(.disable-hover) {
     background-color: $button-md-clear-hover-background-color;
   }
+
+  &.activated {
+    box-shadow: $button-md-box-shadow-active;
+  }
 }
 
-.button-full {
-  border-radius: 0;
+// Material Design Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin md-button-default($color-name, $color-value) {
+
+  .button-#{$color-name} {
+    $bg-color: $color-value;
+    $bg-color-activated: color-shade($bg-color);
+    $fg-color: inverse($bg-color);
+
+    color: $fg-color;
+    background-color: $bg-color;
+
+    &.activated {
+      opacity: 1;
+    }
+  }
+
 }
 
-.button-round {
-  border-radius: $button-round-border-radius;
-  padding: $button-round-padding;
-}
+
+// Material Design Button Sizes
+// --------------------------------------------------
 
 .button-large {
   padding: 0 $button-large-padding;
@@ -71,10 +102,107 @@ $button-md-hover-opacity:                  0.8 !default;
   font-size: $button-small-font-size;
 }
 
-&.activated {
-  box-shadow: $button-md-box-shadow-active;
+
+// Material Design Full Button
+// --------------------------------------------------
+
+.button-full {
+  border-radius: 0;
 }
 
+
+// Material Design Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border: 1px solid $button-md-color;
+  background-color: transparent;
+  color: $button-md-color;
+  box-shadow: none;
+
+  &.activated {
+    opacity: 1;
+    color: $background-md-color;
+    background-color: $button-md-color;
+  }
+
+  md-ripple {
+    background-color: ripple-background-color($button-md-color);
+  }
+}
+
+
+// Material Design Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin md-button-outline($color-name, $color-value) {
+
+  .button-outline-#{$color-name} {
+    $fg-color: color-shade($color-value, 5%);
+    border-color: $fg-color;
+    background-color: transparent;
+    color: $fg-color;
+
+    &.activated {
+      color: $background-md-color;
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Material Design Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  border-color: transparent;
+  opacity: 1;
+  box-shadow: none;
+  background-color: transparent;
+
+  &.activated {
+    opacity: 0.4;
+    background-color: $button-md-clear-active-background-color;
+  }
+}
+
+
+// Material Design Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin md-button-clear($color-name, $color-value) {
+
+  .button-clear-#{$color-name} {
+    $fg-color: color-shade($color-value);
+    border-color: transparent;
+    background-color: transparent;
+    color: $fg-color;
+
+    &.activated {
+      opacity: 0.4;
+      background-color: transparent;
+    }
+
+    &:hover:not(.disable-hover) {
+      color: color-shade($fg-color);
+    }
+  }
+}
+
+
+// Material Design Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+  border-radius: $button-round-border-radius;
+}
+
+
+// Material Design FAB Button
+// --------------------------------------------------
+
 .button-fab {
   border-radius: 50%;
   box-shadow: $button-md-fab-box-shadow;
@@ -88,45 +216,6 @@ $button-md-hover-opacity:                  0.8 !default;
   padding: 0;
 }
 
-.button-outline {
-  box-shadow: none;
-
-  &.activated {
-    opacity: 1;
-  }
-
-  md-ripple {
-    background-color: ripple-background-color($button-md-color);
-  }
-}
-
-.button-clear {
-  opacity: 1;
-  box-shadow: none;
-  background: transparent;
-
-  &.activated {
-    opacity: 0.4;
-    background-color: $button-md-clear-active-background-color;
-  }
-}
-
-
-// Outline Button
-// --------------------------------------------------
-
-.button-outline {
-  border: 1px solid $button-md-color;
-  background: transparent;
-  color: $button-md-color;
-
-  &.activated {
-    opacity: 1;
-    color: $background-md-color;
-    background-color: $button-md-color;
-  }
-}
-
 // Material Design Button Color Mixin
 // --------------------------------------------------
 
@@ -139,7 +228,7 @@ $button-md-hover-opacity:                  0.8 !default;
   .button-outline {
 
     md-ripple {
-      background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
+      background-color: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
     }
 
     &.activated {
@@ -154,11 +243,11 @@ $button-md-hover-opacity:                  0.8 !default;
 }
 
 
-// Generate Material Design Button Auxiliary Colors
+// Generate Material Design Button Colors
 // --------------------------------------------------
 
 @each $color-name, $color-value in $colors-md {
-
-  @include button-theme-md($color-name, $color-value);
-
+  @include md-button-default($color-name, $color-value);
+  @include md-button-outline($color-name, $color-value);
+  @include md-button-clear($color-name, $color-value);
 }