consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change styles of pressed buttons on hover

Browse Source 
Since we were styling pressed buttons the same way as buttons on hover,
a person hovering on the button and then clicking it wouldn't notice
that the buttons had been pressed unless they noticed that the number
and percentages of votes had changes. They wouldn't notice the changes
when unpressing the buttons either, since, after clicking the button,
the cursor would still be over it, and so the hover styles would apply.

Furthermore, it was hard for mouse users to realize that a button could
be unpressed, since the style of pressed buttons didn't change on hover.

So we're now changing the icons on hover without changing the
background. This way all four states (unpressed, unpressed on hover,
pressed, pressed on hover) are styled in a different way.
This commit is contained in:
Javi Martín
2023-10-10 22:50:20 +02:00
parent 11a33c12e3
commit 3482e6e058
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/stylesheets/in_favor_against.scss
View File

@@ -30,10 +30,13 @@
&:not([disabled]) { &:not([disabled]) {
cursor: pointer; cursor: pointer;
&:hover, &[aria-pressed=false]:hover,
&:active, &[aria-pressed=false]:active,
&[aria-pressed=true] { &[aria-pressed=true]:not(:hover, :active) {
@include has-fa-icon($icon, solid); @include has-fa-icon($icon, solid);
}
&[aria-pressed=true] {
background: $pressed-color; background: $pressed-color;
border-color: $pressed-color; border-color: $pressed-color;
color: #fff; color: #fff;

7
app/assets/stylesheets/layout.scss
View File

@@ -1710,9 +1710,12 @@ table {
@mixin like-unlike-icon($icon, $pressed-color) { @mixin like-unlike-icon($icon, $pressed-color) {
@include has-fa-icon($icon, regular); @include has-fa-icon($icon, regular);
&:hover, &[aria-pressed=false]:hover,
&[aria-pressed=true] { &[aria-pressed=true]:not(:hover) {
@include has-fa-icon($icon, solid); @include has-fa-icon($icon, solid);
}
&[aria-pressed=true] {
color: $pressed-color; color: $pressed-color;
} }
} }