sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: toggle switch animation using inline styles

Browse Source 
Use inline transform styles instead of Tailwind classes to ensure
the toggle thumb animates properly regardless of compiled CSS.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-27 18:29:31 +01:00
parent b4b524d021
commit acd6adfcfd
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/templates/shared/macros/inputs.html
View File

@@ -311,9 +311,9 @@
color='indigo'
) %}
{% set sizes = {
'sm': {'track': 'w-10 h-5', 'thumb': 'w-4 h-4', 'translate': 'translate-x-5', 'text': 'text-sm'},
'md': {'track': 'w-14 h-7', 'thumb': 'w-5 h-5', 'translate': 'translate-x-7', 'text': 'text-base'},
'lg': {'track': 'w-16 h-8', 'thumb': 'w-6 h-6', 'translate': 'translate-x-8', 'text': 'text-lg'}
'sm': {'track': 'w-10 h-5', 'thumb': 'w-4 h-4', 'offset': '1.25rem', 'text': 'text-sm'},
'md': {'track': 'w-14 h-7', 'thumb': 'w-5 h-5', 'offset': '1.75rem', 'text': 'text-base'},
'lg': {'track': 'w-16 h-8', 'thumb': 'w-6 h-6', 'offset': '2rem', 'text': 'text-lg'}
} %}
{% set s = sizes[size] %}
<div class="inline-flex items-center gap-3">
@@ -328,8 +328,8 @@
:aria-checked="{{ model }}"
class="{{ s.track }} relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-{{ color }}-500 focus:ring-offset-2"
:class="{{ model }} ? 'bg-{{ color }}-600' : 'bg-gray-300 dark:bg-gray-600'">
<span class="{{ s.thumb }} absolute left-0.5 bg-white rounded-full shadow-md transition-transform"
:class="{{ model }} ? '{{ s.translate }}' : 'translate-x-0'"></span>
<span class="{{ s.thumb }} absolute bg-white rounded-full shadow-md transition-transform duration-200"
:style="{{ model }} ? 'transform: translateX({{ s.offset }})' : 'transform: translateX(0.125rem)'"></span>
</button>
{% if right_label %}