From 07dd8995b6bb215bd5bbb6e3feaa5f3b8da678a4 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 17 Jan 2025 01:22:09 +0200 Subject: [PATCH] style(next): overhaul the check / uncheck animation for radio buttons --- src/public/stylesheets/theme-next/forms.css | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index d3864ee8d..f93703ca4 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -283,15 +283,26 @@ label:has(input[type="radio"]:hover)::before { background: var(--radio-checkbox-hover-background); } +@keyframes radio-checked { + from { + transform: scale(1.5); + } to { + transform: scale(.5); + } +} + /* The inner circle */ label:has(input[type="radio"])::after { - background: transparent; + background: var(--radio-checkbox-indicator-color); 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 { - background: var(--radio-checkbox-indicator-color); transform: scale(.5); - transition: transform 150ms ease-in; + opacity: 1; + transition: opacity 150ms linear; + animation: radio-checked 200ms ease-out; } \ No newline at end of file