UPD: Selection outlines

This commit is contained in:
Robert Kossessa
2024-02-03 16:42:35 +01:00
parent 368906d9f7
commit 7624e2045f
3 changed files with 4 additions and 4 deletions

View File

@@ -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)"

View File

@@ -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" />

View File

@@ -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>