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

Theme: Divider, Fieldset, ScrollPanel, Splitter and TabView

pull/5507/head
mertsincan 2024-01-08 17:50:06 +00:00
parent 2fed78692c
commit 870e0e35ab
24 changed files with 654 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/divider/style/DividerStyle.js
View File

@ -90,7 +90,7 @@ const classes = {
export default BaseStyle.extend({
name: 'divider',
css,
//css,
classes,
inlineStyles
});

2
components/lib/fieldset/style/FieldsetStyle.js
View File

@ -39,6 +39,6 @@ const classes = {
export default BaseStyle.extend({
name: 'fieldset',
css,
//css,
classes
});

2
components/lib/scrollpanel/style/ScrollPanelStyle.js
View File

@ -70,6 +70,6 @@ const classes = {
export default BaseStyle.extend({
name: 'scrollpanel',
css,
//css,
classes
});

2
components/lib/splitter/style/SplitterStyle.js
View File

@ -62,7 +62,7 @@ const inlineStyles = {
export default BaseStyle.extend({
name: 'splitter',
css,
//css,
classes,
inlineStyles
});

2
components/lib/tabview/style/TabViewStyle.js
View File

@ -105,6 +105,6 @@ const classes = {
export default BaseStyle.extend({
name: 'tabview',
css,
//css,
classes
});

31
components/lib/theme/lara/divider/index.d.ts vendored Normal file
View File

@ -0,0 +1,31 @@
interface PanelThemeVariables {
panelHeaderBorder?: string | undefined;
panelHeaderPadding?: string | undefined;
panelHeaderBg?: string | undefined;
panelHeaderTextColor?: string | undefined;
panelHeaderFontWeight?: string | undefined;
panelHeaderIconWidth?: string | undefined;
panelHeaderIconHeight?: string | undefined;
panelHeaderIconColor?: string | undefined;
panelHeaderIconBorder?: string | undefined;
panelHeaderIconBg?: string | undefined;
panelHeaderIconBorderRadius?: string | undefined;
panelHeaderIconTransition?: string | undefined;
panelHeaderIconHoverColor?: string | undefined;
panelHeaderIconHoverBorderColor?: string | undefined;
panelHeaderIconHoverBg?: string | undefined;
panelHeaderIconFocusOutline?: string | undefined;
panelHeaderIconFocusOutlineOffset?: string | undefined;
panelHeaderIconFocusShadow?: string | undefined;
panelToggleableHeaderPadding?: string | undefined;
panelContentPadding?: string | undefined;
panelContentBorder?: string | undefined;
panelContentBg?: string | undefined;
panelContentTextColor?: string | undefined;
panelContentBorderTop?: string | undefined;
panelFooterPadding?: string | undefined;
panelFooterBorder?: string | undefined;
panelFooterBg?: string | undefined;
panelFooterTextColor?: string | undefined;
panelFooterBorderTop?: string | undefined;
}

71
components/lib/theme/lara/divider/index.js Normal file
View File

@ -0,0 +1,71 @@
export default {
variables: {
common: {},
light: {},
dark: {}
},
css: `
.p-divider-horizontal {
display: flex;
width: 100%;
position: relative;
align-items: center;
margin: var(--p-divider-horizontal-margin);
padding: var(--p-divider-horizontal-padding);
}
.p-divider-horizontal:before {
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
content: "";
border-top: var(--p-divider-size) var(--p-divider-color);
}
.p-divider-content {
z-index: 1;
background-color: var(--p-panel-content-bg);
}
.p-divider-vertical {
min-height: 100%;
margin: var(--p-divider-vertical-margin);
display: flex;
position: relative;
justify-content: center;
padding: var(--p-divider-vertical-padding);
}
.p-divider-vertical:before {
position: absolute;
display: block;
top: 0;
left: 50%;
height: 100%;
content: "";
border-left: var(--p-divider-size) var(--p-divider-color);
}
.p-divider-solid.p-divider-horizontal:before {
border-top-style: solid;
}
.p-divider-solid.p-divider-vertical:before {
border-left-style: solid;
}
.p-divider-dashed.p-divider-horizontal:before {
border-top-style: dashed;
}
.p-divider-dashed.p-divider-vertical:before {
border-left-style: dashed;
}
.p-divider-dotted.p-divider-horizontal:before {
border-top-style: dotted;
}
.p-divider-dotted.p-divider-vertical:before {
border-left-style: dotted;
}
.p-divider-horizontal .p-divider-content {
padding: 0 var(--p-inline-spacing);
}
.p-divider-vertical .p-divider-content {
padding: var(--p-inline-spacing) 0;
}
`
};

6
components/lib/theme/lara/divider/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

31
components/lib/theme/lara/fieldset/index.d.ts vendored Normal file
View File

@ -0,0 +1,31 @@
interface PanelThemeVariables {
panelHeaderBorder?: string | undefined;
panelHeaderPadding?: string | undefined;
panelHeaderBg?: string | undefined;
panelHeaderTextColor?: string | undefined;
panelHeaderFontWeight?: string | undefined;
panelHeaderIconWidth?: string | undefined;
panelHeaderIconHeight?: string | undefined;
panelHeaderIconColor?: string | undefined;
panelHeaderIconBorder?: string | undefined;
panelHeaderIconBg?: string | undefined;
panelHeaderIconBorderRadius?: string | undefined;
panelHeaderIconTransition?: string | undefined;
panelHeaderIconHoverColor?: string | undefined;
panelHeaderIconHoverBorderColor?: string | undefined;
panelHeaderIconHoverBg?: string | undefined;
panelHeaderIconFocusOutline?: string | undefined;
panelHeaderIconFocusOutlineOffset?: string | undefined;
panelHeaderIconFocusShadow?: string | undefined;
panelToggleableHeaderPadding?: string | undefined;
panelContentPadding?: string | undefined;
panelContentBorder?: string | undefined;
panelContentBg?: string | undefined;
panelContentTextColor?: string | undefined;
panelContentBorderTop?: string | undefined;
panelFooterPadding?: string | undefined;
panelFooterBorder?: string | undefined;
panelFooterBg?: string | undefined;
panelFooterTextColor?: string | undefined;
panelFooterBorderTop?: string | undefined;
}

66
components/lib/theme/lara/fieldset/index.js Normal file
View File

@ -0,0 +1,66 @@
export default {
variables: {
common: {},
light: {},
dark: {}
},
css: `
.p-fieldset-legend > a,
.p-fieldset-legend > span {
display: flex;
align-items: center;
justify-content: center;
}
.p-fieldset-toggleable .p-fieldset-legend a {
cursor: pointer;
user-select: none;
overflow: hidden;
position: relative;
text-decoration: none;
padding: var(--p-panel-header-padding);
color: var(--p-panel-header-text-color);
border-radius: var(--p-border-radius);
transition: var(--p-list-item-transition);
}
.p-fieldset-legend-text {
line-height: 1;
}
.p-fieldset {
border: var(--p-panel-content-border);
background: var(--p-panel-content-bg);
color: var(--p-panel-content-text-color);
border-radius: var(--p-border-radius);
}
.p-fieldset-legend {
padding: var(--p-panel-header-padding);
border: var(--p-panel-header-border);
color: var(--p-panel-header-text-color);
background: var(--p-panel-header-bg);
font-weight: var(--p-panel-header-font-weight);
border-radius: var(--p-border-radius);
}
.p-fieldset-content {
padding: var(--p-panel-content-padding);
}
.p-fieldset-toggleable .p-fieldset-legend {
padding: 0;
transition: var(--p-action-icon-transition);
}
.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
margin-right: var(--p-inline-spacing);
}
.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
outline: var(--p-focus-outline);
outline-offset: var(--p-focus-outline-offset);
box-shadow: var(--p-focus-shadow);
}
.p-fieldset-toggleable .p-fieldset-legend a:hover {
color: var(--p-panel-header-text-hover-color);
}
.p-fieldset-toggleable .p-fieldset-legend:hover {
background: var(--p-panel-header-hover-bg);
border-color: var(--p-panel-header-hover-border-color);
color: var(--p-panel-header-text-hover-color);
}
`
};

6
components/lib/theme/lara/fieldset/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

31
components/lib/theme/lara/scrollpanel/index.d.ts vendored Normal file
View File

@ -0,0 +1,31 @@
interface PanelThemeVariables {
panelHeaderBorder?: string | undefined;
panelHeaderPadding?: string | undefined;
panelHeaderBg?: string | undefined;
panelHeaderTextColor?: string | undefined;
panelHeaderFontWeight?: string | undefined;
panelHeaderIconWidth?: string | undefined;
panelHeaderIconHeight?: string | undefined;
panelHeaderIconColor?: string | undefined;
panelHeaderIconBorder?: string | undefined;
panelHeaderIconBg?: string | undefined;
panelHeaderIconBorderRadius?: string | undefined;
panelHeaderIconTransition?: string | undefined;
panelHeaderIconHoverColor?: string | undefined;
panelHeaderIconHoverBorderColor?: string | undefined;
panelHeaderIconHoverBg?: string | undefined;
panelHeaderIconFocusOutline?: string | undefined;
panelHeaderIconFocusOutlineOffset?: string | undefined;
panelHeaderIconFocusShadow?: string | undefined;
panelToggleableHeaderPadding?: string | undefined;
panelContentPadding?: string | undefined;
panelContentBorder?: string | undefined;
panelContentBg?: string | undefined;
panelContentTextColor?: string | undefined;
panelContentBorderTop?: string | undefined;
panelFooterPadding?: string | undefined;
panelFooterBorder?: string | undefined;
panelFooterBg?: string | undefined;
panelFooterTextColor?: string | undefined;
panelFooterBorderTop?: string | undefined;
}

64
components/lib/theme/lara/scrollpanel/index.js Normal file
View File

@ -0,0 +1,64 @@
export default {
variables: {
common: {},
light: {},
dark: {}
},
css: `
.p-scrollpanel-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
}
.p-scrollpanel-content {
height: calc(100% + 18px);
width: calc(100% + 18px);
padding: 0 18px 18px 0;
position: relative;
overflow: auto;
box-sizing: border-box;
scrollbar-width: none;
}
.p-scrollpanel-content::-webkit-scrollbar {
display: none;
}
.p-scrollpanel-bar {
position: relative;
background: var(--p-scroll-panel-track-bg);
border-radius: 3px;
z-index: 2;
cursor: pointer;
opacity: 0;
transition: var(--p-form-element-transition);
border: var(--p-scroll-panel-track-border);
}
.p-scrollpanel-bar-y {
width: 9px;
top: 0;
}
.p-scrollpanel-bar-x {
height: 9px;
bottom: 0;
}
.p-scrollpanel-hidden {
visibility: hidden;
}
.p-scrollpanel:active .p-scrollpanel-bar,
.p-scrollpanel:hover .p-scrollpanel-bar {
opacity: 1;
}
.p-scrollpanel-grabbed {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.p-scrollpanel-bar:focus-visible {
outline: var(--p-focus-outline);
outline-offset: var(--p-focus-outline-offset);
box-shadow: var(--p-focus-shadow);
}
`
};

6
components/lib/theme/lara/scrollpanel/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

31
components/lib/theme/lara/splitter/index.d.ts vendored Normal file
View File

@ -0,0 +1,31 @@
interface PanelThemeVariables {
panelHeaderBorder?: string | undefined;
panelHeaderPadding?: string | undefined;
panelHeaderBg?: string | undefined;
panelHeaderTextColor?: string | undefined;
panelHeaderFontWeight?: string | undefined;
panelHeaderIconWidth?: string | undefined;
panelHeaderIconHeight?: string | undefined;
panelHeaderIconColor?: string | undefined;
panelHeaderIconBorder?: string | undefined;
panelHeaderIconBg?: string | undefined;
panelHeaderIconBorderRadius?: string | undefined;
panelHeaderIconTransition?: string | undefined;
panelHeaderIconHoverColor?: string | undefined;
panelHeaderIconHoverBorderColor?: string | undefined;
panelHeaderIconHoverBg?: string | undefined;
panelHeaderIconFocusOutline?: string | undefined;
panelHeaderIconFocusOutlineOffset?: string | undefined;
panelHeaderIconFocusShadow?: string | undefined;
panelToggleableHeaderPadding?: string | undefined;
panelContentPadding?: string | undefined;
panelContentBorder?: string | undefined;
panelContentBg?: string | undefined;
panelContentTextColor?: string | undefined;
panelContentBorderTop?: string | undefined;
panelFooterPadding?: string | undefined;
panelFooterBorder?: string | undefined;
panelFooterBg?: string | undefined;
panelFooterTextColor?: string | undefined;
panelFooterBorderTop?: string | undefined;
}

68
components/lib/theme/lara/splitter/index.js Normal file
View File

@ -0,0 +1,68 @@
export default {
variables: {
common: {},
light: {},
dark: {}
},
css: `
.p-splitter {
display: flex;
flex-wrap: nowrap;
border: var(--p-panel-content-border);
background: var(--p-panel-content-bg);
border-radius: var(--p-border-radius);
color: var(--p-panel-content-text-color);
}
.p-splitter-vertical {
flex-direction: column;
}
.p-splitter-gutter {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: col-resize;
transition: var(--p-action-icon-transition);
background: var(--p-splitter-gutter-bg);
}
.p-splitter-horizontal.p-splitter-resizing {
cursor: col-resize;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
height: 24px;
width: 100%;
}
.p-splitter-horizontal > .p-splitter-gutter {
cursor: col-resize;
}
.p-splitter-vertical.p-splitter-resizing {
cursor: row-resize;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.p-splitter-vertical > .p-splitter-gutter {
cursor: row-resize;
}
.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
width: 24px;
height: 100%;
}
.p-splitter-gutter-handle {
background: var(--p-splitter-gutter-handle-bg);
transition: var(--p-form-element-transition);
}
.p-splitter-gutter-handle:focus-visible {
outline: var(--p-focus-outline);
outline-offset: var(--p-focus-outline-offset);
box-shadow: var(--p-focus-shadow);
}
.p-splitter-gutter-resizing {
background: var(--p-splitter-gutter-handle-bg);
}
`
};

6
components/lib/theme/lara/splitter/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

31
components/lib/theme/lara/tabview/index.d.ts vendored Normal file
View File

@ -0,0 +1,31 @@
interface PanelThemeVariables {
panelHeaderBorder?: string | undefined;
panelHeaderPadding?: string | undefined;
panelHeaderBg?: string | undefined;
panelHeaderTextColor?: string | undefined;
panelHeaderFontWeight?: string | undefined;
panelHeaderIconWidth?: string | undefined;
panelHeaderIconHeight?: string | undefined;
panelHeaderIconColor?: string | undefined;
panelHeaderIconBorder?: string | undefined;
panelHeaderIconBg?: string | undefined;
panelHeaderIconBorderRadius?: string | undefined;
panelHeaderIconTransition?: string | undefined;
panelHeaderIconHoverColor?: string | undefined;
panelHeaderIconHoverBorderColor?: string | undefined;
panelHeaderIconHoverBg?: string | undefined;
panelHeaderIconFocusOutline?: string | undefined;
panelHeaderIconFocusOutlineOffset?: string | undefined;
panelHeaderIconFocusShadow?: string | undefined;
panelToggleableHeaderPadding?: string | undefined;
panelContentPadding?: string | undefined;
panelContentBorder?: string | undefined;
panelContentBg?: string | undefined;
panelContentTextColor?: string | undefined;
panelContentBorderTop?: string | undefined;
panelFooterPadding?: string | undefined;
panelFooterBorder?: string | undefined;
panelFooterBg?: string | undefined;
panelFooterTextColor?: string | undefined;
panelFooterBorderTop?: string | undefined;
}

127
components/lib/theme/lara/tabview/index.js Normal file
View File

@ -0,0 +1,127 @@
export default {
variables: {
common: {},
light: {},
dark: {}
},
css: `
.p-tabview-nav-container {
position: relative;
}
.p-tabview-scrollable .p-tabview-nav-container {
overflow: hidden;
}
.p-tabview-nav-content {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior: contain auto;
}
.p-tabview-nav {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex: 1 1 auto;
background: var(--p-tabview-nav-bg);
border: var(--p-tabview-nav-border);
border-width: var(--p-tabview-nav-border-width);
}
.p-tabview-header-action {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
display: flex;
align-items: center;
position: relative;
text-decoration: none;
overflow: hidden;
}
.p-tabview-ink-bar {
display: none;
z-index: 1;
}
.p-tabview-header-action:focus {
z-index: 1;
}
.p-tabview-title {
line-height: 1;
white-space: nowrap;
}
.p-tabview-nav-btn {
position: absolute;
top: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.p-tabview-nav-prev {
left: 0;
}
.p-tabview-nav-next {
right: 0;
}
.p-tabview-nav-content::-webkit-scrollbar {
display: none;
}
.p-tabview-nav li {
margin-right: var(--p-tabview-header-spacing);
}
.p-tabview-nav-link {
border: var(--p-tabview-header-border);
border-width: var(--p-tabview-header-border-width);
border-color: var(--p-tabview-header-border-color);
background: var(--p-tabview-header-bg);
color: var(--p-tabview-header-text-color);
padding: var(--p-tabview-header-padding);
font-weight: var(--p-tabview-header-font-weight);
border-top-right-radius: var(--p-border-radius);
border-top-left-radius: var(--p-border-radius);
transition:
background-color 0.2s,
border-color 0.2s,
box-shadow 0.2s;
margin: var(--p-tabview-header-margin);
}
.p-tabview-nav-link:not(.p-disabled):focus-visible {
outline: var(--p-focus-outline);
outline-offset: var(--p-focus-outline-offset);
box-shadow: inset var(--p-focus-shadow);
}
.p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: var(--p-tabview-header-hover-bg);
border-color: var(--p-tabview-header-hover-border-color);
color: var(--p-tabview-header-text-hover-color);
}
.p-tabview-nav li.p-highlight .p-tabview-nav-link {
border-color: var(--p-tabview-header-active-border-color);
}
.p-tabview-nav li.p-highlight .p-tabview-nav-link,
.p-tabview-nav-btn.p-link {
background: var(--p-tabview-header-active-bg);
color: var(--p-tabview-header-text-active-color);
}
.p-tabview-nav-btn.p-link {
width: var(--p-button-icon-only-width);
box-shadow: var(--p-raised-button-shadow);
border-radius: 0;
}
.p-tabview-nav-btn.p-link:focus-visible {
outline: var(--p-focus-outline);
outline-offset: var(--p-focus-outline-offset);
box-shadow: inset var(--p-focus-shadow);
}
.p-tabview-panels {
background: var(--p-tabview-content-bg);
padding: var(--p-tabview-content-padding);
border: var(--p-tabview-content-border);
color: var(--p-tabview-content-text-color);
border-bottom-right-radius: var(--p-border-radius);
border-bottom-left-radius: var(--p-border-radius);
}
`
};

6
components/lib/theme/lara/tabview/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

31
components/lib/theme/lara/toolbar/index.d.ts vendored Normal file
View File

@ -0,0 +1,31 @@
interface PanelThemeVariables {
panelHeaderBorder?: string | undefined;
panelHeaderPadding?: string | undefined;
panelHeaderBg?: string | undefined;
panelHeaderTextColor?: string | undefined;
panelHeaderFontWeight?: string | undefined;
panelHeaderIconWidth?: string | undefined;
panelHeaderIconHeight?: string | undefined;
panelHeaderIconColor?: string | undefined;
panelHeaderIconBorder?: string | undefined;
panelHeaderIconBg?: string | undefined;
panelHeaderIconBorderRadius?: string | undefined;
panelHeaderIconTransition?: string | undefined;
panelHeaderIconHoverColor?: string | undefined;
panelHeaderIconHoverBorderColor?: string | undefined;
panelHeaderIconHoverBg?: string | undefined;
panelHeaderIconFocusOutline?: string | undefined;
panelHeaderIconFocusOutlineOffset?: string | undefined;
panelHeaderIconFocusShadow?: string | undefined;
panelToggleableHeaderPadding?: string | undefined;
panelContentPadding?: string | undefined;
panelContentBorder?: string | undefined;
panelContentBg?: string | undefined;
panelContentTextColor?: string | undefined;
panelContentBorderTop?: string | undefined;
panelFooterPadding?: string | undefined;
panelFooterBorder?: string | undefined;
panelFooterBg?: string | undefined;
panelFooterTextColor?: string | undefined;
panelFooterBorderTop?: string | undefined;
}

30
components/lib/theme/lara/toolbar/index.js Normal file
View File

@ -0,0 +1,30 @@
export default {
variables: {
common: {},
light: {},
dark: {}
},
css: `
.p-toolbar {
justify-content: space-between;
flex-wrap: wrap;
background: var(--p-panel-header-bg);
border: var(--p-panel-header-border);
padding: var(--p-panel-header-padding);
border-radius: var(--p-border-radius);
gap: var(--p-inline-spacing);
}
.p-toolbar,
.p-toolbar-group-center,
.p-toolbar-group-end,
.p-toolbar-group-left,
.p-toolbar-group-right,
.p-toolbar-group-start {
display: flex;
align-items: center;
}
.p-toolbar-separator {
margin: 0 var(--p-inline-spacing);
}
`
};

6
components/lib/theme/lara/toolbar/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

2
components/lib/toolbar/style/ToolbarStyle.js
View File

@ -33,6 +33,6 @@ const classes = {
export default BaseStyle.extend({
name: 'toolbar',
css,
//css,
classes
});