style(button): polished icon buttons ripples

Author: EladBezalel

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;
     }
   }
 }
@@ -74,6 +81,8 @@
 // element, however we use a proper DOM element in order to be able to disable the default
 // touch action. This makes the buttons more responsive on touch devices.
 .mat-button-focus-overlay {
+  transition: opacity $swift-ease-in-duration $ease-in-out-curve-function,
+              background-color $swift-ease-in-duration $ease-in-out-curve-function;
   // The button spec calls for focus on raised buttons (and FABs) to be indicated with a
   // black, 12% opacity shade over the normal color (for both light and dark themes).
   background-color: rgba(black, 0.12);

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() {