glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ComparisonSlider): rotate icon for the mobile and slightly tweak styles

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-18 16:52:50 +03:00
parent a65d692139
commit 411dbfefcb
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ToggleMenuButton.svelte
View File

@@ -36,16 +36,25 @@ const fontB = $derived(comparisonStore.fontB);
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
class={cn('lucide lucide-circle-arrow-right-icon lucide-circle-arrow-right', className)} class={cn(
'lucide lucide-circle-arrow-right-icon lucide-circle-arrow-right',
className,
)}
> >
<circle cx="12" cy="12" r="10" /> <circle cx="12" cy="12" r="10" />
{#if isActive} {#if isActive}
<path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m15 9-6 6" /><path <path
transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
d="m15 9-6 6"
/><path
transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
d="m9 9 6 6" d="m9 9 6 6"
/> />
{:else} {:else}
<path transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} d="m12 16 4-4-4-4" /><path <path
transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
d="m12 16 4-4-4-4"
/><path
transition:draw={{ duration: 150, delay: 150, easing: cubicOut }} transition:draw={{ duration: 150, delay: 150, easing: cubicOut }}
d="M8 12h8" d="M8 12h8"
/> />
@@ -62,13 +71,18 @@ const fontB = $derived(comparisonStore.fontB);
'transition-transform duration-150 active:scale-98', 'transition-transform duration-150 active:scale-98',
)} )}
> >
{@render icon('size-4 stroke-[1.5] stroke-gray-500')} {@render icon(
cn(
'size-4 stroke-[1.5] stroke-gray-500',
!isActive && 'rotate-90 sm:rotate-0',
),
)}
<div class="w-px h-2.5 bg-gray-400/50"></div> <div class="w-px h-2.5 bg-gray-400/50"></div>
<div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-indigo-500 text-right"> <div class="text-[0.75rem] sm:text-xs transition-all delay-150 group-hover:text-semibold text-indigo-500 text-right whitespace-nowrap">
{fontB?.name} {fontB?.name}
</div> </div>
<div class="w-px h-2.5 bg-gray-400/50"></div> <div class="w-px h-2.5 bg-gray-400/50"></div>
<div class="text-xs uppercase transition-all delay-150 group-hover:opacity-100 text-neural-950 text-left"> <div class="text-[0.75rem] sm:text-xs transition-all delay-150 group-hover:text-semibold text-neural-950 text-left whitespace-nowrap">
{fontA?.name} {fontA?.name}
</div> </div>
</button> </button>