38e81f2858
We added the feature to undo a vote and made it obvious for people using screen readers using the `aria-pressed` attribute. However, for sighted people, the only way to know a button can be unpressed is to try to press it again and see what happens. The most obvious way to indicate it would be to add a text indicating that you can undo your vote. However, that'd require changing the design quite a bit. So, after trying a few techniques, we're using a classic approach browsers have used by default for years: using an inset border for pressed buttons and an outset border for unpressed ones. It might now be enough, though; we haven't done usability tests to confirm this point. Since icons to like/unlike comments don't have a border, I'm not sure what to do in this case; the icons are small and that makes it hard to style them in a distinct way. So for now we're not changing these icons.
88 lines
1.7 KiB
SCSS
88 lines
1.7 KiB
SCSS
.in-favor-against {
|
|
@include flex-with-gap($line-height / 4);
|
|
|
|
@include breakpoint(medium) {
|
|
@include flex-with-gap($line-height * 3 / 4);
|
|
}
|
|
|
|
&,
|
|
.in-favor,
|
|
.against,
|
|
form {
|
|
display: inline-block;
|
|
}
|
|
|
|
button {
|
|
background: #fff;
|
|
border-radius: rem-calc(3);
|
|
color: $dark-gray;
|
|
display: inline-block;
|
|
font-size: rem-calc(30);
|
|
line-height: rem-calc(30);
|
|
padding: rem-calc(3) rem-calc(6) rem-calc(6);
|
|
position: relative;
|
|
|
|
&[aria-pressed=true] {
|
|
border-style: inset;
|
|
border-width: 3px 2px 2px 3px;
|
|
|
|
&:active {
|
|
border-style: outset;
|
|
border-width: 2px 3px 3px 2px;
|
|
}
|
|
}
|
|
|
|
&[aria-pressed=false] {
|
|
border-style: outset;
|
|
border-width: 2px 3px 3px 2px;
|
|
|
|
&:active {
|
|
border-style: inset;
|
|
border-width: 3px 2px 2px 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin like-unlike-icon($icon, $pressed-color) {
|
|
@include has-fa-icon($icon, regular);
|
|
|
|
&:not([disabled]) {
|
|
cursor: pointer;
|
|
|
|
&[aria-pressed=false]:hover,
|
|
&[aria-pressed=false]:active,
|
|
&[aria-pressed=true]:not(:hover, :active) {
|
|
@include has-fa-icon($icon, solid);
|
|
}
|
|
|
|
&[aria-pressed=true] {
|
|
background: $pressed-color;
|
|
border-color: $pressed-color;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.in-favor button {
|
|
@include like-unlike-icon(thumbs-up, $like);
|
|
}
|
|
|
|
.against button {
|
|
@include like-unlike-icon(thumbs-down, $unlike);
|
|
}
|
|
|
|
.percentage {
|
|
display: inline-block;
|
|
font-size: $small-font-size;
|
|
line-height: $line-height * 2;
|
|
padding-right: $line-height / 2;
|
|
vertical-align: top;
|
|
|
|
@include breakpoint(medium) {
|
|
display: block;
|
|
line-height: $line-height;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|