UPD: Selection outlines
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex font-heading">
|
<div class="flex font-heading px-4 py-2 gap-2">
|
||||||
<TabSelectButton
|
<TabSelectButton
|
||||||
v-for="(option, key) in options" :key="key"
|
v-for="(option, key) in options" :key="key"
|
||||||
:title="$t(option.titleKey)"
|
:title="$t(option.titleKey)"
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
class="flex-1 flex flex-col items-center rounded-xl my-1 mx-0.5 p-1 gap-2"
|
class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2"
|
||||||
:class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
|
:class="{'text-black bg-zinc-300 hover:bg-zinc-200 outline outline-zinc-100': selected,
|
||||||
'hover:bg-zinc-800 text-muted-foreground' : !selected}"
|
'hover:bg-zinc-800 text-muted-foreground' : !selected}"
|
||||||
@click="$emit('select'); $refs.title.scramble()">
|
@click="$emit('select'); $refs.title.scramble()">
|
||||||
<slot v-if="$slots['replace']" name="replace" />
|
<slot v-if="$slots['replace']" name="replace" />
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const emits = defineEmits(['update:modelValue', 'valueCommit'])
|
|||||||
<SliderRange class="absolute h-1.5 bg-primary rounded-full" />
|
<SliderRange class="absolute h-1.5 bg-primary rounded-full" />
|
||||||
</SliderTrack>
|
</SliderTrack>
|
||||||
<SliderThumb
|
<SliderThumb
|
||||||
class="flex h-6 w-8 rounded-[8px] border hover:bg-zinc-200 border-zinc-100 bg-zinc-300 transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
|
class="flex h-6 w-8 rounded-[8px] hover:bg-zinc-200 outline outline-zinc-100 bg-zinc-300 transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
|
||||||
style="box-shadow: 0 0 15px 0 rgba(0,0,0,0.5)">
|
style="box-shadow: 0 0 15px 0 rgba(0,0,0,0.5)">
|
||||||
<MoreHorizontal class="h-full" />
|
<MoreHorizontal class="h-full" />
|
||||||
</SliderThumb>
|
</SliderThumb>
|
||||||
|
|||||||
Reference in New Issue
Block a user