Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-16 23:02:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next): overhaul the check / uncheck animation for radio buttons

Browse Source
This commit is contained in:
Adorian Doran 2025-01-17 01:22:09 +02:00
parent 4c84bc724d
commit 07dd8995b6
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/public/stylesheets/theme-next/forms.css
View File

@ -283,15 +283,26 @@ label:has(input[type="radio"]:hover)::before {
background: var(--radio-checkbox-hover-background); background: var(--radio-checkbox-hover-background);
} }
@keyframes radio-checked {
from {
transform: scale(1.5);
} to {
transform: scale(.5);
}
}
/* The inner circle */ /* The inner circle */
label:has(input[type="radio"])::after { label:has(input[type="radio"])::after {
background: transparent; background: var(--radio-checkbox-indicator-color);
transform: scale(0); transform: scale(0);
transition: transform 300ms ease-out; opacity: 0;
transition: opacity 300ms linear,
transform 300ms ease-in;
} }
label:has(input[type="radio"]:checked)::after { label:has(input[type="radio"]:checked)::after {
background: var(--radio-checkbox-indicator-color);
transform: scale(.5); transform: scale(.5);
transition: transform 150ms ease-in; opacity: 1;
transition: opacity 150ms linear;
animation: radio-checked 200ms ease-out;
} }