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>
+     [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,27 +1,29 @@
 // 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;
-    }
-  }
-
   &[disabled]:hover {
     &.mat-primary, &.mat-accent, &.mat-warn, .mat-button-focus-overlay {
       background-color: transparent;
     }
+
+    .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

@@ -110,6 +110,8 @@ export class MdButton {
     return el.hasAttribute('md-' + suffix) || el.hasAttribute('mat-' + suffix);
   });
 
+  _isIconButton: boolean = this._getHostElement().hasAttribute('md-icon-button');
+
   /** Whether the ripple effect on click should be disabled. */
   private _disableRipple: boolean = false;
   private _disabled: boolean = null;