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}' + } + } } };