refactor(button): fixed UI issues with new classes

Removed my long TODO comments. References #689

ionic/components/button/button.scss

@@ -62,12 +62,7 @@ a.button {
 // --------------------------------------------------
 
 .button-full {
-  margin-right: 0;
-  margin-left: 0;
   width: 100%;
-  border-radius: 0;
-  border-right-width: 0;
-  border-left-width: 0;
 }
 
 
@@ -79,27 +74,10 @@ a.button {
   border-radius: $button-round-border-radius;
 }
 
+// Full Outline Button
+// --------------------------------------------------
 
-
+.button-full.button-outline {
-// TODO
+  border-left-width: 0;
-// button should have classes:
+  border-right-width: 0;
-// button, button-primary, button-secondary, etc.
+}
-// button holds all styling with default primary color(will this affect outline/clear?) and
-// the other classes change the color
-//
-// button-clear should have classes:
-// button-clear, button-clear-primary, button-clear-secondary, etc.
-// button-clear holds all clear styling with default primary color and
-// the other classes change the color
-//
-// button-outline should have classes:
-// button-outline, button-outline-primary, button-outline-secondary, etc.
-// button-outline holds all outline styling with default primary color and
-// the other classes change the color
-//
-// button-block should stand alone
-// button-full should stand alone
-// button-round should stand alone
-// button-disabled should stand alone(?)
-// button-sizes should stand alone (button-small, button-large, etc)
-// button-fab errrrr

ionic/components/button/modes/ios.scss

@@ -20,6 +20,7 @@ $button-ios-large-padding:            1.0em !default;
 $button-ios-small-font-size:          1.3rem !default;
 $button-ios-small-height:             2.1em !default;
 $button-ios-small-padding:            0.9em !default;
+$button-ios-small-icon-font-size:     1.3em !default;
 
 
 // iOS Default Button
@@ -84,6 +85,9 @@ $button-ios-small-padding:            0.9em !default;
   font-size: $button-ios-small-font-size;
 }
 
+.button-small.button-icon-only icon {
+  font-size: $button-ios-small-icon-font-size;
+}
 
 // iOS Block Button
 // --------------------------------------------------
@@ -91,6 +95,19 @@ $button-ios-small-padding:            0.9em !default;
 .button-block {
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
+  line-height: 2.8em;
+}
+
+
+// iOS Full Button
+// --------------------------------------------------
+
+.button-full {
+  margin-right: 0;
+  margin-left: 0;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
 }
 
 
@@ -138,6 +155,11 @@ $button-ios-small-padding:            0.9em !default;
   color: color-shade($button-ios-color);
   background-color: transparent;
 
+  &.activated {
+    opacity: 0.4;
+    background-color: transparent;
+  }
+
   &:hover:not(.disable-hover) {
     opacity: 0.6;
     color: color-shade($button-ios-color);
@@ -167,6 +189,14 @@ $button-ios-small-padding:            0.9em !default;
   }
 }
 
+// iOS Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+  border-radius: $button-round-border-radius;
+}
+
 
 // Generate iOS Button Colors
 // --------------------------------------------------

ionic/components/button/modes/md.scss

@@ -4,8 +4,8 @@
 // Material Design Button
 // --------------------------------------------------
 
-$button-md-margin:                        0.4rem 0.2rem !default;
+$button-md-margin:                         0.4rem 0.2rem !default;
-$button-md-padding:                       0 1.1em !default;
+$button-md-padding:                        0 1.1em !default;
 $button-md-font-size:                      1.4rem !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;
@@ -32,6 +32,7 @@ $button-md-large-padding:                  1.0em !default;
 $button-md-small-font-size:                1.3rem !default;
 $button-md-small-height:                   2.1em !default;
 $button-md-small-padding:                  0.9em !default;
+$button-md-small-icon-font-size:           1.4em !default;
 
 
 // Material Design Default Button
@@ -66,6 +67,7 @@ $button-md-small-padding:                  0.9em !default;
 
   &.activated {
     box-shadow: $button-md-box-shadow-active;
+    background-color: $button-md-color-activated;
   }
 }
 
@@ -84,6 +86,7 @@ $button-md-small-padding:                  0.9em !default;
 
     &.activated {
       opacity: 1;
+      background-color: $bg-color-activated;
     }
   }
 
@@ -105,12 +108,20 @@ $button-md-small-padding:                  0.9em !default;
   font-size: $button-md-small-font-size;
 }
 
+.button-small.button-icon-only icon {
+  font-size: $button-md-small-icon-font-size;
+}
+
 
 // Material Design Full Button
 // --------------------------------------------------
 
 .button-full {
   border-radius: 0;
+  margin-right: 0;
+  margin-left: 0;
+  border-right-width: 0;
+  border-left-width: 0;
 }
 
 
@@ -127,6 +138,7 @@ $button-md-small-padding:                  0.9em !default;
     opacity: 1;
     color: $background-md-color;
     background-color: $button-md-color;
+    box-shadow: none;
   }
 
   md-ripple {
@@ -166,8 +178,12 @@ $button-md-small-padding:                  0.9em !default;
   color: color-shade($button-md-color);
 
   &.activated {
-    opacity: 0.4;
     background-color: $button-md-clear-active-background-color;
+    box-shadow: none;
+  }
+
+  &:hover:not(.disable-hover) {
+    color: color-shade($button-md-color);
   }
 }
 
@@ -183,9 +199,10 @@ $button-md-small-padding:                  0.9em !default;
     background-color: transparent;
     color: $fg-color;
 
+
     &.activated {
-      opacity: 0.4;
+      background-color: $button-md-clear-active-background-color;
-      background-color: transparent;
+      box-shadow: none;
     }
 
     &:hover:not(.disable-hover) {