mo/mitlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance styling and animations in ListsPage component
All checks were successful
Deploy to Production, build images and push to Gitea Registry / build_and_push (pull_request) Successful in 1m17s
Details

Browse Source 
- Updated transition effects for checkbox elements to use cubic-bezier for smoother animations.
- Added scale transformation on hover and checked states for improved visual feedback.
- Adjusted animation durations for checkbox interactions to enhance user experience.
- Refined text styling for checked checkboxes to include color change and line-through effect.

These changes aim to improve the overall user interface and interaction dynamics of the ListsPage component.
This commit is contained in:
mohamad 2025-06-01 22:03:08 +02:00
parent 5cb13862ef
commit b07ab09f88
1 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
fe/src/pages/ListsPage.vue
View File

@ -559,12 +559,13 @@ onUnmounted(() => {
display: grid; display: grid;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.neo-checkbox-label input[type="checkbox"]:hover { .neo-checkbox-label input[type="checkbox"]:hover {
border-color: var(--secondary); border-color: var(--secondary);
background: var(--light); background: var(--light);
transform: scale(1.05);
} }
.neo-checkbox-label input[type="checkbox"]::before, .neo-checkbox-label input[type="checkbox"]::before,
@ -575,6 +576,7 @@ onUnmounted(() => {
background: var(--primary); background: var(--primary);
border-radius: 2px; border-radius: 2px;
opacity: 0; opacity: 0;
transition: opacity 0.2s ease;
} }
.neo-checkbox-label input[type="checkbox"]::before { .neo-checkbox-label input[type="checkbox"]::before {
@ -592,21 +594,22 @@ onUnmounted(() => {
.neo-checkbox-label input[type="checkbox"]:checked { .neo-checkbox-label input[type="checkbox"]:checked {
border-color: var(--primary); border-color: var(--primary);
background: var(--light); background: var(--light);
transform: scale(1.05);
} }
.neo-checkbox-label input[type="checkbox"]:checked::before { .neo-checkbox-label input[type="checkbox"]:checked::before {
opacity: 1; opacity: 1;
animation: check-01 0.4s ease forwards; animation: check-01 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
} }
.neo-checkbox-label input[type="checkbox"]:checked::after { .neo-checkbox-label input[type="checkbox"]:checked::after {
opacity: 1; opacity: 1;
animation: check-02 0.4s ease forwards; animation: check-02 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
} }
.checkbox-text-span { .checkbox-text-span {
position: relative; position: relative;
transition: color 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.checkbox-text-span::before, .checkbox-text-span::before,
@ -614,6 +617,7 @@ onUnmounted(() => {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.checkbox-text-span::before { .checkbox-text-span::before {
@ -623,7 +627,7 @@ onUnmounted(() => {
transform: translateY(-50%); transform: translateY(-50%);
background: var(--secondary); background: var(--secondary);
border-radius: 2px; border-radius: 2px;
transition: background 0.3s ease; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
} }
.checkbox-text-span::after { .checkbox-text-span::after {
@ -632,7 +636,7 @@ onUnmounted(() => {
width: 4px; width: 4px;
height: 4px; height: 4px;
top: 50%; top: 50%;
left: 50%; left: 130%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
border-radius: 50%; border-radius: 50%;
background: var(--accent); background: var(--accent);
@ -640,8 +644,15 @@ onUnmounted(() => {
pointer-events: none; pointer-events: none;
} }
.neo-checkbox-label input[type="checkbox"]:checked+.checkbox-text-span {
color: var(--dark);
opacity: 0.7;
text-decoration: line-through var(--dark);
transform: translateX(4px);
}
.neo-checkbox-label input[type="checkbox"]:checked+.checkbox-text-span::after { .neo-checkbox-label input[type="checkbox"]:checked+.checkbox-text-span::after {
animation: firework 0.6s ease forwards 0.15s; animation: firework 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.15s;
} }
.neo-completed-static { .neo-completed-static {
@ -814,7 +825,7 @@ onUnmounted(() => {
@keyframes firework { @keyframes firework {
0% { 0% {
opacity: 1; opacity: 1;
transform: translate(-50%, -50%); transform: translate(-50%, -50%) scale(0.5);
box-shadow: box-shadow:
0 0 0 0 var(--accent), 0 0 0 0 var(--accent),
0 0 0 0 var(--accent), 0 0 0 0 var(--accent),
@ -826,11 +837,12 @@ onUnmounted(() => {
50% { 50% {
opacity: 1; opacity: 1;
transform: translate(-50%, -50%) scale(1);
} }
100% { 100% {
opacity: 0; opacity: 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%) scale(1.2);
box-shadow: box-shadow:
0 -15px 0 0 var(--accent), 0 -15px 0 0 var(--accent),
14px -8px 0 0 var(--accent), 14px -8px 0 0 var(--accent),