Only show checkbox on hover/focus + accessibility fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-08-01 10:52:01 +02:00
parent 27d4ff8b4e
commit cbe54e096b
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
1 changed files with 18 additions and 5 deletions

View File

@ -1095,6 +1095,10 @@ $popovericon-size: 16px;
&:focus, &:focus,
&.active { &.active {
background-color: var(--color-background-dark); 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, .app-content-list-item-checkbox.checkbox + label,
@ -1102,20 +1106,28 @@ $popovericon-size: 16px;
position: absolute; position: absolute;
height: 40px; height: 40px;
width: 40px; width: 40px;
display: flex;
z-index: 50; z-index: 50;
} }
.app-content-list-item-checkbox.checkbox { .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 // if checked, lower the opacity of the avatar
+ label + .app-content-list-item-icon { + .app-content-list-item-icon {
opacity: .7; opacity: .7;
} }
} }
}
+ label { + label {
top: 14px; top: 14px;
left: 7px; left: 7px;
// hidden by default, only chown on hover-focus or if checked
display: none;
&::before { &::before {
margin: 0; margin: 0;
} }
@ -1127,6 +1139,7 @@ $popovericon-size: 16px;
} }
.app-content-list-item-star { .app-content-list-item-star {
display: flex;
top: 10px; top: 10px;
left: 32px; left: 32px;
background-size: 16px; background-size: 16px;