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

feat(ComparisonSlider): slightly tweak line styles for better mobile UX

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-07 18:14:39 +03:00
parent 152be85e34
commit a48c9bce0c
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
View File

@@ -18,14 +18,14 @@ interface Props {
let { sliderPos, isDragging }: Props = $props(); let { sliderPos, isDragging }: Props = $props();
</script> </script>
<div <div
class="absolute inset-y-4 pointer-events-none -translate-x-1/2 z-50 transition-all duration-300 ease-out flex flex-col justify-center items-center" class="absolute inset-y-2 sm:inset-y-4 pointer-events-none -translate-x-1/2 z-50 transition-all duration-300 ease-out flex flex-col justify-center items-center"
style:left="{sliderPos}%" style:left="{sliderPos}%"
> >
<!-- We use part of lucide cursor svg icon as a handle --> <!-- We use part of lucide cursor svg icon as a handle -->
<svg <svg
class={cn( class={cn(
'transition-all relative duration-300 text-black/80 drop-shadow-sm', 'transition-all relative duration-300 text-black/80 drop-shadow-sm',
isDragging ? 'w-12 h-12' : 'w-8 h-8', isDragging ? 'size-6 sm:size-12' : 'size-4 sm:size-8',
)} )}
viewBox="0 0 24 12" viewBox="0 0 24 12"
fill="none" fill="none"
@@ -41,12 +41,12 @@ let { sliderPos, isDragging }: Props = $props();
<div <div
class={cn( class={cn(
'relative h-full rounded-sm transition-all duration-500', 'relative h-full rounded-sm transition-all duration-500',
'bg-white/[0.03] backdrop-blur-md', 'bg-white/3 backdrop-blur-md',
// These are the visible "edges" of the glass // These are the visible "edges" of the glass
'shadow-[0_0_40px_rgba(0,0,0,0.1)_inset_0_0_20px_rgba(255,255,255,0.1)]', 'shadow-[0_0_40px_rgba(0,0,0,0.1)_inset_0_0_20px_rgba(255,255,255,0.1)]',
'shadow-[0_10px_30px_-10px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.4)]', 'shadow-[0_10px_30px_-10px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.4)]',
'rounded-full', 'rounded-full',
isDragging ? 'w-32' : 'w-16', isDragging ? 'w-16 sm:w-32' : 'w-12 sm:w-16',
)} )}
> >
</div> </div>
@@ -55,7 +55,7 @@ let { sliderPos, isDragging }: Props = $props();
<svg <svg
class={cn( class={cn(
'transition-all relative duration-500 text-black/80 drop-shadow-sm', 'transition-all relative duration-500 text-black/80 drop-shadow-sm',
isDragging ? 'w-12 h-12' : 'w-8 h-8', isDragging ? 'size-6 sm:size-12' : 'size-4 sm:size-8',
)} )}
viewBox="0 0 24 12" viewBox="0 0 24 12"
fill="none" fill="none"