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

Refactored Tabs Style

pull/5677/head
Cagatay Civici 2024-04-29 12:57:14 +03:00
parent 142524f06e
commit a40dab2bb3
5 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/tab/style/TabStyle.js
View File

@ -4,7 +4,7 @@ const classes = {
root: ({ instance, props }) => [ root: ({ instance, props }) => [
'p-tab', 'p-tab',
{ {
'p-active': instance.active, 'p-tab-active': instance.active,
'p-disabled': props.disabled 'p-disabled': props.disabled
} }
] ]

10
components/lib/tablist/style/TabListStyle.js
View File

@ -5,13 +5,13 @@ const classes = {
content: ({ instance }) => [ content: ({ instance }) => [
'p-tablist-content', 'p-tablist-content',
{ {
'p-tablist-scroller': instance.$pcTabs.scrollable 'p-tablist-viewport': instance.$pcTabs.scrollable
} }
], ],
tabs: 'p-tablist-tabs', tabs: 'p-tablist-tab-list',
inkbar: 'p-tablist-ink-bar', inkbar: 'p-tablist-active-bar',
previousButton: 'p-tablist-prev-button p-tablist-navigator', previousButton: 'p-tablist-prev-button',
nextButton: 'p-tablist-next-button p-tablist-navigator' nextButton: 'p-tablist-next-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

2
components/lib/tabpanel/style/TabPanelStyle.js
View File

@ -4,7 +4,7 @@ const classes = {
root: ({ instance }) => [ root: ({ instance }) => [
'p-tabpanel', 'p-tabpanel',
{ {
'p-active': instance.active 'p-tabpanel-active': instance.active
} }
] ]
}; };

3
components/lib/tabs/style/TabsStyle.js
View File

@ -4,8 +4,7 @@ const classes = {
root: ({ props }) => [ root: ({ props }) => [
'p-tabs p-component', 'p-tabs p-component',
{ {
'p-tabs-scrollable': props.scrollable, 'p-tabs-scrollable': props.scrollable
'p-tabs-vertical': props.orientation === 'vertical'
} }
] ]
}; };

21
components/lib/themes/primeone/base/tabs/index.js
View File

@ -13,7 +13,7 @@ export default {
overflow: hidden; overflow: hidden;
} }
.p-tablist-scroller { .p-tablist-viewport {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
@ -21,11 +21,11 @@ export default {
overscroll-behavior: contain auto; overscroll-behavior: contain auto;
} }
.p-tablist-scroller::-webkit-scrollbar { .p-tablist-viewport::-webkit-scrollbar {
display: none; display: none;
} }
.p-tablist-tabs { .p-tablist-tab-list {
position: relative; position: relative;
display: flex; display: flex;
background: ${dt('tabs.nav.background')}; background: ${dt('tabs.nav.background')};
@ -33,7 +33,8 @@ export default {
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
} }
.p-tablist-navigator { .p-tablist-prev-button,
.p-tablist-next-button {
all: unset; all: unset;
position: absolute; position: absolute;
top: 0; top: 0;
@ -50,12 +51,14 @@ export default {
cursor: pointer; cursor: pointer;
} }
.p-tablist-navigator:focus-visible { .p-tablist-prev-button:focus-visible,
.p-tablist-next-button:focus-visible {
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-tablist-navigator:hover { .p-tablist-prev-button:hover,
.p-tablist-next-button:hover {
color: ${dt('tabs.navigator.icon.hover.color')}; color: ${dt('tabs.navigator.icon.hover.color')};
} }
@ -90,11 +93,11 @@ export default {
outline-offset: -1px; outline-offset: -1px;
} }
.p-tab:not(.p-active):not(.p-disabled):hover { .p-tab:not(.p-tab-active):not(.p-disabled):hover {
color: ${dt('tabs.header.hover.color')}; color: ${dt('tabs.header.hover.color')};
} }
.p-tab.p-active { .p-tab-active {
color: ${dt('tabs.header.active.color')}; color: ${dt('tabs.header.active.color')};
} }
@ -104,7 +107,7 @@ export default {
padding: 0.875rem 1.125rem 1.125rem 1.125rem; padding: 0.875rem 1.125rem 1.125rem 1.125rem;
} }
.p-tablist-ink-bar { .p-tablist-active-bar {
z-index: 1; z-index: 1;
display: block; display: block;
position: absolute; position: absolute;