Fixed color issue in hover

pull/5806/head
Cagatay Civici 2024-05-30 11:57:44 +03:00
parent 993b3b9721
commit 6dc91b26cd
1 changed files with 8 additions and 8 deletions

View File

@ -5,8 +5,8 @@
<div class="card flex justify-center"> <div class="card flex justify-center">
<PanelMenu :model="items" class="w-full md:w-80"> <PanelMenu :model="items" class="w-full md:w-80">
<template #item="{ item }"> <template #item="{ item }">
<a v-ripple class="flex items-center px-4 py-2 cursor-pointer"> <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
<span :class="[item.icon, 'text-primary']" /> <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span> <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
@ -88,8 +88,8 @@ export default {
basic: ` basic: `
<PanelMenu :model="items"> <PanelMenu :model="items">
<template #item="{ item }"> <template #item="{ item }">
<a v-ripple class="flex items-center px-4 py-2 cursor-pointer"> <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
<span :class="[item.icon, 'text-primary']" /> <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span> <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
@ -102,8 +102,8 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<PanelMenu :model="items" class="w-full md:w-80"> <PanelMenu :model="items" class="w-full md:w-80">
<template #item="{ item }"> <template #item="{ item }">
<a v-ripple class="flex items-center px-4 py-2 cursor-pointer"> <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
<span :class="[item.icon, 'text-primary']" /> <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span> <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
@ -190,8 +190,8 @@ export default {
<div class="card flex justify-center"> <div class="card flex justify-center">
<PanelMenu :model="items" class="w-full md:w-80"> <PanelMenu :model="items" class="w-full md:w-80">
<template #item="{ item }"> <template #item="{ item }">
<a v-ripple class="flex items-center px-4 py-2 cursor-pointer"> <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
<span :class="[item.icon, 'text-primary']" /> <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
<span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span> <span :class="['ml-2', { 'font-semibold': item.items }]">{{ item.label }}</span>
<Badge v-if="item.badge" class="ml-auto" :value="item.badge" /> <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
<span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span> <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>