Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Cleanup material-design checkbox

Browse source
This commit is contained in:
the-djmaze 2023-02-06 10:04:00 +01:00
parent 7ffe02c28a
commit b2fdc39670
2 changed files with 5 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

12
dev/Styles/Components.less
View file

@ -61,6 +61,7 @@
opacity:0; opacity:0;
position:absolute; position:absolute;
top:0; top:0;
left:0;
} }
&:focus-within { &:focus-within {
@ -76,23 +77,18 @@
.e-checkbox.material-design { .e-checkbox.material-design {
line-height: 20px; line-height: 20px;
padding-left: 18px;
position: relative;
width: auto !important; width: auto !important;
> div { > div {
position: relative;
width: 18px;
height: 18px;
vertical-align: top;
}
> div > div {
position: absolute; position: absolute;
margin-top: 1px; margin-top: 1px;
.checkbox-box-sizes(); .checkbox-box-sizes();
animation: checkmark-to-box 200ms ease-out forwards; animation: checkmark-to-box 200ms ease-out forwards;
} }
input:checked + div div { input:checked + div {
.checkbox-mark-sizes(); .checkbox-mark-sizes();
animation: box-to-checkmark 200ms ease-out forwards; animation: box-to-checkmark 200ms ease-out forwards;
} }

2
snappymail/v/0.0.0/app/templates/Views/Components/Checkbox.html
View file

@ -1,6 +1,6 @@
<label class="e-component e-checkbox material-design" data-bind="css: { 'disabled': !enable() }"> <label class="e-component e-checkbox material-design" data-bind="css: { 'disabled': !enable() }">
<input type="checkbox" value="1" data-bind="checked: value, enable: enable, attr: {name: name}"/> <input type="checkbox" value="1" data-bind="checked: value, enable: enable, attr: {name: name}"/>
<div role="checkbox"><div></div></div> <div role="checkbox"></div>
<!-- ko if: label --> <!-- ko if: label -->
<span data-bind="attr: {'data-i18n': label}"></span> <span data-bind="attr: {'data-i18n': label}"></span>
<!-- /ko --> <!-- /ko -->