2023-08-02 05:17:24 -04:00
|
|
|
span.chcklst-stroked {
|
|
|
|
text-decoration: line-through;
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin checklist-svg-icon($svg) {
|
|
|
|
&:before {
|
|
|
|
background-color: var(--primary);
|
|
|
|
content: "";
|
|
|
|
-webkit-mask: svg-uri(
|
|
|
|
'<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 448 512"><path d="#{$svg}"></path></svg>'
|
|
|
|
)
|
|
|
|
no-repeat 50% 50%;
|
|
|
|
mask: svg-uri(
|
|
|
|
'<svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" width="14px" height="16px" viewBox="0 0 448 512"><path d="#{$svg}"></path></svg>'
|
|
|
|
)
|
|
|
|
no-repeat 50% 50%;
|
|
|
|
-webkit-mask-size: cover;
|
|
|
|
mask-size: cover;
|
|
|
|
width: 1em;
|
|
|
|
height: 1em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
span.chcklst-box {
|
2024-04-09 10:00:26 -04:00
|
|
|
cursor: pointer;
|
|
|
|
display: inline-flex;
|
|
|
|
vertical-align: text-bottom;
|
2023-08-02 05:17:24 -04:00
|
|
|
|
|
|
|
&:not(.checked) {
|
|
|
|
&.fa-square-o {
|
|
|
|
@include checklist-svg-icon(
|
|
|
|
"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z"
|
|
|
|
);
|
|
|
|
}
|
|
|
|
&.fa-square {
|
|
|
|
@include checklist-svg-icon(
|
|
|
|
"M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.checked {
|
|
|
|
@include checklist-svg-icon(
|
|
|
|
"M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zm-204.686-98.059l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.248-16.379-6.249-22.628 0L184 302.745l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.25 16.379 6.25 22.628.001z"
|
|
|
|
);
|
|
|
|
|
|
|
|
&.fa-check-square-o {
|
|
|
|
@include checklist-svg-icon(
|
|
|
|
"M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.readonly {
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.hidden {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ul li.has-checkbox {
|
|
|
|
list-style-type: none;
|
|
|
|
|
2024-04-09 18:28:23 -04:00
|
|
|
.list-item-checkbox {
|
|
|
|
margin-left: -1.33em;
|
|
|
|
}
|
2023-08-02 05:17:24 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.fa-spin {
|
2024-04-09 10:00:26 -04:00
|
|
|
display: inline-flex;
|
|
|
|
vertical-align: text-bottom;
|
2023-08-02 05:17:24 -04:00
|
|
|
animation: fa-spin 2s infinite linear;
|
2024-04-09 10:00:26 -04:00
|
|
|
width: 1em;
|
|
|
|
height: 1em;
|
2023-08-02 05:17:24 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fa-spin {
|
|
|
|
0% {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
transform: rotate(1turn);
|
|
|
|
}
|
|
|
|
}
|