Refactored Dock Styles

pull/5677/head
Cagatay Civici 2024-04-09 16:26:23 +03:00
parent a66441355f
commit ea27d3ee5c
3 changed files with 9 additions and 9 deletions

View File

@ -17,9 +17,9 @@ const classes = {
'p-disabled': instance.disabled(processedItem)
}
],
content: 'p-menuitem-content',
action: 'p-dock-link',
icon: 'p-dock-icon'
content: 'p-dock-item-content',
action: 'p-dock-item-link',
icon: 'p-dock-item-icon'
};
export default BaseStyle.extend({

View File

@ -35,12 +35,12 @@ export default {
border-radius: 6px;
}
p-dock-item.p-focus {
.p-dock-item.p-focus {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-dock-link {
.p-dock-item-link {
display: flex;
flex-direction: column;
align-items: center;

View File

@ -21,7 +21,7 @@
<div class="dock-window dock-advanced">
<Dock :model="items">
<template #item="{ item }">
<a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
<a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>
@ -246,7 +246,7 @@ export default {
basic: `
<Dock :model="items">
<template #item="{ item }">
<a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
<a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>
@ -273,7 +273,7 @@ export default {
<div class="dock-window dock-advanced">
<Dock :model="items">
<template #item="{ item }">
<a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
<a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>
@ -578,7 +578,7 @@ export default {
<div class="dock-window dock-advanced">
<Dock :model="items">
<template #item="{ item }">
<a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
<a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>