Refactored Dock Styles
parent
a66441355f
commit
ea27d3ee5c
|
@ -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({
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue