style(button): polished icon buttons ripples (#3208)

- changed Icon button ripples to start from the center and removed hover style on icon buttons

Author: EladBezalel

src/lib/button/_button-base.scss

@@ -9,7 +9,8 @@ $mat-button-min-width: 88px !default;
 $mat-button-margin: 0 !default;
 $mat-button-line-height: 36px !default;
 $mat-button-border-radius: 2px !default;
-$mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function !default;
+$mat-button-focus-transition: opacity 200ms $swift-ease-in-out-timing-function,
+                              background-color 200ms $swift-ease-in-out-timing-function !default;
 
 // Icon Button standards
 $mat-icon-button-size: 40px !default;

src/lib/button/_button-theme.scss

@@ -1,6 +1,5 @@
 @import '../core/theming/theming';
 
-
 // Applies a focus style to an md-button element for each of the supported palettes.
 @mixin _mat-button-focus-color($theme) {
   $primary: map-get($theme, primary);
@@ -24,6 +23,24 @@
   }
 }
 
+@mixin _mat-button-ripple-color($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  &.mat-primary .mat-ripple-element {
+    background-color: mat-color($primary, 0.26);
+  }
+
+  &.mat-accent .mat-ripple-element {
+    background-color: mat-color($accent, 0.26);
+  }
+
+  &.mat-warn .mat-ripple-element {
+    background-color: mat-color($warn, 0.26);
+  }
+}
+
 // Applies a property to an md-button element for each of the supported palettes.
 @mixin _mat-button-theme-color($theme, $property, $color: 'default') {
   $primary: map-get($theme, primary);
@@ -69,6 +86,10 @@
     background: transparent;
   }
 
+  .mat-icon-button {
+    @include _mat-button-ripple-color($theme);
+  }
+
   .mat-raised-button, .mat-fab, .mat-mini-fab {
     // Default properties when not using any [color] value.
     color: mat-color($foreground, text);

src/lib/button/button.html

@@ -1,6 +1,7 @@
 <span class="mat-button-wrapper"><ng-content></ng-content></span>
 <div md-ripple *ngIf="!_isRippleDisabled()" class="mat-button-ripple"
-    [class.mat-button-ripple-round]="_isRoundButton"
-    [mdRippleTrigger]="_getHostElement()"></div>
+     [class.mat-button-ripple-round]="_isRoundButton || _isIconButton"
+     [mdRippleCentered]="_isIconButton"
+     [mdRippleTrigger]="_getHostElement()"></div>
 <!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
 <div class="mat-button-focus-overlay" (touchstart)="$event.preventDefault()"></div>

src/lib/button/button.scss

@@ -1,21 +1,23 @@
 // TODO(jelbourn): Measure perf benefits for translate3d and will-change.
 // TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
-
 @import 'button-base';
 @import '../core/a11y/a11y';
 
 .mat-button, .mat-icon-button {
   @extend %mat-button-base;
 
-  // Only flat buttons and icon buttons (not raised or fabs) have a hover style.
-  &:hover {
-    // Use the same visual treatment for hover as for focus.
-    .mat-button-focus-overlay {
-      opacity: 1;
-    }
+  .mat-button-focus-overlay {
+    transition: none;
+    opacity: 0;
   }
 }
 
+// Only flat buttons (not raised, fabs or icon buttons) have a hover style.
+// Use the same visual treatment for hover as for focus.
+.mat-button:hover .mat-button-focus-overlay {
+  opacity: 1;
+}
+
 .mat-raised-button {
   @extend %mat-raised-button;
 }

src/lib/button/button.ts

@@ -100,10 +100,10 @@ export class MdButton implements OnDestroy {
   private _color: string;
 
   /** Whether the button is round. */
-  _isRoundButton: boolean = ['icon-button', 'fab', 'mini-fab'].some(suffix => {
-    let el = this._getHostElement();
-    return el.hasAttribute('md-' + suffix) || el.hasAttribute('mat-' + suffix);
-  });
+  _isRoundButton: boolean = this._hasAttributeWithPrefix('fab', 'mini-fab');
+
+  /** Whether the button is icon button. */
+  _isIconButton: boolean = this._hasAttributeWithPrefix('icon-button');
 
   /** Whether the ripple effect on click should be disabled. */
   private _disableRipple: boolean = false;
@@ -157,6 +157,18 @@ export class MdButton implements OnDestroy {
   _isRippleDisabled() {
     return this.disableRipple || this.disabled;
   }
+
+  /**
+   * Gets whether the button has one of the given attributes
+   * with either an 'md-' or 'mat-' prefix.
+   */
+  _hasAttributeWithPrefix(...unprefixedAttributeNames: string[]) {
+    return unprefixedAttributeNames.some(suffix => {
+      const el = this._getHostElement();
+
+      return el.hasAttribute('md-' + suffix) || el.hasAttribute('mat-' + suffix);
+    });
+  }
 }
 
 /**