diff --git a/components/lib/divider/style/DividerStyle.js b/components/lib/divider/style/DividerStyle.js index 28be12b4e..9be98d3ed 100644 --- a/components/lib/divider/style/DividerStyle.js +++ b/components/lib/divider/style/DividerStyle.js @@ -90,7 +90,7 @@ const classes = { export default BaseStyle.extend({ name: 'divider', - css, + //css, classes, inlineStyles }); diff --git a/components/lib/fieldset/style/FieldsetStyle.js b/components/lib/fieldset/style/FieldsetStyle.js index ab61bb36f..b50cb6f46 100644 --- a/components/lib/fieldset/style/FieldsetStyle.js +++ b/components/lib/fieldset/style/FieldsetStyle.js @@ -39,6 +39,6 @@ const classes = { export default BaseStyle.extend({ name: 'fieldset', - css, + //css, classes }); diff --git a/components/lib/scrollpanel/style/ScrollPanelStyle.js b/components/lib/scrollpanel/style/ScrollPanelStyle.js index a979cbf59..05839badf 100644 --- a/components/lib/scrollpanel/style/ScrollPanelStyle.js +++ b/components/lib/scrollpanel/style/ScrollPanelStyle.js @@ -70,6 +70,6 @@ const classes = { export default BaseStyle.extend({ name: 'scrollpanel', - css, + //css, classes }); diff --git a/components/lib/splitter/style/SplitterStyle.js b/components/lib/splitter/style/SplitterStyle.js index d541f0fd8..e4b3cf658 100644 --- a/components/lib/splitter/style/SplitterStyle.js +++ b/components/lib/splitter/style/SplitterStyle.js @@ -62,7 +62,7 @@ const inlineStyles = { export default BaseStyle.extend({ name: 'splitter', - css, + //css, classes, inlineStyles }); diff --git a/components/lib/tabview/style/TabViewStyle.js b/components/lib/tabview/style/TabViewStyle.js index f0cada1a3..8d2dd1196 100644 --- a/components/lib/tabview/style/TabViewStyle.js +++ b/components/lib/tabview/style/TabViewStyle.js @@ -105,6 +105,6 @@ const classes = { export default BaseStyle.extend({ name: 'tabview', - css, + //css, classes }); diff --git a/components/lib/theme/lara/divider/index.d.ts b/components/lib/theme/lara/divider/index.d.ts new file mode 100644 index 000000000..b3dfdca71 --- /dev/null +++ b/components/lib/theme/lara/divider/index.d.ts @@ -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; +} diff --git a/components/lib/theme/lara/divider/index.js b/components/lib/theme/lara/divider/index.js new file mode 100644 index 000000000..b3b555843 --- /dev/null +++ b/components/lib/theme/lara/divider/index.js @@ -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; +} + ` +}; diff --git a/components/lib/theme/lara/divider/package.json b/components/lib/theme/lara/divider/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/lara/divider/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/lara/fieldset/index.d.ts b/components/lib/theme/lara/fieldset/index.d.ts new file mode 100644 index 000000000..b3dfdca71 --- /dev/null +++ b/components/lib/theme/lara/fieldset/index.d.ts @@ -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; +} diff --git a/components/lib/theme/lara/fieldset/index.js b/components/lib/theme/lara/fieldset/index.js new file mode 100644 index 000000000..78f48e133 --- /dev/null +++ b/components/lib/theme/lara/fieldset/index.js @@ -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); +} + ` +}; diff --git a/components/lib/theme/lara/fieldset/package.json b/components/lib/theme/lara/fieldset/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/lara/fieldset/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/lara/scrollpanel/index.d.ts b/components/lib/theme/lara/scrollpanel/index.d.ts new file mode 100644 index 000000000..b3dfdca71 --- /dev/null +++ b/components/lib/theme/lara/scrollpanel/index.d.ts @@ -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; +} diff --git a/components/lib/theme/lara/scrollpanel/index.js b/components/lib/theme/lara/scrollpanel/index.js new file mode 100644 index 000000000..70912c392 --- /dev/null +++ b/components/lib/theme/lara/scrollpanel/index.js @@ -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); +} + ` +}; diff --git a/components/lib/theme/lara/scrollpanel/package.json b/components/lib/theme/lara/scrollpanel/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/lara/scrollpanel/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/lara/splitter/index.d.ts b/components/lib/theme/lara/splitter/index.d.ts new file mode 100644 index 000000000..b3dfdca71 --- /dev/null +++ b/components/lib/theme/lara/splitter/index.d.ts @@ -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; +} diff --git a/components/lib/theme/lara/splitter/index.js b/components/lib/theme/lara/splitter/index.js new file mode 100644 index 000000000..aa3446f8a --- /dev/null +++ b/components/lib/theme/lara/splitter/index.js @@ -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); +} + ` +}; diff --git a/components/lib/theme/lara/splitter/package.json b/components/lib/theme/lara/splitter/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/lara/splitter/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/lara/tabview/index.d.ts b/components/lib/theme/lara/tabview/index.d.ts new file mode 100644 index 000000000..b3dfdca71 --- /dev/null +++ b/components/lib/theme/lara/tabview/index.d.ts @@ -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; +} diff --git a/components/lib/theme/lara/tabview/index.js b/components/lib/theme/lara/tabview/index.js new file mode 100644 index 000000000..2cdec0309 --- /dev/null +++ b/components/lib/theme/lara/tabview/index.js @@ -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); +} + ` +}; diff --git a/components/lib/theme/lara/tabview/package.json b/components/lib/theme/lara/tabview/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/lara/tabview/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/lara/toolbar/index.d.ts b/components/lib/theme/lara/toolbar/index.d.ts new file mode 100644 index 000000000..b3dfdca71 --- /dev/null +++ b/components/lib/theme/lara/toolbar/index.d.ts @@ -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; +} diff --git a/components/lib/theme/lara/toolbar/index.js b/components/lib/theme/lara/toolbar/index.js new file mode 100644 index 000000000..4c2b13693 --- /dev/null +++ b/components/lib/theme/lara/toolbar/index.js @@ -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); +} + ` +}; diff --git a/components/lib/theme/lara/toolbar/package.json b/components/lib/theme/lara/toolbar/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/lara/toolbar/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/toolbar/style/ToolbarStyle.js b/components/lib/toolbar/style/ToolbarStyle.js index edfea7384..0641db87a 100644 --- a/components/lib/toolbar/style/ToolbarStyle.js +++ b/components/lib/toolbar/style/ToolbarStyle.js @@ -33,6 +33,6 @@ const classes = { export default BaseStyle.extend({ name: 'toolbar', - css, + //css, classes });