fix(ripple): remove webkit touch highlights from ripple containers (#…

…12082)

Since the ripples are feedback enough that the element was touched, we should disable the native feedback on touch devices so it doesn't overlap with the ripples. These changes go through the various clickable ripple triggers and remove the Webkit highlighting.

src/lib/button-toggle/button-toggle.scss

@@ -42,6 +42,7 @@ $mat-button-toggle-border-radius: 2px !default;
 .mat-button-toggle {
   white-space: nowrap;
   position: relative;
+  -webkit-tap-highlight-color: transparent;
 
   // Similar to components like the checkbox, slide-toggle and radio, we cannot show the focus
   // overlay for `.cdk-program-focused` because mouse clicks on the <label> element would be always

src/lib/chips/chips.scss

@@ -24,6 +24,7 @@ $mat-chip-remove-size: 18px;
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .mat-standard-chip {

src/lib/core/option/option.scss

@@ -13,6 +13,7 @@
   max-width: 100%;
   box-sizing: border-box;
   align-items: center;
+  -webkit-tap-highlight-color: transparent;
 
   &[aria-disabled='true'] {
     @include user-select(none);

src/lib/list/list.scss

@@ -41,6 +41,7 @@ $mat-list-item-inset-divider-offset: 72px;
   // being `inline` by default.
   display: block;
   height: $base-height;
+  -webkit-tap-highlight-color: transparent;
 
   .mat-list-item-content {
     display: flex;

src/lib/stepper/step-header.scss

@@ -14,6 +14,7 @@ $mat-step-header-icon-size: 16px !default;
   cursor: pointer;
   position: relative;
   box-sizing: content-box;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .mat-step-optional {

src/lib/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -18,6 +18,7 @@
   text-decoration: none;  // Removes anchor underline styling
   position: relative;
   overflow: hidden;  // Keeps the ripple from extending outside the element bounds
+  -webkit-tap-highlight-color: transparent;
 
   [mat-stretch-tabs] & {
     flex-basis: 0;