diff --git a/components/lib/tabmenu/TabMenu.d.ts b/components/lib/tabmenu/TabMenu.d.ts
index 598d08aff..bf3a44c55 100755
--- a/components/lib/tabmenu/TabMenu.d.ts
+++ b/components/lib/tabmenu/TabMenu.d.ts
@@ -81,7 +81,7 @@ export interface TabMenuPassThroughOptions {
/**
* Used to pass attributes to the inkbar's DOM element.
*/
- inkbar?: TabMenuPassThroughOptionType;
+ activeBar?: TabMenuPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index f371ca566..2933bb62d 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -23,7 +23,7 @@
-
+
diff --git a/components/lib/tabmenu/style/TabMenuStyle.js b/components/lib/tabmenu/style/TabMenuStyle.js
index 29d96d38e..d2bc556ac 100644
--- a/components/lib/tabmenu/style/TabMenuStyle.js
+++ b/components/lib/tabmenu/style/TabMenuStyle.js
@@ -10,10 +10,10 @@ const theme = ({ dt }) => `
margin: 0;
padding: 0;
list-style-type: none;
- flex: 1 1 auto;
background: ${dt('tabmenu.tablist.background')};
- border: 1px solid ${dt('tabmenu.tablist.border.color')};
- border-width: 0 0 1px 0;
+ border-style: solid;
+ border-color: ${dt('tabmenu.tablist.border.color')};
+ border-width: ${dt('tabmenu.tablist.border.width')};
position: relative;
}
@@ -25,46 +25,63 @@ const theme = ({ dt }) => `
text-decoration: none;
position: relative;
overflow: hidden;
+ background: ${dt('tabmenu.item.background')};
border-style: solid;
- border-width: 0 0 1px 0;
- border-color: transparent transparent ${dt('tabmenu.item.link.border.color')} transparent;
- color: ${dt('tabmenu.item.link.color')};
- padding: 1rem 1.125rem;
- font-weight: 600;
- border-top-right-radius: ${dt('border.radius.md')};
- border-top-left-radius: ${dt('border.radius.md')};
- transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
- margin: 0 0 -1px 0;
+ border-width: ${dt('tabmenu.item.border.width')};
+ border-color: ${dt('tabmenu.item.border.color')};
+ color: ${dt('tabmenu.item.color')};
+ padding: ${dt('tabmenu.item.padding')};
+ font-weight: ${dt('tabmenu.item.font.weight')};
+ border-top-right-radius: ${dt('tabmenu.item.border.radius')};
+ border-top-left-radius: ${dt('tabmenu.item.border.radius')};
+ transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
+ margin: ${dt('tabmenu.item.margin')};
outline-color: transparent;
+ gap: ${dt('tabmenu.item.gap')};
}
.p-tabmenu-item-link:focus-visible {
- outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
- outline-offset: -1px;
+ box-shadow: ${dt('tabmenu.item.focus.ring.shadow')};
+ outline: ${dt('tabmenu.item.focus.ring.width')} ${dt('tabmenu.item.focus.ring.style')} ${dt('tabmenu.item.focus.ring.color')};
+ outline-offset: ${dt('tabmenu.item.focus.ring.offset')};
}
.p-tabmenu-item-icon {
- margin-right: 0.5rem;
+ color: ${dt('tabmenu.item.icon.color')};
+ transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
}
.p-tabmenu-item-label {
line-height: 1;
}
+
.p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-link {
- color: ${dt('tabmenu.item.link.hover.color')};
+ background: ${dt('tabmenu.item.hover.background')};
+ border-color: ${dt('tabmenu.item.hover.border.color')};
+ color: ${dt('tabmenu.item.hover.color')};
+}
+
+.p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-icon {
+ color: ${dt('tabmenu.item.icon.hover.color')};
}
.p-tabmenu-item-active .p-tabmenu-item-link {
- color: ${dt('tabmenu.item.link.active.border.color')};
+ background: ${dt('tabmenu.item.active.background')};
+ border-color: ${dt('tabmenu.item.active.border.color')};
+ color: ${dt('tabmenu.item.active.color')};
}
-.p-tabmenu-ink-bar {
+.p-tabmenu-item-active .p-tabmenu-item-icon {
+ color: ${dt('tabmenu.item.icon.active.color')};
+}
+
+.p-tabmenu-active-bar {
z-index: 1;
display: block;
position: absolute;
- bottom: -1px;
- height: 1px;
- background-color: ${dt('tabmenu.item.link.active.border.color')};
+ bottom: ${dt('tabmenu.active.bar.bottom')};
+ height: ${dt('tabmenu.active.bar.height')};
+ background: ${dt('tabmenu.active.bar.background')};
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
@@ -86,7 +103,7 @@ const classes = {
itemLink: 'p-tabmenu-item-link',
itemIcon: 'p-tabmenu-item-icon',
itemLabel: 'p-tabmenu-item-label',
- inkbar: 'p-tabmenu-ink-bar'
+ activeBar: 'p-tabmenu-active-bar'
};
export default BaseStyle.extend({
diff --git a/components/lib/themes/aura/tabmenu/index.js b/components/lib/themes/aura/tabmenu/index.js
index 229336322..0879c0b25 100644
--- a/components/lib/themes/aura/tabmenu/index.js
+++ b/components/lib/themes/aura/tabmenu/index.js
@@ -1,12 +1,41 @@
export default {
tablist: {
+ borderWidth: '0 0 1px 0',
background: '{content.background}',
borderColor: '{content.border.color}'
},
- itemLink: {
+ item: {
+ background: 'transparent',
+ hoverBackground: 'transparent',
+ activeBackground: 'transparent',
+ borderWidth: '0 0 1px 0',
borderColor: '{content.border.color}',
+ hoverBorderColor: '{content.border.color}',
activeBorderColor: '{primary.color}',
color: '{text.muted.color}',
- hoverColor: '{text.color}'
+ hoverColor: '{text.color}',
+ activeColor: '{primary.color}',
+ padding: '1rem 1.125rem',
+ fontWeight: '600',
+ borderRadius: '{content.border.radius}',
+ margin: '0 0 -1px 0',
+ gap: '0.5rem',
+ focusRing: {
+ width: '{focus.ring.width}',
+ style: '{focus.ring.style}',
+ color: '{focus.ring.color}',
+ offset: '{focus.ring.offset}',
+ shadow: '{focus.ring.shadow}'
+ }
+ },
+ itemIcon: {
+ color: '{text.muted.color}',
+ hoverColor: '{text.color}',
+ activeColor: '{primary.color}'
+ },
+ activeBar: {
+ height: '1px',
+ bottom: '-1px',
+ background: '{primary.color}'
}
};
diff --git a/components/lib/themes/lara/tabmenu/index.js b/components/lib/themes/lara/tabmenu/index.js
index 229336322..b52c02775 100644
--- a/components/lib/themes/lara/tabmenu/index.js
+++ b/components/lib/themes/lara/tabmenu/index.js
@@ -1,12 +1,54 @@
export default {
tablist: {
+ borderWidth: '0',
background: '{content.background}',
borderColor: '{content.border.color}'
},
- itemLink: {
- borderColor: '{content.border.color}',
+ item: {
+ borderWidth: '2px 0 0 0',
+ borderColor: 'transparent',
+ hoverBorderColor: 'transparent',
activeBorderColor: '{primary.color}',
color: '{text.muted.color}',
- hoverColor: '{text.color}'
+ hoverColor: '{text.color}',
+ activeColor: '{primary.color}',
+ padding: '1rem 1.25rem',
+ fontWeight: '600',
+ borderRadius: '0',
+ margin: '0',
+ gap: '0.5rem',
+ focusRing: {
+ width: '{focus.ring.width}',
+ style: '{focus.ring.style}',
+ color: '{focus.ring.color}',
+ offset: '{focus.ring.offset}',
+ shadow: '{focus.ring.shadow}'
+ }
+ },
+ itemIcon: {
+ color: '{text.muted.color}',
+ hoverColor: '{text.color}',
+ activeColor: '{primary.color}'
+ },
+ activeBar: {
+ height: '0',
+ bottom: '0',
+ background: 'transparent'
+ },
+ colorScheme: {
+ light: {
+ item: {
+ background: '{surface.100}',
+ hoverBackground: '{surface.100}',
+ activeBackground: '{surface.0}'
+ }
+ },
+ dark: {
+ item: {
+ background: '{surface.800}',
+ hoverBackground: '{surface.800}',
+ activeBackground: '{surface.900}'
+ }
+ }
}
};