mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(hover): use :hover:not(.disable-hover)
Less CSS specificity issues. Disabling hover on mobile prevents button flickers.
This commit is contained in:
@@ -14,7 +14,7 @@ $button-round-border-radius: 64px !default;
|
||||
$button-color: color(primary) !default;
|
||||
$button-color-activated: darken-or-lighten($button-color) !default;
|
||||
$button-text-color: inverse($button-color) !default;
|
||||
$button-hover-opacity: 0.88 !default;
|
||||
$button-hover-opacity: 0.8 !default;
|
||||
|
||||
|
||||
// Default Button
|
||||
@@ -63,6 +63,11 @@ button,
|
||||
background: $button-color;
|
||||
color: $button-text-color;
|
||||
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: $button-hover-opacity;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $button-color-activated;
|
||||
@@ -112,13 +117,6 @@ button,
|
||||
|
||||
}
|
||||
|
||||
.enable-hover button:hover,
|
||||
.enable-hover [button]:hover {
|
||||
opacity: $button-hover-opacity;
|
||||
color: $button-text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a[button] {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user