widgets: Add classes to todo-widget div and span tags.

This commit is contained in:
Karl Stolley 2024-05-08 15:21:59 -05:00 committed by Tim Abbott
parent 9b8e8bf0d3
commit 7820c5e15e
2 changed files with 8 additions and 8 deletions

View File

@ -37,7 +37,7 @@
vertical-align: top; vertical-align: top;
& input[type="checkbox"] { & input[type="checkbox"] {
~ span { ~ .custom-checkbox {
height: 12px; height: 12px;
width: 12px; width: 12px;
border: 2px solid hsl(156deg 28% 70%); border: 2px solid hsl(156deg 28% 70%);
@ -48,7 +48,7 @@
cursor: pointer; cursor: pointer;
} }
&:checked ~ span { &:checked ~ .custom-checkbox {
background-image: url("../images/checkbox-white.svg"); background-image: url("../images/checkbox-white.svg");
background-size: 75%; background-size: 75%;
background-position: 50% 50%; background-position: 50% 50%;
@ -57,16 +57,16 @@
border: 2px solid hsl(156deg 41% 40%); border: 2px solid hsl(156deg 41% 40%);
} }
&:disabled ~ span { &:disabled ~ .custom-checkbox {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
&:hover ~ span { &:hover ~ .custom-checkbox {
border-color: hsl(156deg 30% 50%); border-color: hsl(156deg 30% 50%);
} }
&:focus ~ span { &:focus ~ .custom-checkbox {
outline-color: hsl(0deg 0% 100% / 0%); outline-color: hsl(0deg 0% 100% / 0%);
} }
} }

View File

@ -1,11 +1,11 @@
{{#each all_tasks}} {{#each all_tasks}}
<li> <li>
<label class="checkbox"> <label class="checkbox">
<div> <div class="todo-checkbox">
<input type="checkbox" class="task" data-key="{{ key }}" {{#if completed}}checked{{/if}}/> <input type="checkbox" class="task" data-key="{{ key }}" {{#if completed}}checked{{/if}}/>
<span></span> <span class="custom-checkbox"></span>
</div> </div>
<div> <div class="todo-task">
{{#if completed}} {{#if completed}}
<strike><strong>{{ task }}</strong>{{#if desc }}: {{ desc }}{{/if}}</strike> <strike><strong>{{ task }}</strong>{{#if desc }}: {{ desc }}{{/if}}</strike>
{{else}} {{else}}