skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button-toggle): remove hover state on touch devices (#13724)

Browse Source 
Negates the `:hover` state on touch devices, in order to prevent it from lingering after the user taps on a button toggle. Also fixes the native tap highlight showing up if the user taps on a disabled toggle group.
This commit is contained in:
Kristiyan Kostadinov
2018-11-03 01:24:36 +01:00
committed by Jeremy Elbourn
parent 8fad5d180f
commit a320af2d64
1 changed files with 11 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/button-toggle/button-toggle.scss
+11 -1
View File
@@ -18,6 +18,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
white-space: nowrap;
overflow: hidden;
border-radius: $mat-button-toggle-legacy-border-radius;
-webkit-tap-highlight-color: transparent;
@include cdk-high-contrast {
outline: solid 1px;
@@ -46,7 +47,6 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
.mat-button-toggle {
white-space: nowrap;
position: relative;
-webkit-tap-highlight-color: transparent;
&.cdk-keyboard-focused {
.mat-button-toggle-focus-overlay {
@@ -77,6 +77,16 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
opacity: 0.5;
}
}
// On touch devices the hover state will linger on the element after the user has tapped.
// Disable it, because it can be confused with focus. We target the :hover state explicitly,
// because we still want to preserve the keyboard focus state for hybrid devices that have
// a keyboard and a touchscreen.
@media (hover: none) {
&:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
display: none;
}
}
}
.mat-button-toggle-label-content {