style(button): polished icon buttons ripples

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);
@@ -20,6 +19,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);
@@ -70,6 +87,10 @@
     }
   }
 
+  .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>
+     [mdRippleCentered]="_isIconButton()"
+     [class.mat-button-ripple-round]="_isRoundButton() || _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

@@ -7,17 +7,24 @@
 .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.
+  &[disabled]:hover {
+    &.mat-primary, &.mat-accent, &.mat-warn, .mat-button-focus-overlay {
+      background-color: transparent;
+    }
+
     .mat-button-focus-overlay {
-      opacity: 1;
+      transition: none;
+      opacity: 0;
     }
   }
+}
 
-  &[disabled]:hover {
-    &.mat-primary, &.mat-accent, &.mat-warn, .mat-button-focus-overlay {
-      background-color: transparent;
+.mat-button {
+  // Only flat buttons (not raised, fabs or icon buttons) have a hover style.
+  &:hover {
+    // Use the same visual treatment for hover as for focus.
+    .mat-button-focus-overlay {
+      opacity: 1;
     }
   }
 }

src/lib/button/button.ts

@@ -167,9 +167,13 @@ export class MdButton {
 
   _isRoundButton() {
     const el = this._getHostElement();
-    return el.hasAttribute('md-icon-button') ||
-        el.hasAttribute('md-fab') ||
-        el.hasAttribute('md-mini-fab');
+    return el.hasAttribute('md-fab') ||
+           el.hasAttribute('md-mini-fab');
+  }
+
+  _isIconButton() {
+    const el = this._getHostElement();
+    return el.hasAttribute('md-icon-button');
   }
 
   _isRippleDisabled() {