arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 06:51:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Breadcrumb): improve links hover style

Browse Source
This commit is contained in:
Benjamin Canac
2024-05-17 11:52:24 +02:00
parent f1b9e27ff7
commit 9970f0ea6b
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/breadcrumb.ts
View File

@@ -33,7 +33,7 @@ export default {
active: false,
to: true,
class: {
item: 'hover:text-gray-900 dark:hover:text-white transition-colors'
item: 'hover:text-gray-700 dark:hover:text-gray-200 transition-colors'
}
}]
}

18
test/components/__snapshots__/Breadcrumb.spec.ts.snap
View File

@@ -3,7 +3,7 @@
exports[`Breadcrumb > renders with class correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0 w-48">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
@@ -16,7 +16,7 @@ exports[`Breadcrumb > renders with class correctly 1`] = `
exports[`Breadcrumb > renders with custom slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
@@ -29,7 +29,7 @@ exports[`Breadcrumb > renders with custom slot correctly 1`] = `
exports[`Breadcrumb > renders with item slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Item slot</a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">Item slot</a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75">Item slot</span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
@@ -42,7 +42,7 @@ exports[`Breadcrumb > renders with item slot correctly 1`] = `
exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Item label slot</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Item label slot</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Item label slot</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
@@ -55,7 +55,7 @@ exports[`Breadcrumb > renders with item-label slot correctly 1`] = `
exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">Item leading slot<span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75">Item leading slot<span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
@@ -68,7 +68,7 @@ exports[`Breadcrumb > renders with item-leading slot correctly 1`] = `
exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span>Item trailing slot</a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span>Item trailing slot</a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span>Item trailing slot</span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
@@ -81,7 +81,7 @@ exports[`Breadcrumb > renders with item-trailing slot correctly 1`] = `
exports[`Breadcrumb > renders with items correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:chevron-right-20-solid shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
@@ -94,7 +94,7 @@ exports[`Breadcrumb > renders with items correctly 1`] = `
exports[`Breadcrumb > renders with separator slot correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex">/</li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex">/</li>
@@ -107,7 +107,7 @@ exports[`Breadcrumb > renders with separator slot correctly 1`] = `
exports[`Breadcrumb > renders with separatorIcon correctly 1`] = `
"<div aria-label="breadcrumb" class="relative min-w-0">
<ol class="flex items-center gap-1.5">
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li class="flex min-w-0"><a href="/" class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span><span class="truncate">Home</span></a></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:minus shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>
<li class="flex min-w-0"><span class="group relative flex items-center gap-1.5 font-medium text-sm min-w-0 text-gray-500 dark:text-gray-400 cursor-not-allowed opacity-75"><span class="iconify i-heroicons:square-3-stack-3d shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Navigation</span></span></li>
<li role="presentation" class="flex"><span class="iconify i-heroicons:minus shrink-0 size-5 text-gray-500 dark:text-gray-400" aria-hidden="true"></span></li>