matei/zeroone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: Hover transitions

Browse Source
This commit is contained in:
Robert Kossessa
2024-02-04 01:28:22 +01:00
parent 0dda27b9bb
commit c47f55f51d
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/config/SteppedSlider.vue
View File

@@ -7,7 +7,7 @@
<div class="flex justify-between py-2">
<button
v-for="(position, index) in positions" :key="position"
class="min-w-0 text-nowrap"
class="min-w-0 text-nowrap group"
:class="{
'slider-start mr-4': index===0,
'slider-center': index > 0 && index < positions.length-1,
@@ -15,14 +15,14 @@
@click="value = position.value">
<span
v-if="index===0" class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600'" />
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
<span
v-if="position.label" class="text-xs font-mono uppercase mx-1 transition-colors"
:class="value===position.value ? 'text-zinc-100' : 'text-zinc-600'">{{ position.label }}</span>
:class="value===position.value ? 'text-zinc-100' : 'text-zinc-600 group-hover:text-zinc-500'">{{ position.label }}</span>
<span
v-if="!position.label || index === positions.length-1"
class="rounded-full w-2 h-1.5 inline-block mb-[1px] transition-colors"
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600'" />
:class="value===position.value ? 'bg-zinc-100' : 'bg-zinc-600 group-hover:bg-zinc-500'" />
</button>
</div>
</div>