refactor(hover): use :hover:not(.disable-hover)

Less CSS specificity issues. Disabling hover on mobile prevents button
flickers.
This commit is contained in:
Adam Bradley
2015-09-24 13:31:35 -05:00
parent 6580f53607
commit 4d84cdae83
8 changed files with 39 additions and 38 deletions

View File

@@ -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;
}