Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Disable button hover effects on touch devices

This commit is contained in:
Kris 2018-10-04 17:15:37 -04:00
parent 9554d657c5
commit 98b9913033
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/stylesheets/common/components/buttons.scss
View File

@ -54,11 +54,14 @@
color: $primary; color: $primary;
min-height: unset; // ovverides button defaults min-height: unset; // ovverides button defaults
} }
.discourse-no-touch & {
// only allow hover on no-touch devices
&:hover, &:hover,
&.btn-hover { &.btn-hover {
background: $primary-medium; background: $primary-medium;
color: $secondary; color: $secondary;
} }
}
&[disabled], &[disabled],
&.disabled { &.disabled {
background: $primary-low; background: $primary-low;
@ -89,6 +92,8 @@
&[href] { &[href] {
color: $secondary; color: $secondary;
} }
.discourse-no-touch & {
// only allow hover on no-touch devices
&:hover, &:hover,
&.btn-hover { &.btn-hover {
background: dark-light-choose( background: dark-light-choose(
@ -96,6 +101,7 @@
scale-color($tertiary, $lightness: 20%) scale-color($tertiary, $lightness: 20%)
); );
} }
}
&:active, &:active,
&.btn-active { &.btn-active {
@include linear-gradient( @include linear-gradient(
@ -119,6 +125,8 @@
&[href] { &[href] {
color: $secondary; color: $secondary;
} }
.discourse-no-touch & {
// only allow hover on no-touch devices
&:hover, &:hover,
&.btn-hover { &.btn-hover {
background: dark-light-choose( background: dark-light-choose(
@ -126,6 +134,7 @@
scale-color($danger, $lightness: 20%) scale-color($danger, $lightness: 20%)
); );
} }
}
&:active, &:active,
&.btn-active { &.btn-active {
@include linear-gradient(scale-color($danger, $lightness: -20%), $danger); @include linear-gradient(scale-color($danger, $lightness: -20%), $danger);