arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 11:47:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(VerticalNavigation): improve stacking context

Browse Source
This commit is contained in:
Benjamin Canac
2023-05-05 18:17:13 +02:00
parent 4665563e6f
commit 28ee9179f5
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/runtime/app.config.ts
View File

@@ -424,11 +424,12 @@ const container = {
// Navigation // Navigation
const verticalNavigation = { const verticalNavigation = {
wrapper: 'relative z-0', wrapper: 'relative',
base: 'group flex items-center gap-2 text-sm font-medium rounded-md w-full relative focus:outline-none after:absolute after:inset-px after:z-[-1] after:rounded-md disabled:cursor-not-allowed disabled:opacity-75', base: 'group flex items-center gap-2 text-sm font-medium rounded-md w-full relative focus:outline-none before:absolute before:inset-px before:rounded-md disabled:cursor-not-allowed disabled:opacity-75',
spacing: 'px-3 py-1.5', spacing: 'px-3 py-1.5',
active: 'u-text-gray-900 after:bg-gray-100 dark:after:bg-gray-800', active: 'u-text-gray-900 before:bg-gray-100 dark:before:bg-gray-800',
inactive: 'u-text-gray-500 hover:u-text-gray-900 hover:after:bg-gray-50 dark:hover:after:bg-gray-800/50 focus-visible:after:bg-gray-50 dark:focus-visible:after:bg-gray-800/50', inactive: 'u-text-gray-500 hover:u-text-gray-900 hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 focus-visible:before:bg-gray-50 dark:focus-visible:before:bg-gray-800/50',
label: 'truncate z-0',
icon: { icon: {
base: 'flex-shrink-0 w-4 h-4', base: 'flex-shrink-0 w-4 h-4',
active: 'u-text-gray-700', active: 'u-text-gray-700',

2
src/runtime/components/navigation/VerticalNavigation.vue
View File

@@ -26,7 +26,7 @@
/> />
</slot> </slot>
<slot :link="link"> <slot :link="link">
<span v-if="link.label" class="truncate">{{ link.label }}</span> <span v-if="link.label" :class="ui.label">{{ link.label }}</span>
</slot> </slot>
<slot name="badge" :link="link" :is-active="isActive"> <slot name="badge" :link="link" :is-active="isActive">
<span v-if="link.badge" :class="[ui.badge.baseClass, isActive ? ui.badge.active : ui.badge.inactive]"> <span v-if="link.badge" :class="[ui.badge.baseClass, isActive ? ui.badge.active : ui.badge.inactive]">