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

Override tab styles

pull/7044/head
Cagatay Civici 2025-01-02 12:24:53 +03:00
parent 6cf1886d66
commit 456a100cf1
1 changed files with 93 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
apps/showcase/components/layout/designer/editor/DesignEditor.vue
View File

@ -1,5 +1,5 @@
<template>
<Tabs v-model:value="$appState.designer.activeTab" :lazy="deferred">
<Tabs v-model:value="$appState.designer.activeTab" :lazy="deferred" :dt="tabsTokens">
<TabList>
<Tab value="0">Primitive</Tab>
<Tab value="1">Semantic</Tab>
@ -105,6 +105,98 @@ export default {
const directives = this.$appState.designer.theme.preset.directives;
return components[this.$route.name] != null || directives[this.$route.name];
},
tabsTokens() {
return {
root: {
transitionDuration: '0.2s'
},
tablist: {
borderWidth: '0 0 1px 0',
background: '{content.background}',
borderColor: '{content.border.color}'
},
tab: {
background: 'transparent',
hoverBackground: 'transparent',
activeBackground: 'transparent',
borderWidth: '0 0 1px 0',
padding: '1rem 1.125rem',
fontWeight: '600',
margin: '0 0 -1px 0',
gap: '0.5rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '-1px',
shadow: '{focus.ring.shadow}'
}
},
tabpanel: {
background: 'transparent',
color: 'inherit',
padding: '0.875rem 1.125rem 1.125rem 1.125rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: 'inset {focus.ring.shadow}'
}
},
navButton: {
background: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.color}',
width: '2.5rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '-1px',
shadow: '{focus.ring.shadow}'
}
},
activeBar: {
height: '1px',
bottom: '-1px'
},
colorScheme: {
light: {
tablist: {
borderColor: '{surface.200}'
},
tab: {
borderColor: '{surface.200}',
hoverBorderColor: '{surface.200}',
activeBorderColor: '#09090b',
color: '#71717a',
hoverColor: '#09090b',
activeColor: '#09090b'
},
activeBar: {
background: '#09090b'
}
},
dark: {
tablist: {
borderColor: '{surface.700}'
},
tab: {
borderColor: '{surface.700}',
hoverBorderColor: '{surface.700}',
activeBorderColor: '#ffffff',
color: '#a1a1aa',
hoverColor: '#ffffff',
activeColor: '#ffffff'
},
activeBar: {
background: '#ffffff'
}
}
}
};
}
}
};