vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/dock/style/DockStyle.js
View File

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

4
components/lib/themes/primeone/base/dock/index.js
View File

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

8
doc/dock/AdvancedDoc.vue
View File

@ -21,7 +21,7 @@
<div class="dock-window dock-advanced"> <div class="dock-window dock-advanced">
<Dock :model="items"> <Dock :model="items">
<template #item="{ item }"> <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%" /> <img :alt="item.label" :src="item.icon" style="width: 100%" />
</a> </a>
</template> </template>
@ -246,7 +246,7 @@ export default {
basic: ` basic: `
<Dock :model="items"> <Dock :model="items">
<template #item="{ item }"> <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%" /> <img :alt="item.label" :src="item.icon" style="width: 100%" />
</a> </a>
</template> </template>
@ -273,7 +273,7 @@ export default {
<div class="dock-window dock-advanced"> <div class="dock-window dock-advanced">
<Dock :model="items"> <Dock :model="items">
<template #item="{ item }"> <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%" /> <img :alt="item.label" :src="item.icon" style="width: 100%" />
</a> </a>
</template> </template>
@ -578,7 +578,7 @@ export default {
<div class="dock-window dock-advanced"> <div class="dock-window dock-advanced">
<Dock :model="items"> <Dock :model="items">
<template #item="{ item }"> <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%" /> <img :alt="item.label" :src="item.icon" style="width: 100%" />
</a> </a>
</template> </template>