UPD: TabSelect look

This commit is contained in:
Robert Kossessa
2024-02-05 01:37:59 +01:00
parent 60abf89d82
commit 2bf95e85f1
3 changed files with 7 additions and 11 deletions

View File

@@ -1,10 +1,6 @@
<template>
<div class="relative">
<div
:style="backgroundStyle"
:class="{'hidden': !showBackground}"
class="absolute bg-zinc-300 outline outline-zinc-100 rounded-xl transition-all duration-75 ease-out" />
<div class="flex font-heading px-4 py-2 gap-2 relative">
<div class="p-2 border-solid border-0 border-b">
<div class="flex bg-zinc-900 rounded-xl overflow-hidden border border-zinc-800">
<TabSelectButton
v-for="(option, key) in options" :key="key"
:ref="(el) => buttons[key] = el"

View File

@@ -1,8 +1,8 @@
<template>
<button
class="flex-1 flex flex-col items-center rounded-xl p-1 gap-2 transition-all"
:class="{'text-black bg-zinc-300 outline outline-zinc-100 hover:bg-zinc-200': selected,
'hover:bg-zinc-800 text-muted-foreground' : !selected}"
class="flex-1 flex flex-col items-center p-2 gap-2 font-heading transition-all"
:class="{'text-black bg-zinc-300 hover:bg-zinc-200': selected,
'hover:bg-zinc-800 text-muted-foreground' : !selected}"
@click="$emit('select'); $refs.title.scramble()">
<slot v-if="$slots['replace']" name="replace" />
<template v-else>

View File

@@ -1,10 +1,10 @@
<template>
<div>
<div v-if="showTabs" class="p-2 border-solid border-0 border-b">
<div class="flex bg-zinc-900 rounded-xl overflow-hidden">
<div class="flex bg-zinc-900 rounded-xl overflow-hidden border border-zinc-800">
<button
v-for="(option, key) in store.currentConfigPages" :key="key"
class="flex-1 h-12 items-center text-center px-3 font-heading"
class="flex-1 h-12 items-center text-center px-3 font-heading transition-all"
:class="{'text-black bg-zinc-300 hover:bg-zinc-200': key===store.currentConfigPage,
'hover:bg-zinc-800 text-muted-foreground' : key!==store.currentConfigPage}"
@click="store.setCurrentConfigPage(key)">