refactor(button): added button class to the button directive and got them working more

references #689

ionic/components/button/button.scss

@@ -21,8 +21,15 @@ $button-hover-opacity:            0.8 !default;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
+  transition: background-color, opacity 100ms linear;
+  margin: $button-margin;
+  padding: $button-padding;
+  min-height: $button-height;
   line-height: 1;
 
+  border: 1px solid #ccc;
+  border: transparent;
+  border-radius: $button-border-radius;
 
   font-size: $button-font-size;
   font-family: inherit;
@@ -43,6 +50,17 @@ $button-hover-opacity:            0.8 !default;
   @include user-select-none();
   @include appearance(none);
 
+  background: $button-color;
+   color: $button-text-color;
+   &:hover:not(.disable-hover) {
+     opacity: $button-hover-opacity;
+     text-decoration: none;
+   }
+   &.activated {
+     opacity: 1;
+     background-color: $button-color-activated;
+   }
+
   // Button Types
   // --------------------------------------------------
 

ionic/components/button/button.ts

@@ -28,7 +28,10 @@ import {Config} from '../../config/config';
   * Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes.
  */
 @Directive({
-  selector: 'button,[button]'
+  selector: 'button,[button]',
+  host: {
+    'class': 'button'
+  }
 })
 export class Button {
 

ionic/components/button/modes/ios.scss

@@ -9,9 +9,7 @@
 // iOS Button (largely the core button styles)
 // --------------------------------------------------
 
-button {
-  &[block] {
+.button-block {
   // This fixes an issue with flexbox and button on iOS Safari. See #225
   display: block;
 }
-}

ionic/components/button/modes/md.scss

@@ -26,8 +26,7 @@ $button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4p
 $button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
 
 
-button,
-[button] {
+.button {
   border-radius: $button-md-border-radius;
 
   min-height: $button-md-min-height;
@@ -46,23 +45,24 @@ button,
   &:hover:not(.disable-hover) {
     background-color: $button-md-clear-hover-background-color;
   }
+}
 
-  &[full] {
+.button-full {
   border-radius: 0;
 }
 
-  &[round] {
+.button-round {
   border-radius: $button-round-border-radius;
   padding: $button-round-padding;
 }
 
-  &[large] {
+.button-large {
   padding: 0 $button-large-padding;
   min-height: $button-large-height;
   font-size: $button-large-font-size;
 }
 
-  &[small] {
+.button-small {
   padding: 0 $button-small-padding;
   min-height: $button-small-height;
   font-size: $button-small-font-size;
@@ -72,7 +72,7 @@ button,
   box-shadow: $button-md-box-shadow-active;
 }
 
-  &[fab] {
+.button-fab {
   border-radius: 50%;
   box-shadow: $button-md-fab-box-shadow;
 
@@ -81,11 +81,11 @@ button,
   }
 }
 
-  &.icon-only {
+.button-icon-only {
   padding: 0;
 }
 
-  &[outline] {
+.button-outline {
   box-shadow: none;
 
   &.activated {
@@ -97,7 +97,7 @@ button,
   }
 }
 
-  &[clear] {
+.button-clear {
   opacity: 1;
   box-shadow: none;
 
@@ -106,22 +106,16 @@ button,
   }
 }
 
-}
-
-
 // Material Design Button Color Mixin
 // --------------------------------------------------
 
 @mixin button-theme-md($color-name, $color-value) {
 
-  button[#{$color-name}],
-  [button][#{$color-name}] {
-
-    &.activated {
+  .button-#{$color-name}.activated {
     opacity: 1;
   }
 
-    &[outline] {
+  .button-outline {
 
     md-ripple {
       background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
@@ -138,8 +132,6 @@ button,
 
 }
 
-}
-
 
 // Generate Material Design Button Auxiliary Colors
 // --------------------------------------------------

ionic/components/button/test/block/main.html

@@ -6,33 +6,33 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <a button class="button-block" href="#">a[button].button-block</a>
-    <button block>button.button-block</button>
+    <a button class="button-block" href="#">a block</a>
+    <button class="button-block">block</button>
   </p>
 
   <p>
-    <a button class="button-block" href="#"><icon help-circle></icon> a[button].button-block icon</a>
-    <button block><icon help-circle></icon> button.button-block icon</button>
+    <a button class="button-block" href="#"><icon help-circle></icon> a block icon</a>
+    <button class="button-block"><icon help-circle></icon> block icon</button>
   </p>
 
   <p>
-    <a button class="button-block button-outline-secondary" href="#">a[button].button-block.button-outline-secondary</a>
-    <button class="button-block button-outline-secondary">button.button-block.button-outline-secondary</button>
+    <a button class="button-block button-outline-secondary" href="#">a block outline secondary</a>
+    <button class="button-block button-outline-secondary">button block outline secondary</button>
   </p>
 
   <p>
-    <a button class="button-block button-clear-dark" href="#">a[button].button-block.button-clear-dark</a>
-    <button class="button-block button-clear-dark">button.button-block.button-clear-dark</button>
+    <a button class="button-block button-clear-dark" href="#">a block clear dark</a>
+    <button class="button-block button-clear-dark">button block clear dark</button>
   </p>
 
   <p>
-    <a button class="button-block button-round" href="#">a[button].button-block.button-round</a>
-    <button class="button-block button-round">button.button-block.button-round</button>
+    <a button class="button-block button-round" href="#">a block round</a>
+    <button class="button-block button-round">button block ound</button>
   </p>
 
   <p>
-    <a button class="button-block button-round button-outline" href="#">a[button].button-block.button-round.button-outline</a>
-    <button class="button-block button-round button-outline">button.button-block.button-round.button-outline</button>
+    <a button class="button-block button-round button-outline" href="#">a block round outline</a>
+    <button class="button-block button-round button-outline">button block round outline</button>
   </p>
 
 </ion-content>