Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-09-01 05:29:20 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved accessibility of material-design checkbox

Browse source
This commit is contained in:
the-djmaze 2023-01-30 10:09:52 +01:00
parent e148cdea75
commit d0376b53a8
5 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dev/Component/Checkbox.js
View file

@ -1,5 +1,7 @@
export class CheckboxComponent {
constructor(params = {}) {
this.name = params.name;
this.value = ko.isObservable(params.value) ? params.value
: ko.observable(!!params.value);

10
dev/Styles/Components.less
View file

@ -57,7 +57,12 @@
margin-bottom: 6px;
padding: 2px 0;
&:focus {
input {
opacity:0;
position:absolute;
}
&:focus-within {
outline: 1px dotted;
}
@ -70,6 +75,7 @@
.e-checkbox.material-design {
line-height: 20px;
width: auto !important;
> div {
position: relative;
@ -85,7 +91,7 @@
animation: checkmark-to-box 200ms ease-out forwards;
}
div.checked {
input:checked + div div {
.checkbox-mark-sizes();
animation: box-to-checkmark 200ms ease-out forwards;
}