open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Subtlety

Browse Source 
>an animated checkbox needlessly draws attention to itself

But... I feel the need. Drawing attention to the checkbox is intentional to indicate click action.

>In case the entire row is highlighted there will be no distraction

Clickable area isn't the entire row, it's everything left of action icons. Hovering background on part of the row will look odd, and it's also a less obvious indicator of click action IMO.

Didn't change "disable all" yet. It's a special kinda function, so maybe slightly more drastic is warranted, but I can tone that down too.
This commit is contained in:
narcolepticinsomniac 2017-12-02 18:42:57 -05:00 committed by GitHub
parent 4c2797a18e
commit 2828e8bba3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
popup/popup.css
View File

@ -32,11 +32,6 @@ body > div:not(#installed) {
margin: 2px 0 0 2px;
}
input[type="checkbox"]:checked:hover + .svg-icon.checked,
.style-name:hover input[type="checkbox"]:checked + .svg-icon.checked {
fill: #fff;
}
input[type="checkbox"]:checked + .svg-icon.checked {
display: inline-flex;
transition: fill .25s;
@ -57,12 +52,14 @@ input[type="checkbox"] {
}
input[type="checkbox"]:checked:hover, .style-name:hover input[type="checkbox"]:checked {
background-color: hsl(0, 0%, 46%);
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"],
.entry.disabled .style-name:hover input[type="checkbox"] {
background-color: hsl(0, 0%, 76%);
border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%);
}
#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {