Polish checkbox styles

temnov98 · Dec 18, 2023 · 01f9b55 · 01f9b55
1 parent db6ca96
commit 01f9b55
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 1 deletion.
diff --git a/examples/tapme/css/components/check-lists.css b/examples/tapme/css/components/check-lists.css
@@ -44,6 +44,10 @@ body:has(.page--dark) .check-lists-page-content__right-column {
     padding-left: 30px;
     border-radius: 20px;
     margin-right: 30px;
+    cursor: pointer;
+
+    --disabled: #C3C8DE;
+    position: relative;
 }
 
 .check-lists-task-item:hover {
@@ -58,6 +62,12 @@ body:has(.page--dark) .check-lists-task-item:hover {
     width: 30px;
     height: 30px;
     margin-top: 25px;
+    cursor: pointer;
+    accent-color: #f2f2f2;
+}
+
+body:has(.page--dark) .check-lists-task-item__checkbox {
+    accent-color: #282828;
 }
 
 .check-lists-task-item__text {
@@ -66,6 +76,53 @@ body:has(.page--dark) .check-lists-task-item:hover {
     height: 100%;
     line-height: 80px;
     padding-left: 15px;
+
+    position: relative;
+    display: grid;
+    align-items: center;
+    width: fit-content;
+    transition: color 0.3s ease;
+}
+
+.check-lists-task-item__text:before {
+    content: "";
+    position: absolute;
+    height: 2px;
+    width: 0;
+    left: -27px;
+    transition: background 0.3s ease;
+}
+
+.check-lists-task-item__checkbox:checked + .check-lists-task-item__text {
+    color: var(--disabled);
+    animation: check-lists-task-item-move 0.3s ease 0.1s forwards;
+}
+
+.check-lists-task-item__checkbox:checked + .check-lists-task-item__text::before {
+    background: var(--disabled);
+    animation: check-lists-task-item-slice 0.4s ease forwards;
+}
+
+@-webkit-keyframes check-lists-task-item-move {
+    50% {
+        padding-left: 8px;
+        padding-right: 0;
+    }
+    100% {
+        padding-right: 4px;
+    }
+}
+
+@-webkit-keyframes check-lists-task-item-slice {
+    60% {
+        width: 100%;
+        left: 4px;
+    }
+    100% {
+        width: 103%;
+        left: 0;
+        padding-left: 0;
+    }
 }
 
 .check-lists-item {

diff --git a/examples/tapme/js/pages/check-lists/check-list.page.component.js b/examples/tapme/js/pages/check-lists/check-list.page.component.js
@@ -49,9 +49,25 @@ class CheckListTaskItemComponent extends Component {
         this.inputId = getId();
     }
 
+    get input() {
+        return document.getElementById(this.inputId);
+    }
+
+    onClick(event) {
+        if (
+            event.target.className === 'check-lists-task-item__checkbox' ||
+            event.target.className === 'check-lists-task-item__text'
+        ) {
+            return;
+        }
+
+        event.stopPropagation();
+        this.input.checked = !this.input.checked;
+    }
+
     toHtml() {
         return t`
-            <div class="check-lists-task-item">
+            <div class="check-lists-task-item" onclick="${(event) => this.onClick(event)}">
                 <input
                     id="${this.inputId}"
                     class="check-lists-task-item__checkbox"