Only show checkbox on hover/focus + accessibility fixes
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
27d4ff8b4e
commit
cbe54e096b
|
@ -1095,6 +1095,10 @@ $popovericon-size: 16px;
|
|||
&:focus,
|
||||
&.active {
|
||||
background-color: var(--color-background-dark);
|
||||
// display checkbox on hover/focus/active
|
||||
.app-content-list-item-checkbox.checkbox + label {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.app-content-list-item-checkbox.checkbox + label,
|
||||
|
@ -1102,20 +1106,28 @@ $popovericon-size: 16px;
|
|||
position: absolute;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.app-content-list-item-checkbox.checkbox {
|
||||
&:checked {
|
||||
&:checked,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
+ label {
|
||||
// display checkbox if checked
|
||||
display: flex;
|
||||
// if checked, lower the opacity of the avatar
|
||||
+ label + .app-content-list-item-icon {
|
||||
+ .app-content-list-item-icon {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
}
|
||||
+ label {
|
||||
top: 14px;
|
||||
left: 7px;
|
||||
// hidden by default, only chown on hover-focus or if checked
|
||||
display: none;
|
||||
&::before {
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -1127,6 +1139,7 @@ $popovericon-size: 16px;
|
|||
}
|
||||
|
||||
.app-content-list-item-star {
|
||||
display: flex;
|
||||
top: 10px;
|
||||
left: 32px;
|
||||
background-size: 16px;
|
||||
|
|
Loading…
Reference in New Issue