Skip to content

Commit

Permalink
Polish checkbox styles
Browse files Browse the repository at this point in the history
  • Loading branch information
temnov98 committed Dec 18, 2023
1 parent db6ca96 commit 01f9b55
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 1 deletion.
57 changes: 57 additions & 0 deletions examples/tapme/css/components/check-lists.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
18 changes: 17 additions & 1 deletion examples/tapme/js/pages/check-lists/check-list.page.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 01f9b55

Please sign in to comment.