Refactor #5437 - For Dock
parent
d5c372e928
commit
6ef3c4697a
|
@ -19,7 +19,7 @@
|
|||
<template v-for="(processedItem, index) of model" :key="index">
|
||||
<li
|
||||
:id="getItemId(index)"
|
||||
:class="cx('menuitem', { processedItem, index, id: getItemId(index) })"
|
||||
:class="cx('menuitem', { processedItem, id: getItemId(index) })"
|
||||
role="menuitem"
|
||||
:aria-label="processedItem.label"
|
||||
:aria-disabled="disabled(processedItem)"
|
||||
|
|
|
@ -10,16 +10,11 @@ const classes = {
|
|||
],
|
||||
container: 'p-dock-list-container',
|
||||
menu: 'p-dock-list',
|
||||
menuitem: ({ instance, processedItem, index, id }) => [
|
||||
menuitem: ({ instance, processedItem, id }) => [
|
||||
'p-dock-item',
|
||||
{
|
||||
'p-focus': instance.isItemActive(id),
|
||||
'p-disabled': instance.disabled(processedItem),
|
||||
'p-dock-item-second-prev': instance.currentIndex - 2 === index,
|
||||
'p-dock-item-prev': instance.currentIndex - 1 === index,
|
||||
'p-dock-item-current': instance.currentIndex === index,
|
||||
'p-dock-item-next': instance.currentIndex + 1 === index,
|
||||
'p-dock-item-second-next': instance.currentIndex + 2 === index
|
||||
'p-disabled': instance.disabled(processedItem)
|
||||
}
|
||||
],
|
||||
content: 'p-menuitem-content',
|
||||
|
|
|
@ -52,21 +52,6 @@ p-dock-item.p-focus {
|
|||
height: 3rem;
|
||||
}
|
||||
|
||||
.p-dock-item-second-prev,
|
||||
.p-dock-item-second-next {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.p-dock-item-prev,
|
||||
.p-dock-item-next {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
.p-dock-item-current {
|
||||
transform: scale(1.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-dock-top {
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
@ -115,38 +100,6 @@ p-dock-item.p-focus {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-dock-top .p-dock-item-second-prev,
|
||||
.p-dock-top .p-dock-item-second-next,
|
||||
.p-dock-bottom .p-dock-item-second-prev,
|
||||
.p-dock-bottom .p-dock-item-second-next {
|
||||
margin: 0 0.9rem;
|
||||
}
|
||||
.p-dock-top .p-dock-item-prev,
|
||||
.p-dock-top .p-dock-item-next,
|
||||
.p-dock-bottom .p-dock-item-prev,
|
||||
.p-dock-bottom .p-dock-item-next {
|
||||
margin: 0 1.3rem;
|
||||
}
|
||||
.p-dock-top .p-dock-item-current,
|
||||
.p-dock-bottom .p-dock-item-current {
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
.p-dock-left .p-dock-item-second-prev,
|
||||
.p-dock-left .p-dock-item-second-next,
|
||||
.p-dock-right .p-dock-item-second-prev,
|
||||
.p-dock-right .p-dock-item-second-next {
|
||||
margin: 0.9rem 0;
|
||||
}
|
||||
.p-dock-left .p-dock-item-prev,
|
||||
.p-dock-left .p-dock-item-next,
|
||||
.p-dock-right .p-dock-item-prev,
|
||||
.p-dock-right .p-dock-item-next {
|
||||
margin: 1.3rem 0;
|
||||
}
|
||||
.p-dock-left .p-dock-item-current,
|
||||
.p-dock-right .p-dock-item-current {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
.p-dock-mobile.p-dock-top .p-dock-list-container,
|
||||
.p-dock-mobile.p-dock-bottom .p-dock-list-container {
|
||||
overflow-x: auto;
|
||||
|
|
Loading…
Reference in New Issue