feat: mise à jour des composants de l'interface utilisateur pour uniformiser la hauteur minimale, amélioration de la structure des classes CSS dans Divider, Toolbar, ToolbarButton, ToolbarDropdown et ToolbarLabel.
This commit is contained in:
parent
68fed587be
commit
c813368e2b
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="h-full mx-4 border-r opacity-50 border-green-500"></div>
|
||||
<div class="min-h-14 mx-4 border-r opacity-50 border-green-500"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="['bg-gray-800 h-[4.5rem] p-3', $attrs.class]">
|
||||
<div :class="['bg-gray-800 min-h-14 p-3', $attrs.class]">
|
||||
<div class="flex flex-row items-center justify-between h-full">
|
||||
<!-- Left section -->
|
||||
<ToolbarSection :items="config.leftSection" />
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<button
|
||||
@click="$emit('click')"
|
||||
:class="[
|
||||
'flex flex-col items-center justify-around h-full w-min p-1 rounded group text-white',
|
||||
'flex flex-col items-center justify-around min-h-14 w-min ml-4 rounded group text-white',
|
||||
active
|
||||
? 'text-green-500' // Style actif
|
||||
: 'hover:text-green-500' // Effet de survol
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="h-full">
|
||||
<MenuButton
|
||||
:class="[
|
||||
'flex flex-col items-center justify-around h-full w-min p-1 rounded group text-white hover:text-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
|
||||
'flex flex-col items-center justify-around min-h-14 w-min ml-4 rounded group text-white hover:text-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75',
|
||||
active ? 'text-green-500' : ''
|
||||
]"
|
||||
:aria-label="label || 'Options'">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<span v-if="label" class="text-xs line-clamp-2 max-w-fit px-1 text-center min-h-[2rem]">{{ label }}</span>
|
||||
<span v-if="label" class="text-xs">{{ label }}</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
Reference in New Issue
Block a user