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

Fixed #5667 - Remove base option from theme config

pull/5677/head
Mert Sincan 2024-05-01 09:26:48 +01:00
parent 6d688ef675
commit 0979dde96d
438 changed files with 10872 additions and 11957 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/lib/accordion/style/AccordionStyle.js
View File

@ -1,10 +1,57 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-accordionpanel {
display: flex;
flex-direction: column;
border-bottom: 1px solid ${dt('accordion.content.border.color')};
}
.p-accordionpanel:last-child {
border-bottom: 0 none;
}
.p-accordionheader {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.125rem 1.125rem 1.125rem 1.125rem;
color: ${dt('accordion.header.color')};
background: ${dt('accordion.header.background')};
font-weight: 600;
border-radius: ${dt('rounded.base')};
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -2px;
}
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled):hover > .p-accordionheader {
color: ${dt('accordion.header.hover.color')}
}
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
color: ${dt('accordion.header.active.color')}
}
.p-accordioncontent-content {
padding: 0 1.125rem 1.125rem 1.125rem;
background: color: ${dt('accordion.content.background')}
color: ${dt('accordion.content.color')}
}
`;
const classes = {
root: 'p-accordion p-component'
};
export default BaseStyle.extend({
name: 'accordion',
theme,
classes
});

216
components/lib/autocomplete/style/AutoCompleteStyle.js
View File

@ -1,6 +1,221 @@
import BaseStyle from 'primevue/base/style';
import { ObjectUtils } from 'primevue/utils';
const theme = ({ dt }) => `
.p-autocomplete {
display: inline-flex;
}
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -0.5rem;
right: 0.75rem;
}
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
right: 3.25rem;
}
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
flex: 1 1 auto;
width: 1%;
}
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-autocomplete-dropdown {
cursor: pointer;
display: inline-flex;
cursor: pointer;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('autocomplete.dropdown.width')};
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
background: ${dt('autocomplete.dropdown.background')};
border: 1px solid ${dt('autocomplete.dropdown.border.color')};
border-left: 0 none;
background: ${dt('autocomplete.dropdown.background')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-autocomplete-dropdown:not(:disabled):hover {
background: ${dt('autocomplete.dropdown.hover.background')};
border-color: ${dt('autocomplete.dropdown.hover.border.color')};
background: ${dt('autocomplete.dropdown.hover.background')};
}
.p-autocomplete-dropdown:not(:disabled):active {
background: ${dt('autocomplete.dropdown.active.background')};
border-color: ${dt('autocomplete.dropdown.active.border.color')};
background: ${dt('autocomplete.dropdown.active.background')};
}
.p-autocomplete-dropdown:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-autocomplete .p-autocomplete-overlay {
min-width: 100%;
}
.p-autocomplete-overlay {
position: absolute;
overflow: auto;
top: 0;
left: 0;
background: ${dt('autocomplete.overlay.background')};
color: ${dt('autocomplete.overlay.color')};
border: 1px solid ${dt('autocomplete.overlay.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-autocomplete-list {
margin: 0;
padding: 0;
list-style-type: none;
padding: 0.25rem 0.25rem;
}
.p-autocomplete-option {
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
margin: 2px 0;
padding: 0.5rem 0.75rem;
border: 0 none;
color: ${dt('autocomplete.item.color')};
background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')};
}
.p-autocomplete-option:first-child {
margin-top: 0;
}
.p-autocomplete-option:last-child {
margin-bottom: 0;
}
.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
background: ${dt('autocomplete.item.focus.background')};
color: ${dt('autocomplete.item.focus.color')};
}
.p-autocomplete-option-selected {
background: ${dt('autocomplete.item.selected.background')};
color: ${dt('autocomplete.item.selected.color')};
}
.p-autocomplete-option-selected.p-focus {
background: ${dt('autocomplete.item.selected.focus.background')};
color: ${dt('autocomplete.item.selected.focus.color')};
}
.p-autocomplete-option-group {
margin: 0;
padding: 0.5rem 0.75rem;
color: ${dt('autocomplete.item.group.color')};
background: ${dt('autocomplete.item.group.background')};
font-weight: 600;
}
.p-autocomplete-input-multiple {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0.25rem 0.25rem;
gap: 0.25rem;
color: ${dt('autocomplete.input.multiple.color')};
background: ${dt('autocomplete.input.multiple.background')};
border: 1px solid ${dt('autocomplete.input.multiple.border.color')};
border-radius: ${dt('rounded.base')};
width: 100%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
box-shadow: ${dt('autocomplete.input.multiple.box.shadow')};
}
.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.input.multiple.hover.border.color')};
}
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.input.multiple.focus.border.color')};
outline: 0 none;
}
.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.input.multiple.invalid.border.color')};
}
.p-variant-filled.p-autocomplete-input-multiple {
background: ${dt('autocomplete.input.multiple.filled.background')};
}
.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple {
background: ${dt('autocomplete.input.multiple.filled.focus.background')};
}
.p-autocomplete.p-disabled .p-autocomplete-input-multiple {
opacity: 1;
background: ${dt('autocomplete.input.multiple.disabled.background')};
color: ${dt('autocomplete.input.multiple.disabled.color')};
}
.p-autocomplete-input-chip {
flex: 1 1 auto;
display: inline-flex;
padding: 0.25rem 0;
margin-left: 0.5rem;
}
.p-autocomplete-input-chip input {
border: 0 none;
outline: 0 none;
background: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
color: inherit;
}
.p-autocomplete-input-chip input::placeholder {
color: ${dt('autocomplete.input.multiple.placeholder.color')};
}
.p-fluid .p-autocomplete {
display: flex;
}
.p-fluid .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
width: 1%;
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
@ -56,6 +271,7 @@ const classes = {
export default BaseStyle.extend({
name: 'autocomplete',
theme,
classes,
inlineStyles
});

68
components/lib/avatar/style/AvatarStyle.js
View File

@ -1,5 +1,72 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
font-size: 1rem;
background: ${dt('avatar.background')};
border-radius: ${dt('rounded.base')};
}
.p-avatar-image {
background-color: transparent;
}
.p-avatar-circle {
border-radius: 50%;
}
.p-avatar-circle img {
border-radius: 50%;
}
.p-avatar-icon {
font-size: 1rem;
}
.p-avatar img {
width: 100%;
height: 100%;
}
.p-avatar-lg {
width: 3rem;
height: 3rem;
font-size: 1.5rem;
}
.p-avatar-lg .p-avatar-icon {
font-size: 1.5rem;
}
.p-avatar-xl {
width: 4rem;
height: 4rem;
font-size: 2rem;
}
.p-avatar-xl .p-avatar-icon {
font-size: 2rem;
}
.p-avatar-group {
display: flex;
align-items: center;
}
.p-avatar-group .p-avatar + .p-avatar {
margin-left: -1rem;
}
.p-avatar-group .p-avatar {
border: 2px solid ${dt('avatar.grouped.border.color')};
}
`;
const classes = {
root: ({ props }) => [
'p-avatar p-component',
@ -16,5 +83,6 @@ const classes = {
export default BaseStyle.extend({
name: 'avatar',
theme,
classes
});

87
components/lib/badge/style/BadgeStyle.js
View File

@ -1,6 +1,92 @@
import BaseStyle from 'primevue/base/style';
import { ObjectUtils } from 'primevue/utils';
const theme = ({ dt }) => `
.p-badge {
display: inline-flex;
border-radius: 10px;
justify-content: center;
padding: 0 0.5rem;
background: ${dt('badge.primary.background')};
color: ${dt('badge.primary.color')};
font-size: 0.75rem;
font-weight: 700;
min-width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
}
.p-overlay-badge {
position: relative;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
transform-origin: 100% 0;
margin: 0;
}
.p-badge-dot {
width: 0.5rem;
min-width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
padding: 0;
}
.p-badge-circle {
padding: 0;
border-radius: 50%;
}
.p-badge-secondary {
background: ${dt('badge.secondary.background')};
color: ${dt('badge.secondary.color')};
}
.p-badge-success {
background: ${dt('badge.success.background')};
color: ${dt('badge.success.color')};
}
.p-badge-info {
background: ${dt('badge.info.background')};
color: ${dt('badge.info.color')};
}
.p-badge-warn {
background: ${dt('badge.warn.background')};
color: ${dt('badge.warn.color')};
}
.p-badge-danger {
background: ${dt('badge.danger.background')};
color: ${dt('badge.danger.color')};
}
.p-badge-contrast {
background: ${dt('badge.contrast.background')};
color: ${dt('badge.contrast.color')};
}
.p-badge-lg {
font-size: 1.125rem;
min-width: 2.25rem;
height: 2.25rem;
line-height: 2.25rem;
}
.p-badge-xl {
font-size: 1.5rem;
min-width: 3rem;
height: 3rem;
line-height: 3rem;
}
`;
const classes = {
root: ({ props, instance }) => [
'p-badge p-component',
@ -21,5 +107,6 @@ const classes = {
export default BaseStyle.extend({
name: 'badge',
theme,
classes
});

237
components/lib/base/style/BaseStyle.js
View File

@ -2,6 +2,235 @@ import Theme, { dt } from 'primevue/themes';
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
const theme = ({ dt }) => `
.p-component,
.p-component * {
box-sizing: border-box;
}
.p-hidden-space {
visibility: hidden;
}
.p-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.p-disabled,
.p-disabled * {
cursor: default;
pointer-events: none;
user-select: none;
}
.p-component-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-unselectable-text {
user-select: none;
}
.p-sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal;
}
.p-link {
text-align: left;
background-color: transparent;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}
.p-link:disabled {
cursor: default;
}
/* Non vue overlay animations */
.p-connected-overlay {
opacity: 0;
transform: scaleY(0.8);
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-connected-overlay-visible {
opacity: 1;
transform: scaleY(1);
}
.p-connected-overlay-hidden {
opacity: 0;
transform: scaleY(1);
transition: opacity 0.1s linear;
}
/* Vue based overlay animations */
.p-connected-overlay-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-connected-overlay-leave-to {
opacity: 0;
}
.p-connected-overlay-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-connected-overlay-leave-active {
transition: opacity 0.1s linear;
}
/* Toggleable Content */
.p-toggleable-content-enter-from,
.p-toggleable-content-leave-to {
max-height: 0;
}
.p-toggleable-content-enter-to,
.p-toggleable-content-leave-from {
max-height: 1000px;
}
.p-toggleable-content-leave-active {
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}
.p-toggleable-content-enter-active {
overflow: hidden;
transition: max-height 1s ease-in-out;
}
* {
box-sizing: border-box;
}
.p-component {
font-size: 1rem;
font-weight: normal;
}
.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
transition-duration: ${dt('transition.duration')};
}
.p-disabled,
.p-component:disabled {
opacity: 0.6;
}
.p-error {
color: #f87171;
}
.p-text-secondary {
color: #64748b;
}
.pi {
font-size: 1rem;
}
.p-icon {
width: 1rem;
height: 1rem;
}
.p-link {
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
border-radius: 6px;
outline-color: transparent;
}
.p-link:focus-visible {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px;
box-shadow: none;
}
.p-component-overlay-enter {
animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
from {
background-color: transparent;
}
to {
background-color: ${dt('mask.background')};
}
}
@keyframes p-component-overlay-leave-animation {
from {
background-color: ${dt('mask.background')};
}
to {
background-color: transparent;
}
}
.p-ripple {
overflow: hidden;
position: relative;
}
.p-ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
}
.p-ripple-disabled .p-ink {
display: none;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
`;
const css = ({ dt }) => `
.p-hidden-accessible {
border: 0;
@ -32,6 +261,7 @@ const inlineStyles = {};
export default {
name: 'base',
css,
theme,
classes,
inlineStyles,
loadStyle(options = {}) {
@ -39,6 +269,11 @@ export default {
return css ? useStyle(ObjectUtils.minifyCSS(css), { name: this.name, ...options }) : {};
},
loadInlineTheme(options = {}) {
const theme = ObjectUtils.getItemValue(this.theme, { dt });
return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: this.name, ...options }) : {};
},
loadTheme(theme, options = {}) {
const callbacks = { onMounted: (name) => Theme.onStyleMounted(name), onUpdated: (name) => Theme.onStyleUpdated(name), onLoad: (event, options) => Theme.onStyleLoaded(event, options) };
@ -78,6 +313,6 @@ export default {
return Theme.getStyleSheet(this.name, params, props);
},
extend(style) {
return { ...this, css: undefined, ...style };
return { ...this, css: undefined, theme: undefined, ...style };
}
};

11
components/lib/basecomponent/BaseComponent.vue
View File

@ -154,11 +154,11 @@ export default {
// common
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.() || {};
const { primitive, semantic } = this.$style?.getCommonThemeCSS?.() || {};
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions });
BaseStyle.loadTheme(global, { name: 'global-style', ...this.$styleOptions });
BaseStyle.loadInlineTheme({ name: 'global-style', ...this.$styleOptions });
Theme.setLoadedStyleName('common');
}
@ -168,7 +168,9 @@ export default {
const { variables, style } = this.$style?.getComponentThemeCSS?.() || {};
this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions });
this.$style?.loadTheme(style, { name: `${this.$style.name}-style`, ...this.$styleOptions });
this.$style?.loadInlineTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions });
//this.$style?.loadTheme(style, { name: `${this.$style.name}-style`, ...this.$styleOptions });
Theme.setLoadedStyleName(this.$style.name);
}
@ -289,7 +291,7 @@ export default {
return this._getPTValue(this.pt, key, { ...this.$params, ...params });
},
ptmi(key = '', params = {}) {
// inheritAttrs:true without `pt:*`
// inheritAttrs:true
return mergeProps(this.$_attrsWithoutPT, this.ptm(key, params));
},
ptmo(obj = {}, key = '', params = {}) {
@ -366,7 +368,6 @@ export default {
}, {});
},
$_attrsWithoutPT() {
// $attrs without `pt:*`
return Object.entries(this.$attrs || {})
.filter(([key]) => !key?.startsWith('pt:'))
.reduce((acc, [key, value]) => {

7
components/lib/basedirective/BaseDirective.js
View File

@ -98,11 +98,11 @@ const BaseDirective = {
// common
if (!Theme.isStyleNameLoaded('common')) {
const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.() || {};
const { primitive, semantic } = instance.$style?.getCommonThemeCSS?.() || {};
BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...useStyleOptions });
BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...useStyleOptions });
BaseStyle.loadTheme(global, { name: 'global-style', ...useStyleOptions });
BaseStyle.loadInlineTheme({ name: 'global-style', ...useStyleOptions });
Theme.setLoadedStyleName('common');
}
@ -112,7 +112,8 @@ const BaseDirective = {
const { variables, style } = instance.$style?.getDirectiveThemeCSS?.() || {};
instance.$style?.loadTheme(variables, { name: `${instance.$style.name}-variables`, ...useStyleOptions });
instance.$style?.loadTheme(style, { name: `${instance.$style.name}-style`, ...useStyleOptions });
instance.$style?.loadInlineTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions });
//instance.$style?.loadTheme(style, { name: `${instance.$style.name}-style`, ...useStyleOptions });
Theme.setLoadedStyleName(instance.$style.name);
}

19
components/lib/blockui/style/BlockUIStyle.js
View File

@ -1,10 +1,29 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-blockui {
position: relative;
}
.p-blockui-mask {
border-radius: ${dt('rounded.base')};
}
.p-blockui-mask.p-component-overlay {
position: absolute;
}
.p-blockui-mask-document.p-component-overlay {
position: fixed;
}
`;
const classes = {
root: 'p-blockui'
};
export default BaseStyle.extend({
name: 'blockui',
theme,
classes
});

60
components/lib/breadcrumb/style/BreadcrumbStyle.js
View File

@ -1,5 +1,64 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-breadcrumb {
background: ${dt('breadcrumb.background')};
border: 0 none;
border-radius: ${dt('rounded.base')};
padding: 1rem;
overflow-x: auto;
}
.p-breadcrumb-list {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.p-breadcrumb-separator {
display: flex;
align-items: center;
margin: 0 0.5rem 0 0.5rem;
color: ${dt('breadcrumb.separator.color')};
}
.p-breadcrumb::-webkit-scrollbar {
display: none;
}
.p-breadcrumb-item-link {
text-decoration: none;
display: flex;
align-items: center;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
}
.p-breadcrumb-item-link:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-breadcrumb-item-link {
color: ${dt('breadcrumb.item.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
line-height: 1;
}
.p-breadcrumb-item-label:hover {
color: ${dt('breadcrumb.item.hover.color')};
line-height: 1;
}
.p-breadcrumb-item-icon {
color: ${dt('breadcrumb.item.icon.color')};
}
`;
const classes = {
root: 'p-breadcrumb p-component',
list: 'p-breadcrumb-list',
@ -13,5 +72,6 @@ const classes = {
export default BaseStyle.extend({
name: 'breadcrumb',
theme,
classes
});

590
components/lib/button/style/ButtonStyle.js
View File

@ -1,5 +1,594 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-button {
display: inline-flex;
cursor: pointer;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
color: ${dt('button.primary.color')};
background: ${dt('button.primary.background')};
border: 1px solid ${dt('button.primary.border.color')};
padding: 0.5rem 1rem;
font-size: 1rem;
font-family: inherit;
font-feature-settings: inherit;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
gap: 0.5rem;
}
.p-button:disabled {
cursor: default;
}
.p-button-icon-right {
order: 1;
}
.p-button-icon-bottom {
order: 2;
}
.p-button-icon-only {
justify-content: center;
width: 2.5rem;
padding: 0.5rem 0;
}
.p-button-icon-only.p-button-rounded {
border-radius: 50%;
height: 2.5rem;
}
.p-button-sm {
font-size: 0.875rem;
padding: 0.375rem 0.875rem;
}
.p-button-sm .p-button-icon {
font-size: 0.875rem;
}
.p-button-lg {
font-size: 1.25rem;
padding: 0.625rem 1.25rem;
}
.p-button-lg .p-button-icon {
font-size: 1.25rem;
}
.p-button-vertical {
flex-direction: column;
}
.p-button-label {
font-weight: 500;
}
.p-fluid .p-button {
width: 100%;
}
.p-fluid .p-button-icon-only {
width: 2.5rem;
}
.p-button:not(:disabled):hover {
background: ${dt('button.primary.hover.background')};
border: 1px solid ${dt('button.primary.hover.border.color')};
color: ${dt('button.primary.hover.color')};
}
.p-button:not(:disabled):active {
background: ${dt('button.primary.active.background')};
border: 1px solid ${dt('button.primary.active.border.color')};
color: ${dt('button.primary.active.color')};
}
.p-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-button .p-badge {
margin-left: 0.5rem;
min-width: 1rem;
height: 1rem;
line-height: 1rem;
background: ${dt('button.primary.color')};
color: ${dt('button.primary.background')};
}
.p-button-raised {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.p-button-rounded {
border-radius: 2rem;
}
/* Default Severities */
.p-button-secondary {
background: ${dt('button.secondary.background')};
border: 1px solid ${dt('button.secondary.border.color')};
color: ${dt('button.secondary.color')};
}
.p-button-secondary:not(:disabled):hover {
background: ${dt('button.secondary.hover.background')};
border: 1px solid ${dt('button.secondary.hover.border.color')};
color: ${dt('button.secondary.hover.color')};
}
.p-button-secondary:not(:disabled):active {
background: ${dt('button.secondary.active.background')};
border: 1px solid ${dt('button.secondary.active.border.color')};
color: ${dt('button.secondary.active.color')};
}
.p-button-success {
background: ${dt('button.success.background')};
border: 1px solid ${dt('button.success.border.color')};
color: ${dt('button.success.color')};
}
.p-button-success:not(:disabled):hover {
background: ${dt('button.success.hover.background')};
border: 1px solid ${dt('button.success.hover.border.color')};
color: ${dt('button.success.hover.color')};
}
.p-button-success:not(:disabled):active {
background: ${dt('button.success.active.background')};
border: 1px solid ${dt('button.success.active.border.color')};
color: ${dt('button.success.active.color')};
}
.p-button-success:focus-visible {
outline-color: ${dt('button.success.background')};
}
.p-button-info {
background: ${dt('button.info.background')};
border: 1px solid ${dt('button.info.border.color')};
color: ${dt('button.info.color')};
}
.p-button-info:not(:disabled):hover {
background: ${dt('button.info.hover.background')};
border: 1px solid ${dt('button.info.hover.border.color')};
color: ${dt('button.info.hover.color')};
}
.p-button-info:not(:disabled):active {
background: ${dt('button.info.active.background')};
border: 1px solid ${dt('button.info.active.border.color')};
color: ${dt('button.info.active.color')};
}
.p-button-info:focus-visible {
outline-color: ${dt('button.info.background')};
}
.p-button-warn {
background: ${dt('button.warn.background')};
border: 1px solid ${dt('button.warn.border.color')};
color: ${dt('button.warn.color')};
}
.p-button-warn:not(:disabled):hover {
background: ${dt('button.warn.hover.background')};
border: 1px solid ${dt('button.warn.hover.border.color')};
color: ${dt('button.warn.hover.color')};
}
.p-button-warn:not(:disabled):active {
background: ${dt('button.warn.active.background')};
border: 1px solid ${dt('button.warn.active.border.color')};
color: ${dt('button.warn.active.color')};
}
.p-button-warn:focus-visible {
background: ${dt('button.warn.background')};
}
.p-button-help {
background: ${dt('button.help.background')};
border: 1px solid ${dt('button.help.border.color')};
color: ${dt('button.help.color')};
}
.p-button-help:not(:disabled):hover {
background: ${dt('button.help.hover.background')};
border: 1px solid ${dt('button.help.hover.border.color')};
color: ${dt('button.help.hover.color')};
}
.p-button-help:not(:disabled):active {
background: ${dt('button.help.active.background')};
border: 1px solid ${dt('button.help.active.border.color')};
color: ${dt('button.help.active.color')};
}
.p-button-help:focus-visible {
outline-color: ${dt('button.help.background')};
}
.p-button-danger {
background: ${dt('button.danger.background')};
border: 1px solid ${dt('button.danger.border.color')};
color: ${dt('button.danger.color')};
}
.p-button-danger:not(:disabled):hover {
background: ${dt('button.danger.hover.background')};
border: 1px solid ${dt('button.danger.hover.border.color')};
color: ${dt('button.danger.hover.color')};
}
.p-button-danger:not(:disabled):active {
background: ${dt('button.danger.active.background')};
border: 1px solid ${dt('button.danger.active.border.color')};
color: ${dt('button.danger.active.color')};
}
.p-button-danger:focus-visible {
background: ${dt('button.danger.background')};
}
.p-button-contrast {
background: ${dt('button.contrast.background')};
border: 1px solid ${dt('button.contrast.border.color')};
color: ${dt('button.contrast.color')};
}
.p-button-contrast:not(:disabled):hover {
background: ${dt('button.contrast.hover.background')};
border: 1px solid ${dt('button.contrast.hover.border.color')};
color: ${dt('button.contrast.hover.color')};
}
.p-button-contrast:not(:disabled):active {
background: ${dt('button.contrast.active.background')};
border: 1px solid ${dt('button.contrast.active.border.color')};
color: ${dt('button.contrast.active.color')};
}
.p-button-contrast:focus-visible {
outline-color: ${dt('button.contrast.background')};
}
/* Outlined Buttons */
.p-button-outlined {
background: transparent;
border-color: ${dt('button.outlined.primary.border.color')};
color: ${dt('button.outlined.primary.color')};
}
.p-button-outlined:not(:disabled):hover {
background: ${dt('button.outlined.primary.hover.background')};
border-color: ${dt('button.outlined.primary.border.color')};
color: ${dt('button.outlined.primary.color')};
}
.p-button-outlined:not(:disabled):active {
background: ${dt('button.outlined.primary.active.background')};
border-color: ${dt('button.outlined.primary.border.color')};
color: ${dt('button.outlined.primary.color')};
}
.p-button-outlined.p-button-secondary {
border-color: ${dt('button.outlined.secondary.border.color')};
color: ${dt('button.outlined.secondary.color')};
}
.p-button-outlined.p-button-secondary:not(:disabled):hover {
background: ${dt('button.outlined.secondary.hover.background')};
border-color: ${dt('button.outlined.secondary.border.color')};
color: ${dt('button.outlined.secondary.color')};
}
.p-button-outlined.p-button-secondary:not(:disabled):active {
background: ${dt('button.outlined.secondary.active.background')};
border-color: ${dt('button.outlined.secondary.border.color')};
color: ${dt('button.outlined.secondary.color')};
}
.p-button-outlined.p-button-success {
border-color: ${dt('button.outlined.success.border.color')};
color: ${dt('button.outlined.success.color')};
}
.p-button-outlined.p-button-success:not(:disabled):hover {
background: ${dt('button.outlined.success.hover.background')};
border-color: ${dt('button.outlined.success.border.color')};
color: ${dt('button.outlined.success.color')};
}
.p-button-outlined.p-button-success:not(:disabled):active {
background: ${dt('button.outlined.success.active.background')};
border-color: ${dt('button.outlined.success.border.color')};
color: ${dt('button.outlined.success.color')};
}
.p-button-outlined.p-button-info {
border-color: ${dt('button.outlined.info.border.color')};
color: ${dt('button.outlined.info.color')};
}
.p-button-outlined.p-button-info:not(:disabled):hover {
background: ${dt('button.outlined.info.hover.background')};
border-color: ${dt('button.outlined.info.border.color')};
color: ${dt('button.outlined.info.color')};
}
.p-button-outlined.p-button-info:not(:disabled):active {
background: ${dt('button.outlined.info.active.background')};
border-color: ${dt('button.outlined.info.border.color')};
color: ${dt('button.outlined.info.color')};
}
.p-button-outlined.p-button-warn {
border-color: ${dt('button.outlined.warn.border.color')};
color: ${dt('button.outlined.warn.color')};
}
.p-button-outlined.p-button-warn:not(:disabled):hover {
background: ${dt('button.outlined.warn.hover.background')};
border-color: ${dt('button.outlined.warn.border.color')};
color: ${dt('button.outlined.warn.color')};
}
.p-button-outlined.p-button-warn:not(:disabled):active {
background: ${dt('button.outlined.warn.active.background')};
border-color: ${dt('button.outlined.warn.border.color')};
color: ${dt('button.outlined.warn.color')};
}
.p-button-outlined.p-button-help {
border-color: ${dt('button.outlined.help.border.color')};
color: ${dt('button.outlined.help.color')};
}
.p-button-outlined.p-button-help:not(:disabled):hover {
background: ${dt('button.outlined.help.hover.background')};
border-color: ${dt('button.outlined.help.border.color')};
color: ${dt('button.outlined.help.color')};
}
.p-button-outlined.p-button-help:not(:disabled):active {
background: ${dt('button.outlined.help.active.background')};
border-color: ${dt('button.outlined.help.border.color')};
color: ${dt('button.outlined.help.color')};
}
.p-button-outlined.p-button-danger {
border-color: ${dt('button.outlined.danger.border.color')};
color: ${dt('button.outlined.danger.color')};
}
.p-button-outlined.p-button-danger:not(:disabled):hover {
background: ${dt('button.outlined.danger.hover.background')};
border-color: ${dt('button.outlined.danger.border.color')};
color: ${dt('button.outlined.danger.color')};
}
.p-button-outlined.p-button-danger:not(:disabled):active {
background: ${dt('button.outlined.danger.active.background')};
border-color: ${dt('button.outlined.danger.border.color')};
color: ${dt('button.outlined.danger.color')};
}
.p-button-outlined.p-button-contrast {
border-color: ${dt('button.outlined.contrast.border.color')};
color: ${dt('button.outlined.contrast.color')};
}
.p-button-outlined.p-button-contrast:not(:disabled):hover {
background: ${dt('button.outlined.contrast.hover.background')};
border-color: ${dt('button.outlined.contrast.border.color')};
color: ${dt('button.outlined.contrast.color')};
}
.p-button-outlined.p-button-contrast:not(:disabled):active {
background: ${dt('button.outlined.contrast.active.background')};
border-color: ${dt('button.outlined.contrast.border.color')};
color: ${dt('button.outlined.contrast.color')};
}
.p-button-outlined.p-button-plain {
border-color: ${dt('button.outlined.plain.border.color')};
color: ${dt('button.outlined.plain.color')};
}
.p-button-outlined.p-button-plain:not(:disabled):hover {
background: ${dt('button.outlined.plain.hover.background')};
border-color: ${dt('button.outlined.plain.border.color')};
color: ${dt('button.outlined.plain.color')};
}
.p-button-outlined.p-button-plain:not(:disabled):active {
background: ${dt('button.outlined.plain.active.background')};
border-color: ${dt('button.outlined.plain.border.color')};
color: ${dt('button.outlined.plain.color')};
}
/* Text Button */
.p-button-text {
background: transparent;
border-color: transparent;
color: ${dt('button.text.primary.color')};
}
.p-button-text:not(:disabled):hover {
background: ${dt('button.text.primary.hover.background')};
border-color: transparent;
color: ${dt('button.text.primary.color')};
}
.p-button-text:not(:disabled):active {
background: ${dt('button.text.primary.active.background')};
border-color: transparent;
color: ${dt('button.text.primary.color')};
}
.p-button-text.p-button-secondary {
background: transparent;
border-color: transparent;
color: ${dt('button.text.secondary.color')};
}
.p-button-text.p-button-secondary:not(:disabled):hover {
background: ${dt('button.text.secondary.hover.background')};
border-color: transparent;
color: ${dt('button.text.secondary.color')};
}
.p-button-text.p-button-secondary:not(:disabled):active {
background: ${dt('button.text.secondary.active.background')};
border-color: transparent;
color: ${dt('button.text.secondary.color')};
}
.p-button-text.p-button-success {
background: transparent;
border-color: transparent;
color: ${dt('button.text.success.color')};
}
.p-button-text.p-button-success:not(:disabled):hover {
background: ${dt('button.text.success.hover.background')};
border-color: transparent;
color: ${dt('button.text.success.color')};
}
.p-button-text.p-button-success:not(:disabled):active {
background: ${dt('button.text.success.active.background')};
border-color: transparent;
color: ${dt('button.text.success.color')};
}
.p-button-text.p-button-info {
background: transparent;
border-color: transparent;
color: ${dt('button.text.info.color')};
}
.p-button-text.p-button-info:not(:disabled):hover {
background: ${dt('button.text.info.hover.background')};
border-color: transparent;
color: ${dt('button.text.info.color')};
}
.p-button-text.p-button-info:not(:disabled):active {
background: ${dt('button.text.info.active.background')};
border-color: transparent;
color: ${dt('button.text.info.color')};
}
.p-button-text.p-button-warn {
background: transparent;
border-color: transparent;
color: ${dt('button.text.warn.color')};
}
.p-button-text.p-button-warn:not(:disabled):hover {
background: ${dt('button.text.warn.hover.background')};
border-color: transparent;
color: ${dt('button.text.warn.color')};
}
.p-button-text.p-button-warn:not(:disabled):active {
background: ${dt('button.text.warn.active.background')};
border-color: transparent;
color: ${dt('button.text.warn.color')};
}
.p-button-text.p-button-help {
background: transparent;
border-color: transparent;
color: ${dt('button.text.help.color')};
}
.p-button-text.p-button-help:not(:disabled):hover {
background: ${dt('button.text.help.hover.background')};
border-color: transparent;
color: ${dt('button.text.help.color')};
}
.p-button-text.p-button-help:not(:disabled):active {
background: ${dt('button.text.help.active.background')};
border-color: transparent;
color: ${dt('button.text.help.color')};
}
.p-button-text.p-button-danger {
background: transparent;
border-color: transparent;
color: ${dt('button.text.danger.color')};
}
.p-button-text.p-button-danger:not(:disabled):hover {
background: ${dt('button.text.danger.hover.background')};
border-color: transparent;
color: ${dt('button.text.danger.color')};
}
.p-button-text.p-button-danger:not(:disabled):active {
background: ${dt('button.text.danger.active.background')};
border-color: transparent;
color: ${dt('button.text.danger.color')};
}
.p-button-text.p-button-plain {
background: transparent;
border-color: transparent;
color: ${dt('button.text.plain.color')};
}
.p-button-text.p-button-plain:not(:disabled):hover {
background: ${dt('button.text.plain.hover.background')};
border-color: transparent;
color: ${dt('button.text.plain.color')};
}
.p-button-text.p-button-plain:not(:disabled):active {
background: ${dt('button.text.plain.active.background')};
border-color: transparent;
color: ${dt('button.text.plain.color')};
}
/* Link Button */
.p-button-link {
background: transparent;
border-color: transparent;
color: ${dt('button.link.color')};
}
.p-button-link:not(:disabled):hover {
background: transparent;
border-color: transparent;
color: ${dt('button.link.hover.color')};
}
.p-button-link:not(:disabled):hover .p-button-label {
text-decoration: underline;
}
.p-button-link:not(:disabled):active {
background: transparent;
border-color: transparent;
color: ${dt('button.link.active.color')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-button p-component',
@ -30,5 +619,6 @@ const classes = {
export default BaseStyle.extend({
name: 'button',
theme,
classes
});

31
components/lib/buttongroup/style/ButtonGroupStyle.js
View File

@ -1,10 +1,41 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-buttongroup .p-button {
margin: 0;
}
.p-buttongroup .p-button:not(:last-child),
.p-buttongroup .p-button:not(:last-child):hover {
border-right: 0 none;
}
.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) {
border-radius: 0;
}
.p-buttongroup .p-button:first-of-type:not(:only-of-type) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-buttongroup .p-button:last-of-type:not(:only-of-type) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-buttongroup .p-button:focus {
position: relative;
z-index: 1;
}
`;
const classes = {
root: 'p-buttongroup p-component'
};
export default BaseStyle.extend({
name: 'buttongroup',
theme,
classes
});

35
components/lib/card/style/CardStyle.js
View File

@ -1,5 +1,39 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-card {
background: ${dt('card.background')};
color: ${dt('card.color')};
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
border-radius: 12px;
display: flex;
flex-direction: column;
}
.p-card-caption {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.p-card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.p-card-title {
font-size: 1.25rem;
font-weight: 600;
}
.p-card-subtitle {
font-weight: 400;
color: ${dt('card.subtitle.color')};
}
`;
const classes = {
root: 'p-card p-component',
header: 'p-card-header',
@ -13,5 +47,6 @@ const classes = {
export default BaseStyle.extend({
name: 'card',
theme,
classes
});

92
components/lib/carousel/style/CarouselStyle.js
View File

@ -1,5 +1,96 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-carousel {
display: flex;
flex-direction: column;
}
.p-carousel-content-container {
display: flex;
flex-direction: column;
overflow: auto;
}
.p-carousel-content {
display: flex;
flex-direction: row;
}
.p-carousel-viewport {
overflow: hidden;
width: 100%;
}
.p-carousel-item-list {
display: flex;
flex-direction: row;
}
.p-carousel-prev-button,
.p-carousel-next-button {
align-self: center;
}
.p-carousel-indicator-list {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
padding: 1rem;
gap: 0.5rem;
margin: 0;
list-style: none;
}
.p-carousel-indicator-button {
display: flex;
align-items: center;
justify-content: center;
background: ${dt('carousel.indicator.background')};
width: 2rem;
height: 0.5rem;
border: 0 none;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
border-radius: ${dt('rounded.base')};
padding: 0;
margin: 0;
border: none;
user-select: none;
}
.p-carousel-indicator-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-carousel-indicator-button:hover {
background: ${dt('carousel.indicator.hover.background')};
}
.p-carousel-indicator-active .p-carousel-indicator-button {
background: ${dt('carousel.indicator.active.background')};
}
.p-carousel-vertical .p-carousel-content {
flex-direction: column;
}
.p-carousel-vertical .p-carousel-item-list {
flex-direction: column;
height: 100%;
}
.p-items-hidden .p-carousel-item {
visibility: hidden;
}
.p-items-hidden .p-carousel-item.p-carousel-item-active {
visibility: visible;
}
`;
const classes = {
root: ({ instance }) => [
'p-carousel p-component',
@ -54,5 +145,6 @@ const classes = {
export default BaseStyle.extend({
name: 'carousel',
theme,
classes
});

186
components/lib/cascadeselect/style/CascadeSelectStyle.js
View File

@ -1,5 +1,190 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-cascadeselect {
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
background: ${dt('cascadeselect.background')};
border: 1px solid ${dt('cascadeselect.border.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: ${dt('cascadeselect.box.shadow')};
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: ${dt('cascadeselect.hover.border.color')};
}
.p-cascadeselect:not(.p-disabled).p-focus {
border-color: ${dt('cascadeselect.focus.border.color')};
outline: 0 none;
}
.p-cascadeselect.p-variant-filled {
background: ${dt('cascadeselect.filled.background')};
}
.p-cascadeselect.p-variant-filled.p-focus {
background: ${dt('cascadeselect.filled.focus.background')};
}
.p-cascadeselect.p-invalid {
border-color: ${dt('cascadeselect.invalid.border.color')};
}
.p-cascadeselect.p-disabled {
opacity: 1;
background: ${dt('cascadeselect.disabled.background')};
}
.p-cascadeselect-dropdown {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: transparent;
color: ${dt('cascadeselect.toggle.color')};
width: 2.5rem;
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-cascadeselect-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
padding: 0.5rem 0.75rem;
text-overflow: ellipsis;
cursor: pointer;
color: ${dt('cascadeselect.color')};
background: transparent;
border: 0 none;
outline: 0 none;
}
.p-cascadeselect-label.p-placeholder {
color: ${dt('cascadeselect.placeholder.color')};
}
.p-cascadeselect-clearable .p-cascadeselect-label {
padding-right: 1.75rem;
}
.p-cascadeselect.p-disabled .p-cascadeselect-label {
color: ${dt('cascadeselect.disabled.color')};
}
.p-cascadeselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-fluid .p-cascadeselect {
display: flex;
}
.p-fluid .p-cascadeselect .p-cascadeselect-label {
width: 1%;
}
.p-cascadeselect-overlay {
background: ${dt('cascadeselect.overlay.background')};
color: ${dt('cascadeselect.overlay.color')};
border: 1px solid ${dt('cascadeselect.overlay.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-cascadeselect .p-cascadeselect-overlay {
min-width: 100%;
}
.p-cascadeselect-item-list {
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
}
.p-cascadeselect-list {
margin: 0;
padding: 0;
list-style-type: none;
min-width: 100%;
padding: 0.25rem 0.25rem;
}
.p-cascadeselect-item {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
margin: 2px 0;
border: 0 none;
color: ${dt('cascadeselect.item.color')};
background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')};
}
.p-cascadeselect-item:first-child {
margin-top: 0;
}
.p-cascadeselect-item:last-child {
margin-bottom: 0;
}
.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus {
background: ${dt('cascadeselect.item.focus.background')};
color: ${dt('cascadeselect.item.focus.color')};
}
.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
color: ${dt('cascadeselect.item.icon.focus.color')};
}
.p-cascadeselect-item-selected {
background: ${dt('cascadeselect.item.selected.background')};
color: ${dt('cascadeselect.item.selected.color')};
}
.p-cascadeselect-item-selected.p-focus {
background: ${dt('cascadeselect.item.selected.focus.background')};
color: ${dt('cascadeselect.item.selected.focus.color')};
}
.p-cascadeselect-item-active {
overflow: visible;
background: ${dt('cascadeselect.item.focus.background')};
color: ${dt('cascadeselect.item.focus.color')};
}
.p-cascadeselect-item-active > .p-cascadeselect-item-list {
display: block;
left: 100%;
top: 0;
}
.p-cascadeselect-item-content {
display: flex;
align-items: center;
overflow: hidden;
position: relative;
padding: 0.5rem 0.75rem;
}
.p-cascadeselect-group-icon {
margin-left: auto;
font-size: 0.875rem;
color: ${dt('cascadeselect.item.icon.color')};
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
@ -52,6 +237,7 @@ const classes = {
export default BaseStyle.extend({
name: 'cascadeselect',
theme,
classes,
inlineStyles
});

106
components/lib/checkbox/style/CheckboxStyle.js
View File

@ -1,5 +1,110 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-checkbox {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
width: ${dt('checkbox.width')};
height: ${dt('checkbox.height')};
}
.p-checkbox-input {
cursor: pointer;
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: 1px solid transparent;
border-radius: ${dt('checkbox.border.radius')};
}
.p-checkbox-box {
display: flex;
justify-content: center;
align-items: center;
border-radius: ${dt('checkbox.border.radius')};
border: 1px solid ${dt('checkbox.border.color')};
background: ${dt('checkbox.background')};
width: ${dt('checkbox.width')};
height: ${dt('checkbox.width')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
box-shadow: ${dt('checkbox.box.shadow')};
}
.p-checkbox-icon {
transition-duration: ${dt('transition.duration')};
color: ${dt('checkbox.icon.color')};
font-size: ${dt('checkbox.icon.size')};
width: ${dt('checkbox.icon.size')};
height: ${dt('checkbox.icon.size')};
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
border-color: ${dt('checkbox.hover.border.color')};
}
.p-checkbox-checked .p-checkbox-box {
border-color: ${dt('checkbox.checked.border.color')};
background: ${dt('checkbox.checked.background')};
}
.p-checkbox-checked .p-checkbox-icon {
color: ${dt('checkbox.icon.checked.color')};
}
.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
background: ${dt('checkbox.checked.hover.background')};
border-color: ${dt('checkbox.checked.hover.border.color')};
}
.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {
color: ${dt('checkbox.icon.checked.hover.color')};
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-checkbox.p-invalid > .p-checkbox-box {
border-color: ${dt('checkbox.invalid.border.color')};
}
.p-checkbox.p-variant-filled .p-checkbox-box {
background: ${dt('checkbox.filled.background')};
}
.p-checkbox-checked.p-variant-filled .p-checkbox-box {
background: ${dt('checkbox.checked.background')};
}
.p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
background: ${dt('checkbox.checked.hover.background')};
}
.p-checkbox.p-disabled {
opacity: 1;
}
.p-checkbox.p-disabled .p-checkbox-box {
background: ${dt('checkbox.disabled.background')};
}
.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
color: ${dt('checkbox.icon.disabled.color')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-checkbox p-component',
@ -17,5 +122,6 @@ const classes = {
export default BaseStyle.extend({
name: 'checkbox',
theme,
classes
});

47
components/lib/chip/style/ChipStyle.js
View File

@ -1,5 +1,51 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-chip {
display: inline-flex;
align-items: center;
background: ${dt('chip.background')};
color: ${dt('chip.color')};
border-radius: 16px;
padding: 0.25rem 0.75rem;
}
.p-chip-label {
line-height: 1.5;
}
.p-chip-icon {
line-height: 1.5;
margin-right: 0.5rem;
}
.p-chip-image {
border-radius: 50%;
width: 2rem;
height: 2rem;
margin-left: -0.5rem;
margin-right: 0.5rem;
}
.p-chip:has(.p-chip-remove-icon) {
padding-right: 0.5rem;
}
.p-chip-remove-icon {
line-height: 1.5;
cursor: pointer;
margin-left: 0.375rem;
border-radius: 6px;
transition: outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-chip-remove-icon:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
`;
const classes = {
root: 'p-chip p-component',
image: 'p-chip-image',
@ -10,5 +56,6 @@ const classes = {
export default BaseStyle.extend({
name: 'chip',
theme,
classes
});

110
components/lib/colorpicker/style/ColorPickerStyle.js
View File

@ -1,5 +1,114 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-colorpicker {
display: inline-block;
position: relative;
}
.p-colorpicker-dragging {
cursor: pointer;
}
.p-colorpicker-preview {
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: 0 none;
border-radius: ${dt('rounded.base')};
transition: outline-color ${dt('transition.duration')};
outline-color: transparent;
cursor: pointer;
}
.p-colorpicker-preview:enabled:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-colorpicker-panel {
background: ${dt('colorpicker.panel.background')};
border: 1px solid ${dt('colorpicker.panel.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
width: 193px;
height: 166px;
position: absolute;
top: 0;
left: 0;
}
.p-colorpicker-panel-inline {
box-shadow: none;
position: static;
}
.p-colorpicker-content {
position: relative;
}
.p-colorpicker-color-selector {
width: 150px;
height: 150px;
top: 8px;
left: 8px;
position: absolute;
}
.p-colorpicker-color-background {
width: 100%;
height: 100%;
background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.p-colorpicker-color-handle {
position: absolute;
top: 0px;
left: 150px;
border-radius: 100%;
width: 10px;
height: 10px;
border-width: 1px;
border-style: solid;
margin: -5px 0 0 -5px;
cursor: pointer;
opacity: 0.85;
border-color: ${dt('colorpicker.handle.color')};
}
.p-colorpicker-hue {
width: 17px;
height: 150px;
top: 8px;
left: 167px;
position: absolute;
opacity: 0.85;
background: linear-gradient(0deg,
red 0,
#ff0 17%,
#0f0 33%,
#0ff 50%,
#00f 67%,
#f0f 83%,
red);
}
.p-colorpicker-hue-handle {
position: absolute;
top: 150px;
left: 0px;
width: 21px;
margin-left: -2px;
margin-top: -5px;
height: 10px;
border-width: 2px;
border-style: solid;
opacity: 0.85;
cursor: pointer;
border-color: ${dt('colorpicker.handle.color')};
}
`;
const classes = {
root: 'p-colorpicker p-component',
input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
@ -20,5 +129,6 @@ const classes = {
export default BaseStyle.extend({
name: 'colorpicker',
theme,
classes
});

13
components/lib/confirmdialog/style/ConfirmDialogStyle.js
View File

@ -1,5 +1,17 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-confirmdialog .p-dialog-content {
display: flex;
align-items: center;
gap: 1rem;
}
.p-confirmdialog-icon {
font-size: 2rem;
}
`;
const classes = {
root: 'p-confirmdialog',
icon: 'p-confirmdialog-icon',
@ -10,5 +22,6 @@ const classes = {
export default BaseStyle.extend({
name: 'confirmdialog',
theme,
classes
});

111
components/lib/confirmpopup/style/ConfirmPopupStyle.js
View File

@ -1,5 +1,115 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-confirmpopup {
position: absolute;
margin-top: 10px;
top: 0;
left: 0;
background: ${dt('confirmpopup.background')};
color: ${dt('confirmpopup.color')};
border: 1px solid ${dt('confirmpopup.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-confirmpopup-content {
display: flex;
align-items: center;
padding: 1rem;
}
.p-confirmpopup-icon {
font-size: 1.5rem;
width: 1.5rem;
height: 1.5rem;
}
.p-confirmpopup-message {
margin-left: 1rem;
}
.p-confirmpopup-footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 0 1rem 1rem 1rem;
}
.p-confirmpopup-footer button {
width: auto;
}
.p-confirmpopup-footer button:last-child {
margin: 0;
}
.p-confirmpopup-flipped {
margin-top: 0;
margin-bottom: 10px;
}
.p-confirmpopup-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-confirmpopup-leave-to {
opacity: 0;
}
.p-confirmpopup-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-confirmpopup-leave-active {
transition: opacity 0.1s linear;
}
.p-confirmpopup:after,
.p-confirmpopup:before {
bottom: 100%;
left: ${dt('{overlay.arrow.left} + 1.25rem', 0)};
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-confirmpopup:after {
border-width: 8px;
margin-left: -8px;
border-style: solid;
border-color: transparent;
border-bottom-color: ${dt('confirmpopup.background')};
}
.p-confirmpopup:before {
border-width: 10px;
margin-left: -10px;
border-style: solid;
border-color: transparent;
border-bottom-color: ${dt('confirmpopup.border.color')};
}
.p-confirmpopup-flipped:after,
.p-confirmpopup-flipped:before {
bottom: auto;
top: 100%;
}
.p-confirmpopup-flipped:after {
border-bottom-color: transparent;
border-top-color: ${dt('confirmpopup.background')};
}
.p-confirmpopup-flipped:before {
border-bottom-color: transparent;
border-top-color: ${dt('confirmpopup.border.color')};
}
`;
const classes = {
root: ({ instance }) => [
'p-confirmpopup p-component',
@ -17,5 +127,6 @@ const classes = {
export default BaseStyle.extend({
name: 'confirmpopup',
theme,
classes
});

124
components/lib/contextmenu/style/ContextMenuStyle.js
View File

@ -1,5 +1,128 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-contextmenu {
padding: 0.25rem 0.25rem;
background: ${dt('contextmenu.background')};
color: ${dt('contextmenu.color')};
border: 1px solid ${dt('contextmenu.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
min-width: 12.5rem;
}
.p-contextmenu-root-list,
.p-contextmenu-submenu {
margin: 0;
padding: 0;
list-style: none;
outline: 0 none;
}
.p-contextmenu-submenu {
position: absolute;
min-width: 100%;
z-index: 1;
padding: 0.25rem 0.25rem;
background: ${dt('contextmenu.background')};
color: ${dt('contextmenu.color')};
border: 1px solid ${dt('contextmenu.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-contextmenu-item {
position: relative;
margin: 2px 0;
}
.p-contextmenu-item:first-child {
margin-top: 0;
}
.p-contextmenu-item:last-child {
margin-bottom: 0;
}
.p-contextmenu-item-content {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')};
color: ${dt('contextmenu.item.color')};
}
.p-contextmenu-item-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: 0.5rem 0.75rem;
user-select: none;
}
.p-contextmenu-item-label {
line-height: 1;
}
.p-contextmenu-item-icon {
color: ${dt('contextmenu.item.icon.color')};
margin-right: 0.5rem;
}
.p-contextmenu-submenu-icon {
color: ${dt('contextmenu.item.icon.color')};
margin-left: auto;
font-size: 0.875rem;
width: 0.875rem;
height: 0.875rem;
}
.p-contextmenu-item.p-focus > .p-contextmenu-item-content {
color: ${dt('contextmenu.item.focus.color')};
background: ${dt('contextmenu.item.focus.background')};
}
.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon,
.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
color: ${dt('contextmenu.item.icon.focus.color')};
}
.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {
color: ${dt('contextmenu.item.focus.color')};
background: ${dt('contextmenu.item.focus.background')};
}
.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon,
.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {
color: ${dt('contextmenu.item.icon.focus.color')};
}
.p-contextmenu-item-active > .p-contextmenu-item-content {
color: ${dt('contextmenu.item.focus.color')};
background: ${dt('contextmenu.item.focus.background')};
}
.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon,
.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
color: ${dt('contextmenu.item.icon.focus.color')};
}
.p-contextmenu-separator {
border-top: 1px solid ${dt('contextmenu.separator.border.color')};
margin: 2px 0;
}
.p-contextmenu-enter-from,
.p-contextmenu-leave-active {
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
}
`;
const classes = {
root: ({ instance }) => [
'p-contextmenu p-component',
@ -27,5 +150,6 @@ const classes = {
export default BaseStyle.extend({
name: 'contextmenu',
theme,
classes
});

581
components/lib/datatable/style/DataTableStyle.js
View File

@ -1,5 +1,585 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-datatable {
position: relative;
}
.p-datatable-table {
border-spacing: 0px;
width: 100%;
}
.p-datatable-sortable-column {
cursor: pointer;
user-select: none;
outline-color: transparent;
}
.p-datatable-column-title,
.p-datatable-sort-icon,
.p-datatable-sort-badge {
vertical-align: middle;
}
.p-datatable-sort-icon {
color: ${dt('datatable.sort.icon.color')};
margin-left: 0.5rem;
transition: color ${dt('transition.duration')};
}
.p-datatable-sort-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
height: 1rem;
min-width: 1rem;
line-height: 1rem;
margin-left: 0.5rem;
}
.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
background: ${dt('datatable.header.cell.hover.background')};
color: ${dt('datatable.header.cell.hover.color')};
}
.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
color: ${dt('datatable.sort.icon.hover.color')};
}
.p-datatable-column-sorted {
background: ${dt('highlight.background')};
color: ${dt('highlight.color')};
}
.p-datatable-sortable-column:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px;
}
.p-datatable-column-sorted .p-datatable-sort-icon {
color: ${dt('highlight.color')};
}
.p-datatable-hoverable .p-datatable-selectable-row {
cursor: pointer;
}
.p-datatable-scrollable > .p-datatable-table-container {
position: relative;
}
.p-datatable-scrollable-table > .p-datatable-thead {
top: 0;
z-index: 1;
}
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
position: sticky;
z-index: 1;
}
.p-datatable-scrollable-table>.p-datatable-tfoot {
bottom: 0;
z-index: 1;
}
.p-datatable-scrollable .p-datatable-frozen-column {
position: sticky;
background: inherit;
}
.p-datatable-scrollable th.p-datatable-frozen-column {
z-index: 1;
}
.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,
.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {
background: ${dt('datatable.header.cell.background')};
}
.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,
.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
background: ${dt('datatable.footer.cell.background')};
}
.p-datatable-flex-scrollable {
display: flex;
flex-direction: column;
height: 100%;
}
.p-datatable-flex-scrollable>.p-datatable-table-container {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header {
position: sticky;
z-index: 1;
}
/* Resizable */
.p-datatable-resizable-table > .p-datatable-thead > tr > th,
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
overflow: hidden;
white-space: nowrap;
}
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {
background-clip: padding-box;
position: relative;
}
.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer {
display: none;
}
.p-datatable-column-resizer {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
}
.p-datatable-column-header-content {
display: flex;
align-items: center;
}
.p-datatable-column-resize-indicator {
width: 1px;
position: absolute;
z-index: 10;
display: none;
background: ${dt('datatable.resizer.color')};
}
.p-datatable-row-reorder-indicator-up,
.p-datatable-row-reorder-indicator-down {
position: absolute;
display: none;
}
.p-datatable-reorderable-column,
.p-datatable-reorderable-row-handle {
cursor: move;
}
.p-datatable-mask {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.p-datatable-inline-filter {
display: flex;
align-items: center;
width: 100%;
gap: 0.5rem;
}
.p-datatable-inline-filter .p-datatable-filter-element-container {
flex: 1 1 auto;
width: 1%;
}
.p-datatable-filter-overlay {
background: ${dt('datatable.filter.overlay.background')};
color: ${dt('datatable.filter.overlay.color')};
border: 1px solid ${dt('datatable.filter.overlay.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
min-width: 12.5rem;
}
.p-datatable-filter-constraint-list {
margin: 0;
list-style: none;
padding: 0.25rem 0.25rem;
}
.p-datatable-filter-constraint {
margin: 2px 0;
padding: 0.5rem 0.75rem;
border: 0 none;
color: ${dt('datatable.filter.matchmode.item.color')};
background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')},;
border-radius: ${dt('rounded.sm')};
cursor: pointer;
}
.p-datatable-filter-constraint:first-child {
margin-top: 0;
}
.p-datatable-filter-constraint:last-child {
margin-bottom: 0;
}
.p-datatable-filter-constraint-selected {
background: ${dt('datatable.filter.matchmode.item.selected.background')};
color: ${dt('datatable.filter.matchmode.item.selected.color')};
}
.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover {
background: ${dt('datatable.filter.matchmode.item.focus.background')};
color: ${dt('datatable.filter.matchmode.item.focus.color')};
}
.p-datatable-filter-constraint:focus-visible {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px;
box-shadow: 0 none;
}
.p-datatable-filter-constraint-separator {
border-top: 1px solid ${dt('datatable.filter.matchmode.item.separator.border.color')};
margin: 2px 0;
}
.p-datatable-popover-filter {
display: inline-flex;
margin-left: auto;
}
.p-datatable-filter-operator {
padding: 0;
}
.p-datatable-filter-rule-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.p-datatable-filter-rule {
padding: 0;
border-bottom: 1px solid ${dt('datatable.filter.constraint.border.color')};
}
.p-datatable-filter-rule:last-child {
border-bottom: 0 none;
}
.p-datatable-filter-constraint-dropdown {
margin-bottom: 0.5rem;
}
.p-datatable-filter-remove-rule-button {
margin-top: 0.5rem;
}
.p-datatable-filter-constraint:last-child .p-datatable-filter-remove-button {
margin-bottom: 0;
}
.p-datatable-filter-overlay-popover {
background: ${dt('datatable.filter.overlay.background')};
color: ${dt('datatable.filter.overlay.color')};
border: 1px solid ${dt('datatable.filter.overlay.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
min-width: 12.5rem;
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.p-datatable-filter-add-rule-button {
padding: 0;
}
.p-datatable-filter-buttonbar {
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.p-datatable-virtualscroller-spacer {
display: flex;
}
.p-datatable .p-virtualscroller .p-virtualscroller-loading {
transform: none !important;
min-height: 0;
position: sticky;
top: 0;
left: 0;
}
.p-datatable-paginator-top {
border: solid ${dt('datatable.header.border.color')};
border-width: 0 0 1px 0;
}
.p-datatable-header {
background: ${dt('datatable.header.background')};
color: ${dt('datatable.header.color')};
border: 1px solid ${dt('datatable.header.border.color')};
border-width: 0 0 1px 0;
padding: 0.75rem 1rem;
font-weight: 600;
}
.p-datatable-footer {
background: ${dt('datatable.footer.background')};
color: ${dt('datatable.footer.color')};
border: 1px solid ${dt('datatable.footer.border.color')};
border-width: 0 0 1px 0;
padding: 0.75rem 1rem;
font-weight: 600;
}
.p-datatable-thead > tr > th {
text-align: left;
padding: 0.75rem 1rem;
background: ${dt('datatable.header.cell.background')};
border: 1px solid ${dt('datatable.header.cell.border.color')};
border-width: 0 0 1px 0;
color: ${dt('datatable.header.cell.color')};
font-weight: 600;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-datatable-tbody > tr {
outline-color: transparent;
background: ${dt('datatable.row.background')};
color: ${dt('datatable.row.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid ${dt('datatable.body.cell.border.color')};
border-width: 0 0 1px 0;
padding: 0.75rem 1rem;
}
.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
background: ${dt('datatable.row.hover.background')};
color: ${dt('datatable.row.hover.color')};
}
.p-datatable-tbody > tr.p-datatable-row-selected {
background: ${dt('highlight.background')};
color: ${dt('highlight.color')};
}
.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {
border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
}
.p-datatable-tbody > tr.p-datatable-row-selectedt > td {
border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
}
.p-datatable-tbody > tr:focus-visible {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: -1px;
}
.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: -1px;
}
.p-datatable-tfoot > tr > td {
text-align: left;
padding: 0.75rem 1rem;
border: 1px solid ${dt('datatable.footer.cell.border.color')};
border-width: 0 0 1px 0;
font-weight: 600;
color: ${dt('datatable.footer.cell.color')};
background: ${dt('datatable.footer.cell.background')};
}
.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')};
}
.p-datatable-tbody>tr.p-datatable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 ${dt('datatable.drop.point.color')};
}
.p-datatable-loading-icon {
font-size: 2rem;
width: 2rem;
height: 2rem;
}
.p-datatable-gridlines .p-datatable-header {
border-width: 1px;
}
.p-datatable-gridlines .p-datatable-footer {
border-width: 0 1px 1px 1px;
}
.p-datatable-gridlines .p-datatable-paginator-top {
border-width: 0 1px 0 1px;
}
.p-datatable-gridlines .p-datatable-paginator-bottom {
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: ${dt('datatable.footer.border.color')};
}
.p-datatable-gridlines .p-datatable-thead > tr > th {
border-width: 1px 0 1px 1px;
}
.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
border-width: 1px;
}
.p-datatable-gridlines .p-datatable-tbody > tr > td {
border-width: 1px 0 0 1px;
}
.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
border-width: 1px 1px 0 1px;
}
p-datatable-gridlines .p-datatable-tbody > tr:last-child>td {
border-width: 1px 0 1px 1px;
}
.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
border-width: 1px;
}
.p-datatable-gridlines .p-datatable-tfoot>tr>td {
border-width: 1px 0 1px 1px;
}
.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
border-width: 1px 1px 1px 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-thead +.p-datatable-tfoot > tr > td {
border-width: 0 0 1px 1px;
}
.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
border-width: 0 1px 1px 1px;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
border-width: 0 0 1px 1px;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
border-width: 0 1px 1px 1px;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
border-width: 0 0 0 1px;
}
.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
border-width: 0 1px 0 1px;
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
background: ${dt('datatable.row.striped.background')});
}
.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
background: ${dt('highlight.background')});
color: ${dt('highlight.color')});
}
.p-datatable.p-datatable-sm .p-datatable-header {
padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-sm .p-datatable-footer {
padding: 0.375rem 0.5rem;
}
.p-datatable.p-datatable-lg .p-datatable-header {
padding: 0.9375rem 1.25rem;
}
.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
padding: 0.9375rem 1.25rem;
}
.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td {
padding: 0.9375rem 1.25rem;
}
.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td {
padding: 0.9375rem 1.25rem;
}
.p-datatable.p-datatable-lg .p-datatable-footer {
padding: 0.9375rem 1.25rem;
}
.p-datatable-row-toggle-button {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: 1.75rem;
height: 1.75rem;
color: ${dt('datatable.row.action.color')};
border: 0 none;
background: transparent;
cursor: pointer;
border-radius: 50%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
user-select: none;
}
.p-datatable-row-toggle-button:enabled:hover {
color: ${dt('datatable.row.action.hover.color')};
background: ${dt('datatable.row.action.hover.background')};
}
.p-datatable-row-toggle-button:focus-visible {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px;
}
.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover{
background: ${dt('datatable.row.action.highlight.hover.background')};
color: inherit;
}
`;
const classes = {
root: ({ props }) => [
'p-datatable p-component',
@ -152,6 +732,7 @@ const inlineStyles = {
export default BaseStyle.extend({
name: 'datatable',
theme,
classes,
inlineStyles
});

34
components/lib/dataview/style/DataViewStyle.js
View File

@ -1,5 +1,38 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-dataview-header {
background: ${dt('dataview.header.background')};
color: ${dt('dataview.header.color')};
border: 1px solid ${dt('dataview.header.border.color')};
border-width: 0 0 1px 0;
padding: 0.75rem 1rem;
}
.p-dataview-content {
background: ${dt('dataview.content.background')};
color: ${dt('dataview.content.color')};
}
.p-dataview-footer {
background: ${dt('dataview.footer.background')};
color: ${dt('dataview.footer.color')};
border: 1px solid ${dt('dataview.footer.border.color')};
border-width: 1px 0 0 0;
padding: 0.75rem 1rem;
}
.p-dataview-paginator-top {
border: solid ${dt('dataview.header.border.color')};
border-width: 0 0 1px 0;
}
.p-dataview-paginator-bottom {
border: solid ${dt('dataview.footer.border.color')};
border-width: 1px 0 0 0;
}
`;
const classes = {
root: ({ props }) => [
'p-dataview p-component',
@ -17,5 +50,6 @@ const classes = {
export default BaseStyle.extend({
name: 'dataview',
theme,
classes
});

337
components/lib/datepicker/style/DatePickerStyle.js
View File

@ -1,5 +1,341 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-datepicker {
display: inline-flex;
max-width: 100%;
}
.p-datepicker-input {
flex: 1 1 auto;
width: 1%;
}
.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-datepicker-dropdown {
cursor: pointer;
display: inline-flex;
cursor: pointer;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('datepicker.dropdown.width')};
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
background: ${dt('datepicker.dropdown.background')};
border: 1px solid ${dt('datepicker.dropdown.border.color')};
border-left: 0 none;
background: ${dt('datepicker.dropdown.background')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-datepicker-dropdown:not(:disabled):hover {
background: ${dt('datepicker.dropdown.hover.background')};
border-color: ${dt('datepicker.dropdown.hover.border.color')};
background: ${dt('datepicker.dropdown.hover.background')};
}
.p-datepicker-dropdown:not(:disabled):active {
background: ${dt('datepicker.dropdown.active.background')};
border-color: ${dt('datepicker.dropdown.active.border.color')};
background: ${dt('datepicker.dropdown.active.background')};
}
.p-datepicker-dropdown:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-datepicker:has(.p-datepicker-input-icon) {
position: relative;
}
.p-datepicker:has(.p-datepicker-input-icon) .p-datepicker-input {
padding-right: 2.5rem;
}
.p-datepicker-input-icon {
cursor: pointer;
position: absolute;
top: 50%;
right: .75rem;
margin-top: -.5rem;
}
.p-fluid .p-datepicker {
display: flex;
}
.p-fluid .p-datepicker-input {
width: 1%;
}
.p-datepicker .p-datepicker-panel {
min-width: 100%;
}
.p-datepicker-panel {
width: auto;
padding: 0.75rem;
background: ${dt('datepicker.background')};
color: ${dt('datepicker.color')};
border: 1px solid ${dt('datepicker.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-datepicker-panel-inline {
display: inline-block;
overflow-x: auto;
box-shadow: none;
}
.p-datepicker-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 0.5rem 0;
font-weight: 500;
background: ${dt('datepicker.header.background')};
color: ${dt('datepicker.header.color')};
border-bottom: 1px solid ${dt('datepicker.header.border.color')};
}
.p-datepicker-title {
margin: 0 auto;
line-height: 1.75rem;
}
.p-datepicker-view-year,
.p-datepicker-view-month {
font-weight: 500;
padding: 0.25rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-datepicker-view-month {
margin-right: 0.5rem;
color: ${dt('datepicker.month.picker.color')};
}
.p-datepicker-view-year {
margin-right: 0.5rem;
color: ${dt('datepicker.year.picker.color')};
}
.p-datepicker-view-month:enabled:hover {
background: ${dt('datepicker.month.picker.hover.background')};
color: ${dt('datepicker.month.picker.hover.color')};
}
.p-datepicker-view-year:enabled:hover {
background: ${dt('datepicker.year.picker.hover.background')};
color: ${dt('datepicker.year.picker.hover.color')};
}
.p-datepicker-datepicker-container {
display: flex;
}
.p-datepicker-datepicker-container .p-datepicker-datepicker {
flex: 1 1 auto;
border-left: 1px solid ${dt('datepicker.group.border.color')};
padding-right: 0.75rem;
padding-left: 0.75rem;
padding-top: 0;
padding-bottom: 0;
}
.p-datepicker-datepicker-container .p-datepicker-datepicker:first-child {
padding-left: 0;
border-left: 0 none;
}
.p-datepicker-datepicker-container .p-datepicker-datepicker:last-child {
padding-right: 0;
}
.p-datepicker-day-view {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
margin: 0.5rem 0 0 0;
}
.p-datepicker-weekday-cell {
padding: 0.25rem;
}
.p-datepicker-weekday {
font-weight: 500;
}
.p-datepicker-day-cell {
padding: 0.25rem;
}
.p-datepicker-day {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 2rem;
height: 2rem;
border-radius: 50%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border: 1px solid transparent;
outline-color: transparent;
color: ${dt('datepicker.date.color')};
}
.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
background: ${dt('datepicker.date.hover.background')};
color: ${dt('datepicker.date.hover.color')};
}
.p-datepicker-day:focus-visible {
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-datepicker-day-selected {
background: ${dt('datepicker.date.selected.background')};
color: ${dt('datepicker.date.selected.color')};
}
.p-datepicker-today > .p-datepicker-day {
background: ${dt('datepicker.today.background')};
color: ${dt('datepicker.today.color')};
}
.p-datepicker-today > .p-datepicker-day-selected {
background: ${dt('datepicker.date.selected.background')};
color: ${dt('datepicker.date.selected.color')};
}
.p-datepicker-month-view {
margin: 0.5rem 0 0 0;
}
.p-datepicker-month {
width: 33.3%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
padding: 0.25rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
color: ${dt('datepicker.month.color')};
}
.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
color: ${dt('datepicker.month.hover.color')};
background: ${dt('datepicker.month.hover.background')};
}
.p-datepicker-month-selected {
color: ${dt('datepicker.month.selected.color')};
background: ${dt('datepicker.month.selected.background')};
}
.p-datepicker-month:not(.p-disabled):focus-visible {
outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
outline-offset: 0;
}
.p-datepicker-year-view {
margin: 0.5rem 0 0 0;
}
.p-datepicker-year {
width: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
padding: 0.25rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
color: ${dt('datepicker.year.color')};
}
.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
color: ${dt('datepicker.year.hover.color')};
background: ${dt('datepicker.year.hover.background')};
}
.p-datepicker-year-selected {
color: ${dt('datepicker.year.selected.color')};
background: ${dt('datepicker.year.selected.background')};
}
.p-datepicker-year:not(.p-disabled):focus-visible {
outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
outline-offset: 0;
}
.p-datepicker-buttonbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0 0 0;
border-top: 1px solid ${dt('datepicker.buttonbar.border.color')};
}
.p-datepicker-buttonbar .p-button {
width: auto;
}
.p-datepicker-time-picker {
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid ${dt('datepicker.timepicker.border.color')};
padding: 0;
}
.p-datepicker-datepicker-group + .p-timepicker {
margin-top: 0.5rem;
padding-top: 0.5rem;
}
.p-datepicker-time-picker > div {
display: flex;
align-items: center;
flex-direction: column;
padding: 0 0.5rem;
}
.p-datepicker-time-picker button:last-child {
margin-top: 0.2em;
}
.p-datepicker-time-picker span {
font-size: 1rem;
}
.p-datepicker-timeonly .p-datepicker-time-picker {
border-top: 0 none;
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
@ -63,6 +399,7 @@ const classes = {
export default BaseStyle.extend({
name: 'datepicker',
theme,
classes,
inlineStyles
});

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

@ -1,5 +1,84 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-divider-horizontal {
display: flex;
width: 100%;
position: relative;
align-items: center;
margin: 1rem 0;
padding: 0 1rem;
}
.p-divider-horizontal:before {
position: absolute;
display: block;
top: 50%;
left: 0;
width: 100%;
content: "";
border-top: 1px solid ${dt('divider.border.color')};
}
.p-divider-horizontal .p-divider-content {
padding: 0 0.5rem;
}
.p-divider-vertical {
min-height: 100%;
margin: 0 1rem;
display: flex;
position: relative;
justify-content: center;
margin: 0 1rem;
padding: 1rem 0;
}
.p-divider-vertical:before {
position: absolute;
display: block;
top: 0;
left: 50%;
height: 100%;
content: "";
border-left: 1px solid ${dt('divider.border.color')};
}
.p-divider.p-divider-vertical .p-divider-content {
padding: 0.5rem 0;
}
.p-divider-content {
z-index: 1;
background: ${dt('divider.content.background')};
color: ${dt('divider.content.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;
}
`;
/* Position */
const inlineStyles = {
root: ({ props }) => ({
@ -25,6 +104,7 @@ const classes = {
export default BaseStyle.extend({
name: 'divider',
theme,
classes,
inlineStyles
});

126
components/lib/dock/style/DockStyle.js
View File

@ -1,5 +1,130 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-dock {
position: absolute;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.p-dock-list-container {
display: flex;
pointer-events: auto;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
.p-dock-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
outline: 0 none;
}
.p-dock-item {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
padding: 0.5rem;
border-radius: 6px;
}
.p-dock-item.p-focus {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-dock-item-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: default;
width: 3rem;
height: 3rem;
}
.p-dock-top {
left: 0;
top: 0;
width: 100%;
}
.p-dock-top .p-dock-item {
transform-origin: center top;
}
.p-dock-bottom {
left: 0;
bottom: 0;
width: 100%;
}
.p-dock-bottom .p-dock-item {
transform-origin: center bottom;
}
.p-dock-right {
right: 0;
top: 0;
height: 100%;
}
.p-dock-right .p-dock-item {
transform-origin: center right;
}
.p-dock-right .p-dock-list {
flex-direction: column;
}
.p-dock-left {
left: 0;
top: 0;
height: 100%;
}
.p-dock-left .p-dock-item {
transform-origin: center left;
}
.p-dock-left .p-dock-list {
flex-direction: column;
}
.p-dock-mobile.p-dock-top .p-dock-list-container,
.p-dock-mobile.p-dock-bottom .p-dock-list-container {
overflow-x: auto;
width: 100%;
}
.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,
.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
margin: 0 auto;
}
.p-dock-mobile.p-dock-left .p-dock-list-container,
.p-dock-mobile.p-dock-right .p-dock-list-container {
overflow-y: auto;
height: 100%;
}
.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,
.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
margin: auto 0;
}
.p-dock-mobile .p-dock-list .p-dock-item {
transform: none;
margin: 0;
}
`;
const classes = {
root: ({ instance, props }) => [
'p-dock p-component',
@ -24,5 +149,6 @@ const classes = {
export default BaseStyle.extend({
name: 'dock',
theme,
classes
});

151
components/lib/drawer/style/DrawerStyle.js
View File

@ -1,5 +1,155 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-drawer {
display: flex;
flex-direction: column;
pointer-events: auto;
transform: translate3d(0px, 0px, 0px);
position: relative;
transition: transform 0.3s;
background: ${dt('drawer.background')};
color: ${dt('drawer.color')};
border: 1px solid ${dt('drawer.border.color')};
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.p-drawer-content {
overflow-y: auto;
flex-grow: 1;
padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
padding: 1.125rem;
}
.p-drawer-title {
font-weight: 600;
font-size: 1.25rem;
}
.p-drawer-full .p-drawer {
transition: none;
transform: none;
width: 100vw !important;
height: 100vh !important;
max-height: 100%;
top: 0px !important;
left: 0px !important;
border-width: 1px;
}
.p-drawer-left .p-drawer-enter-from,
.p-drawer-left .p-drawer-leave-to {
transform: translateX(-100%);
}
.p-drawer-right .p-drawer-enter-from,
.p-drawer-right .p-drawer-leave-to {
transform: translateX(100%);
}
.p-drawer-top .p-drawer-enter-from,
.p-drawer-top .p-drawer-leave-to {
transform: translateY(-100%);
}
.p-drawer-bottom .p-drawer-enter-from,
.p-drawer-bottom .p-drawer-leave-to {
transform: translateY(100%);
}
.p-drawer-full .p-drawer-enter-from,
.p-drawer-full .p-drawer-leave-to {
opacity: 0;
}
.p-drawer-full .p-drawer-enter-active,
.p-drawer-full .p-drawer-leave-active {
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.p-drawer-left .p-drawer {
width: 20rem;
height: 100%;
border-right-width: 1px;
}
.p-drawer-right .p-drawer {
width: 20rem;
height: 100%;
border-left-width: 1px;
}
.p-drawer-top .p-drawer {
height: 10rem;
width: 100%;
border-bottom-width: 1px;
}
.p-drawer-bottom .p-drawer {
height: 10rem;
width: 100%;
border-top-width: 1px;
}
.p-drawer-left .p-drawer-sm,
.p-drawer-right .p-drawer-sm {
width: 20rem;
}
.p-drawer-left .p-drawer-md,
.p-drawer-right .p-drawer-md {
width: 40rem;
}
.p-drawer-left .p-drawer-lg,
.p-drawer-right .p-drawer-lg {
width: 60rem;
}
.p-drawer-top .p-drawer-sm,
.p-drawer-bottom .p-drawer-sm {
height: 10rem;
}
.p-drawer-top .p-drawer-md,
.p-drawer-bottom .p-drawer-md {
height: 20rem;
}
.p-drawer-top .p-drawer-lg,
.p-drawer-bottom .p-drawer-lg {
height: 30rem;
}
.p-drawer-left .p-drawer-content,
.p-drawer-right .p-drawer-content,
.p-drawer-top .p-drawer-content,
.p-drawer-bottom .p-drawer-content {
width: 100%;
height: 100%;
}
@media screen and (max-width: 64em) {
.p-drawer-left .p-drawer-lg,
.p-drawer-left .p-drawer-md,
.p-drawer-right .p-drawer-lg,
.p-drawer-right .p-drawer-md {
width: 20rem;
}
}
.p-drawer-open {
display: flex;
}
`;
const inlineStyles = {
mask: ({ position }) => ({
position: 'fixed',
@ -43,6 +193,7 @@ const classes = {
export default BaseStyle.extend({
name: 'drawer',
theme,
classes,
inlineStyles
});

1072
components/lib/editor/style/EditorStyle.js
View File

File diff suppressed because it is too large Load Diff

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

@ -1,5 +1,68 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-fieldset {
background: ${dt('fieldset.background')};
border: 1px solid ${dt('fieldset.border.color')};
border-radius: ${dt('rounded.base')};
color: ${dt('fieldset.color')};
padding: 0 1.125rem 1.125rem 1.125rem;
margin: 0;
}
.p-fieldset-legend {
font-weight: 600;
border-radius: 6px;
border: 0 none;
padding: 0.5rem 0.75rem;
margin-bottom: 0.375rem;
}
.p-fieldset-toggleable > .p-fieldset-legend {
padding: 0;
}
.p-fieldset-toggleable > .p-fieldset-legend > a {
cursor: pointer;
user-select: none;
overflow: hidden;
position: relative;
text-decoration: none;
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
color: ${dt('fieldset.legend.color')};
border-radius: ${dt('rounded.base')};
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-fieldset-toggleable > .p-fieldset-legend > a:hover {
color: ${dt('fieldset.legend.hover.color')};
background: ${dt('fieldset.legend.hover.background')};
}
.p-fieldset-toggle-icon {
color: ${dt('fieldset.toggle.icon.color')};
transition: color ${dt('transition.duration')};
}
.p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggle-icon {
color: ${dt('fieldset.toggle.icon.hover.color')};
}
.p-fieldset .p-fieldset-content {
padding: 0;
}
`;
const classes = {
root: ({ props }) => [
'p-fieldset p-component',
@ -16,5 +79,6 @@ const classes = {
export default BaseStyle.extend({
name: 'fieldset',
theme,
classes
});

79
components/lib/fileupload/style/FileUploadStyle.js
View File

@ -1,5 +1,83 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-fileupload input[type="file"] {
display: none;
}
.p-fileupload-advanced {
border: 1px solid ${dt('fileupload.border.color')};
border-radius: ${dt('rounded.base')};
background: ${dt('fileupload.background')};
color: ${dt('fileupload.color')};
}
.p-fileupload-header {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 1.125rem;
gap: 0.5rem;
}
.p-fileupload-content {
border: 1px solid transparent;
position: relative;
padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-fileupload-content .p-progressbar {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 0.25rem;
}
.p-fileupload-file-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1.125rem;
}
.p-fileupload-file {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 1rem;
border-bottom: 1px solid ${dt('fileupload.file.border.color')};
gap: 0.5rem;
}
.p-fileupload-file:last-child {
border-bottom: 0;
}
.p-fileupload-file-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.p-fileupload-file-thumbnail {
flex-shrink: 0;
}
.p-fileupload-file-actions {
margin-left: auto;
}
.p-fileupload-highlight {
border: 1px dashed ${dt('fileupload.content.highlight.border.color')};
background: ${dt('fileupload.content.highlight.background')};
}
.p-fileupload-advanced .p-message {
margin-top: 0;
}
`;
const classes = {
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
header: 'p-fileupload-header',
@ -20,5 +98,6 @@ const classes = {
export default BaseStyle.extend({
name: 'fileupload',
theme,
classes
});

57
components/lib/floatlabel/style/FloatLabelStyle.js
View File

@ -1,10 +1,67 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-float-label {
display: block;
position: relative;
}
.p-float-label label {
position: absolute;
pointer-events: none;
top: 50%;
margin-top: -.5rem;
transition-property: all;
transition-timing-function: ease;
line-height: 1;
left: 0.75rem;
color: ${dt('floatlabel.color')};
transition-duration: ${dt('transition.duration')};
}
.p-float-label:has(textarea) label {
top: 1rem;
}
.p-float-label:has(input:focus) label,
.p-float-label:has(input.p-filled) label,
.p-float-label:has(input:-webkit-autofill) label,
.p-float-label:has(textarea:focus) label,
.p-float-label:has(textarea.p-filled) label,
.p-float-label:has(.p-inputwrapper-focus) label,
.p-float-label:has(.p-inputwrapper-filled) label {
top: -.75rem;
font-size: 12px;
color: ${dt('floatlabel.focus.color')};
}
.p-float-label .p-placeholder,
.p-float-label input::placeholder,
.p-float-label .p-inputtext::placeholder {
opacity: 0;
transition-property: all;
transition-timing-function: ease;
}
.p-float-label .p-focus .p-placeholder,
.p-float-label input:focus::placeholder,
.p-float-label .p-inputtext:focus::placeholder {
opacity: 1;
transition-property: all;
transition-timing-function: ease;
}
.p-float-label > .p-invalid + label {
color: ${dt('floatlabel.invalid.color')};
}
`;
const classes = {
root: 'p-float-label'
};
export default BaseStyle.extend({
name: 'floatlabel',
theme,
classes
});

406
components/lib/galleria/style/GalleriaStyle.js
View File

@ -1,5 +1,410 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-galleria-content {
display: flex;
flex-direction: column;
}
.p-galleria-items-container {
display: flex;
flex-direction: column;
position: relative;
}
.p-galleria-items {
position: relative;
display: flex;
height: 100%;
}
.p-galleria-navigate-button {
position: absolute;
top: 50%;
margin-top: -0.5rem;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: transparent;
color: ${dt('galleria.navigator.color')};
width: 3rem;
height: 3rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: 50%;
margin: 0 0.5rem;
padding: 0;
user-select: none;
border: none;
cursor: pointer;
}
.p-galleria-navigate-button:not(.p-disabled):hover {
background: ${dt('galleria.navigator.hover.background')};
}
.p-galleria-next-icon,
.p-galleria-prev-icon {
font-size: 1.5rem;
width: 1.5rem;
height: 1.5rem;
}
.p-galleria-prev-button {
left: 0;
}
.p-galleria-next-button {
right: 0;
}
.p-galleria-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.p-galleria-hover-navigators .p-galleria-navigate-button {
pointer-events: none;
opacity: 0;
transition: opacity ${dt('transition.duration')} ease-in-out;
}
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button {
pointer-events: all;
opacity: 1;
}
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button.p-disabled {
pointer-events: none;
}
.p-galleria-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: ${dt('galleria.caption.background')};
color: ${dt('galleria.caption.color')};
padding: 1rem;
}
.p-galleria-thumbnails {
display: flex;
flex-direction: column;
overflow: auto;
flex-shrink: 0;
}
.p-galleria-thumbnail-prev-button,
.p-galleria-thumbnail-next-button {
align-self: center;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
margin: 0.5rem;
padding: 0;
border: none;
user-select: none;
cursor: pointer;
background: transparent;
color: ${dt('galleria.thumbnail.navigator.color')};
width: 2rem;
height: 2rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
border-radius: 50%;
}
.p-galleria-thumbnail-prev-button:hover,
.p-galleria-thumbnail-next-button:hover {
background: ${dt('galleria.thumbnail.navigator.hover.background')};
color: ${dt('galleria.thumbnail.navigator.hover.color')};
}
.p-galleria-thumbnail-prev-button:focus-visible,
.p-galleria-thumbnail-next-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-galleria-thumbnail-prev-button span,
.p-galleria-thumbnail-next-button span {
display: flex;
justify-content: center;
align-items: center;
}
.p-galleria-thumbnails-content {
display: flex;
flex-direction: row;
background: ${dt('galleria.thumbnail.container.background')};
padding: 1rem 0.25rem;
}
.p-galleria-thumbnails-viewport {
overflow: hidden;
width: 100%;
}
.p-galleria-thumbnail-items {
display: flex;
}
.p-galleria-thumbnail-item {
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.5;
}
.p-galleria-thumbnail {
outline-color: transparent;
}
.p-galleria-thumbnail:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-galleria-thumbnail-item:hover {
opacity: 1;
transition: opacity 0.3s;
}
.p-galleria-thumbnail-item-current {
opacity: 1;
}
.p-galleria-thumbnails-left .p-galleria-content,
.p-galleria-thumbnails-right .p-galleria-content {
flex-direction: row;
}
.p-galleria-thumbnails-left .p-galleria-items-container,
.p-galleria-thumbnails-right .p-galleria-items-container {
flex-direction: row;
}
.p-galleria-thumbnails-left .p-galleria-items-container,
.p-galleria-thumbnails-top .p-galleria-items-container {
order: 2;
}
.p-galleria-thumbnails-left .p-galleria-thumbnails,
.p-galleria-thumbnails-top .p-galleria-thumbnails {
order: 1;
}
.p-galleria-thumbnails-left .p-galleria-thumbnails-content,
.p-galleria-thumbnails-right .p-galleria-thumbnails-content {
flex-direction: column;
flex-grow: 1;
}
.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
flex-direction: column;
height: 100%;
}
.p-galleria-indicator-list {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
gap: 0.5rem;
margin: 0;
list-style: none;
}
.p-galleria-indicator-button {
display: inline-flex;
align-items: center;
background: ${dt('galleria.indicator.background')};
width: 1rem;
height: 1rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
border-radius: 50%;
margin: 0;
padding: 0;
border: none;
user-select: none;
cursor: pointer;
}
.p-galleria-indicator-button:hover {
background: ${dt('galleria.indicator.hover.background')};
}
.p-galleria-indicator-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-galleria-indicator-active .p-galleria-indicator-button {
background-color: ${dt('galleria.indicator.active.background')};
}
.p-galleria-indicators-left .p-galleria-items-container,
.p-galleria-indicators-right .p-galleria-items-container {
flex-direction: row;
align-items: center;
}
.p-galleria-indicators-left .p-galleria-items,
.p-galleria-indicators-top .p-galleria-items {
order: 2;
}
.p-galleria-indicators-left .p-galleria-indicator-list,
.p-galleria-indicators-top .p-galleria-indicator-list {
order: 1;
}
.p-galleria-indicators-left .p-galleria-indicator-list,
.p-galleria-indicators-right .p-galleria-indicator-list {
flex-direction: column;
}
.p-galleria-inset-indicators .p-galleria-indicator-list {
position: absolute;
display: flex;
z-index: 1;
background: ${dt('galleria.inset.indicators.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-button:hover {
background: ${dt('galleria.inset.indicator.hover.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.active.background')};
}
.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
top: 0;
left: 0;
width: 100%;
align-items: flex-start;
}
.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
right: 0;
top: 0;
height: 100%;
align-items: flex-end;
}
.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
bottom: 0;
left: 0;
width: 100%;
align-items: flex-end;
}
.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
left: 0;
top: 0;
height: 100%;
align-items: flex-start;
}
.p-galleria-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--p-mask-background: ${dt('galleria.mask.background')};
}
.p-galleria-close-button {
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin: 0.5rem;
background: transparent;
color: ${dt('galleria.close.color')};
width: 3rem;
height: 3rem;
padding: 0;
border: none;
user-select: none;
cursor: pointer;
border-radius: 50%;
outline-color: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-galleria-close-icon {
font-size: 1.5rem;
width: 1.5rem;
height: 1.5rem;
}
.p-galleria-close-button:hover {
background: ${dt('galleria.close.hover.background')};
color: ${dt('galleria.close.hover.color')};
}
.p-galleria-close-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-galleria-mask .p-galleria-navigate-button {
position: fixed;
top: 50%;
margin-top: -0.5rem;
}
.p-galleria-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-galleria-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-galleria-enter-from,
.p-galleria-leave-to {
opacity: 0;
transform: scale(0.7);
}
.p-galleria-enter-active .p-galleria-navigate-button {
opacity: 0;
}
.p-items-hidden .p-galleria-thumbnail-item {
visibility: hidden;
}
.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
visibility: visible;
}
`;
const classes = {
mask: ({ instance }) => [
'p-galleria-mask p-component-overlay p-component-overlay-enter',
@ -85,5 +490,6 @@ const classes = {
export default BaseStyle.extend({
name: 'galleria',
theme,
classes
});

30
components/lib/iconfield/style/IconFieldStyle.js
View File

@ -1,10 +1,40 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-iconfield {
position: relative;
}
.p-inputicon {
position: absolute;
top: 50%;
margin-top: -.5rem;
color: ${dt('iconfield.color')};
}
.p-iconfield .p-inputicon:first-child {
left: 0.75rem;
}
.p-iconfield .p-inputicon:last-child {
right: 0.75rem;
}
.p-iconfield .p-inputtext:last-child {
padding-left: 2.5rem;
}
.p-iconfield .p-inputtext:first-child {
padding-right: 2.5rem;
}
`;
const classes = {
root: 'p-iconfield'
};
export default BaseStyle.extend({
name: 'iconfield',
theme,
classes
});

95
components/lib/inlinemessage/style/InlineMessageStyle.js
View File

@ -1,5 +1,99 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-inline-message {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: ${dt('rounded.base')};
}
.p-inline-message-text {
font-weight: 500;
}
.p-inline-message-icon {
flex-shrink: 0;
margin-right: 0.5rem;
}
.p-inline-message-icon-only .p-inline-message-text {
visibility: hidden;
width: 0;
}
.p-fluid .p-inline-message {
display: flex;
}
.p-inline-message-info {
background: ${dt('inlinemessage.info.background')};
border: 1px solid ${dt('inlinemessage.info.border.color')};
color: ${dt('inlinemessage.info.color')};
box-shadow: ${dt('inlinemessage.info.box.shadow')};
}
.p-inline-message-info .p-inline-message-icon {
color: ${dt('inlinemessage.info.color')};
}
.p-inline-message-success {
background: ${dt('inlinemessage.success.background')};
border: 1px solid ${dt('inlinemessage.success.border.color')};
color: ${dt('inlinemessage.success.color')};
box-shadow: ${dt('inlinemessage.success.box.shadow')};
}
.p-inline-message-success .p-inline-message-icon {
color: ${dt('inlinemessage.success.color')};
}
.p-inline-message-warn {
background: ${dt('inlinemessage.warn.background')};
border: 1px solid ${dt('inlinemessage.warn.border.color')};
color: ${dt('inlinemessage.warn.color')};
box-shadow: ${dt('inlinemessage.warn.box.shadow')};
}
.p-inline-message-warn .p-inline-message-icon {
color: ${dt('inlinemessage.warn.color')};
}
.p-inline-message-error {
background: ${dt('inlinemessage.error.background')};
border: 1px solid ${dt('inlinemessage.error.border.color')};
color: ${dt('inlinemessage.error.color')};
box-shadow: ${dt('inlinemessage.error.box.shadow')};
}
.p-inline-message-error .p-inline-message-icon {
color: ${dt('inlinemessage.error.color')};
}
.p-inline-message-secondary {
background: ${dt('inlinemessage.secondary.background')};
border: 1px solid ${dt('inlinemessage.secondary.border.color')};
color: ${dt('inlinemessage.secondary.color')};
box-shadow: ${dt('inlinemessage.secondary.box.shadow')};
}
.p-inline-message-secondary .p-inline-message-icon {
color: ${dt('inlinemessage.secondary.color')};
}
.p-inline-message-contrast {
background: ${dt('inlinemessage.contrast.background')};
border: 1px solid ${dt('inlinemessage.contrast.border.color')};
color: ${dt('inlinemessage.contrast.color')};
box-shadow: ${dt('inlinemessage.contrast.box.shadow')};
}
.p-inline-message-contrast .p-inline-message-icon {
color: ${dt('inlinemessage.contrast.color')};
}
.p-inline-message-icon-only .p-inline-message-icon {
margin-right: 0;
}
`;
const classes = {
root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }],
icon: ({ props }) => ['p-inline-message-icon', props.icon],
@ -8,5 +102,6 @@ const classes = {
export default BaseStyle.extend({
name: 'inlinemessage',
theme,
classes
});

26
components/lib/inplace/style/InplaceStyle.js
View File

@ -1,5 +1,30 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-inplace-display {
display: inline;
cursor: pointer;
padding: 0.5rem 0.75rem;
border-radius: ${dt('rounded.base')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-inplace-display:not(.p-disabled):hover {
background: ${dt('inplace.display.hover.background')};
color: ${dt('inplace.display.hover.color')};
}
.p-inplace-display:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-inplace-content {
display: inline;
}
`;
const classes = {
root: 'p-inplace p-component',
display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],
@ -8,5 +33,6 @@ const classes = {
export default BaseStyle.extend({
name: 'inplace',
theme,
classes
});

85
components/lib/inputchips/style/InputChipsStyle.js
View File

@ -1,5 +1,89 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-inputchips {
display: inline-flex;
}
.p-inputchips-input {
margin: 0;
padding: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0.25rem 0.25rem;
gap: 0.25rem;
color: ${dt('inputchips.color')};
background: ${dt('inputchips.background')};
border: 1px solid ${dt('inputchips.border.color')};
border-radius: ${dt('rounded.base')};
width: 100%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
box-shadow: ${dt('inputchips.box.shadow')};
}
.p-inputchips:not(.p-disabled):hover .p-inputchips-input {
border-color: ${dt('inputchips.hover.border.color')};
}
.p-inputchips:not(.p-disabled).p-focus .p-inputchips-input {
border-color: ${dt('inputchips.focus.border.color')};
outline: 0 none;
}
.p-inputinputchips.p-invalid .p-inputchips-input {
border-color: ${dt('inputchips.invalid.border.color')};
}
.p-variant-filled.p-inputchips-input {
background: ${dt('inputchips.filled.background')};
}
.p-inputchips:not(.p-disabled).p-focus .p-variant-filled.p-inputchips-input {
background: ${dt('inputchips.filled.focus.background')};
}
.p-inputinputchips.p-disabled .p-inputchips-input {
opacity: 1;
background: ${dt('inputchips.disabled.background')};
color: ${dt('inputchips.disabled.color')};
}
.p-inputchips-input-item {
padding: 0.25rem 0;
margin-left: 0.5rem;
flex: 1 1 auto;
display: inline-flex;
}
.p-inputchips-input-item input {
border: 0 none;
outline: 0 none;
background: transparent;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
width: 100%;
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
color: inherit;
}
.p-inputchips-input-item input::placeholder {
color: ${dt('inputchips.placeholder.color')};
}
.p-fluid .p-inputchips {
display: flex;
}
`;
const classes = {
root: ({ instance, props }) => [
'p-inputchips p-component p-inputwrapper',
@ -25,5 +109,6 @@ const classes = {
export default BaseStyle.extend({
name: 'inputchips',
theme,
classes
});

102
components/lib/inputgroup/style/InputGroupStyle.js
View File

@ -1,10 +1,112 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-inputgroup {
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup-addon {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background: ${dt('inputgroup.addon.background')};
color: ${dt('inputgroup.addon.color')};
border-top: 1px solid ${dt('inputgroup.addon.border.color')};
border-left: 1px solid ${dt('inputgroup.addon.border.color')};
border-bottom: 1px solid ${dt('inputgroup.addon.border.color')};
padding: 0.5rem 0.75rem;
min-width: 2.5rem;
}
.p-inputgroup .p-float-label {
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup .p-inputtext,
.p-fluid .p-inputgroup .p-inputtext,
.p-inputgroup .p-inputwrapper,
.p-fluid .p-inputgroup .p-input {
flex: 1 1 auto;
width: 1%;
}
.p-inputgroup-addon:last-child {
border-right: 1px solid ${dt('inputgroup.addon.border.color')};
}
.p-inputgroup > .p-component,
.p-inputgroup > .p-inputwrapper > .p-inputtext,
.p-inputgroup > .p-float-label > .p-component {
border-radius: 0;
margin: 0;
}
.p-inputgroup > .p-component + .p-inputgroup-addon,
.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
border-left: 0 none;
}
.p-inputgroup > .p-component:focus,
.p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
.p-inputgroup > .p-float-label > .p-component:focus {
z-index: 1;
}
.p-inputgroup > .p-component:focus ~ label,
.p-inputgroup > .p-inputwrapper > .p-inputtext:focus~label,
.p-inputgroup > .p-float-label > .p-component:focus~label {
z-index: 1;
}
.p-inputgroup-addon:first-child,
.p-inputgroup button:first-child,
.p-inputgroup input:first-child,
.p-inputgroup > .p-inputwrapper:first-child,
.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-inputgroup .p-float-label:first-child input {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.p-inputgroup-addon:last-child,
.p-inputgroup button:last-child,
.p-inputgroup input:last-child,
.p-inputgroup > .p-inputwrapper:last-child,
.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.p-inputgroup .p-float-label:last-child input {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.p-fluid .p-inputgroup .p-button {
width: auto;
}
.p-fluid .p-inputgroup .p-button.p-button-icon-only {
width: 2.5rem;
}
`;
const classes = {
root: 'p-inputgroup'
};
export default BaseStyle.extend({
name: 'inputgroup',
theme,
classes
});

148
components/lib/inputnumber/style/InputNumberStyle.js
View File

@ -1,5 +1,152 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-inputnumber {
display: inline-flex;
position: relative;
}
.p-inputnumber-button {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
background: ${dt('inputnumber.button.background')};
color: ${dt('inputnumber.button.color')};
width: ${dt('inputnumber.button.width')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-inputnumber-button:hover {
background: ${dt('inputnumber.button.hover.background')};
color: ${dt('inputnumber.button.hover.color')};
}
.p-inputnumber-button:active {
background: ${dt('inputnumber.button.active.background')};
color: ${dt('inputnumber.button.active.color')};
}
.p-inputnumber-stacked {
overflow: hidden;
}
.p-inputnumber-stacked .p-inputnumber-button {
position: relative;
border: 0 none;
}
.p-inputnumber-stacked .p-inputnumber-button-group {
display: flex;
flex-direction: column;
position: absolute;
top: 1px;
right: 1px;
height: calc(100% - 2px);
}
.p-inputnumber-stacked .p-inputnumber-button-up {
padding: 0;
border-top-right-radius: calc(${dt('rounded.base')} - 1px);
}
.p-inputnumber-stacked .p-inputnumber-button-down {
padding: 0;
border-bottom-right-radius: calc(${dt('rounded.base')} - 1px);
}
.p-inputnumber-stacked .p-inputnumber-button {
flex: 1 1 auto;
border: 0 none;
}
.p-inputnumber-horizontal .p-inputnumber-button {
border: 1px solid ${dt('inputnumber.button.border.color')};
}
.p-inputnumber-horizontal .p-inputnumber-button:hover {
border-color: ${dt('inputnumber.button.hover.border.color')};
}
.p-inputnumber-horizontal .p-inputnumber-button:active {
border-color: ${dt('inputnumber.button.active.border.color')};
}
.p-inputnumber-horizontal .p-inputnumber-button-up {
order: 3;
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
border-left: 0 none;
}
.p-inputnumber-horizontal .p-inputnumber-input {
order: 2;
border-radius: 0;
}
.p-inputnumber-horizontal .p-inputnumber-button-down {
order: 1;
border-top-left-radius: ${dt('rounded.base')};
border-bottom-left-radius: ${dt('rounded.base')};
border-right: 0 none;
}
.p-inputnumber-vertical {
flex-direction: column;
}
.p-inputnumber-vertical .p-inputnumber-button {
border: 1px solid ${dt('inputnumber.button.border.color')};
padding: 0.5rem 0;
}
.p-inputnumber-vertical .p-inputnumber-button:hover {
border-color: ${dt('inputnumber.button.hover.border.color')};
}
.p-inputnumber-vertical .p-inputnumber-button:active {
border-color: ${dt('inputnumber.button.active.border.color')};
}
.p-inputnumber-vertical .p-inputnumber-button-up {
order: 1;
border-top-left-radius: ${dt('rounded.base')};
border-top-right-radius: ${dt('rounded.base')};
width: 100%;
border-bottom: 0 none;
}
.p-inputnumber-vertical .p-inputnumber-input {
order: 2;
border-radius: 0;
text-align: center;
}
.p-inputnumber-vertical .p-inputnumber-button-down {
order: 3;
border-bottom-left-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
width: 100%;
border-top: 0 none;
}
.p-inputnumber-input {
flex: 1 1 auto;
}
.p-fluid .p-inputnumber {
width: 100%;
}
.p-fluid .p-inputnumber .p-inputnumber-input {
width: 1%;
}
.p-fluid .p-inputnumber-vertical .p-inputnumber-input {
width: 100%;
}
`;
const classes = {
root: ({ instance, props }) => [
'p-inputnumber p-component p-inputwrapper',
@ -29,5 +176,6 @@ const classes = {
export default BaseStyle.extend({
name: 'inputnumber',
theme,
classes
});

14
components/lib/inputotp/style/InputOtpStyle.js
View File

@ -1,5 +1,18 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-inputotp {
display: flex;
align-items: center;
gap: 0.5rem;
}
.p-inputotp-input {
text-align: center;
width: 2.5rem;
}
`;
const classes = {
root: 'p-inputotp p-component',
input: 'p-inputotp-input'
@ -7,5 +20,6 @@ const classes = {
export default BaseStyle.extend({
name: 'inputotp',
theme,
classes
});

53
components/lib/inputtext/style/InputTextStyle.js
View File

@ -1,5 +1,57 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-inputtext {
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
color: ${dt('inputtext.color')};
background: ${dt('inputtext.background')};
padding: 0.5rem 0.75rem;
border: 1px solid ${dt('inputtext.border.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
appearance: none;
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: ${dt('inputtext.box.shadow')};
}
.p-inputtext:enabled:hover {
border-color: ${dt('inputtext.hover.border.color')};
}
.p-inputtext:enabled:focus {
border-color: ${dt('inputtext.focus.border.color')};
outline: 0 none;
}
.p-inputtext.p-invalid {
border-color: ${dt('inputtext.invalid.border.color')};
}
.p-inputtext.p-variant-filled {
background: ${dt('inputtext.filled.background')};
}
.p-inputtext.p-variant-filled:enabled:focus {
background-color: ${dt('inputtext.filled.focus.background')};
}
.p-inputtext:disabled {
opacity: 1;
background: ${dt('inputtext.disabled.background')};
color: ${dt('inputtext.disabled.color')};
}
.p-inputtext::placeholder {
color: ${dt('inputtext.placeholder.color')};
}
.p-fluid .p-inputtext {
width: 100%;
}
`;
const classes = {
root: ({ instance, props }) => [
'p-inputtext p-component',
@ -15,5 +67,6 @@ const classes = {
export default BaseStyle.extend({
name: 'inputtext',
theme,
classes
});

35
components/lib/knob/style/KnobStyle.js
View File

@ -1,5 +1,39 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-knob-range {
fill: none;
transition: stroke 0.1s ease-in;
}
.p-knob-value {
animation-name: p-knob-dash-frame;
animation-fill-mode: forwards;
fill: none;
}
.p-knob-text {
font-size: 1.3rem;
text-align: center;
}
.p-knob svg {
border-radius: ${dt('rounded.base')};
outline-color: transparent;
transition: outline-color ${dt('transition.duration')};
}
.p-knob svg:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
@keyframes p-knob-dash-frame {
100% {
stroke-dashoffset: 0;
}
}
`;
const classes = {
root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
range: 'p-knob-range',
@ -9,5 +43,6 @@ const classes = {
export default BaseStyle.extend({
name: 'knob',
theme,
classes
});

116
components/lib/listbox/style/ListboxStyle.js
View File

@ -1,5 +1,120 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-listbox {
background: ${dt('listbox.background')};
color: ${dt('listbox.color')};
border: 1px solid ${dt('listbox.border.color')};
border-radius: ${dt('rounded.base')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
.p-listbox.p-focus {
outline: 0 none;
border-color: ${dt('listbox.focus.border.color')};
}
.p-listbox.p-disabled {
opacity: 1;
background: ${dt('listbox.disabled.background')};
color: ${dt('listbox.disabled.color')};
}
.p-listbox.p-invalid {
border-color: ${dt('listbox.invalid.border.color')};
}
.p-listbox .p-listbox-header {
padding: 0.5rem 0.5rem 0 0.5rem;
border-bottom: 0 none;
margin: 0 0 0 0;
}
.p-listbox-filter-container {
position: relative;
}
.p-listbox-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
right: 0.75rem;
color: ${dt('listbox.filter.icon.color')};
}
.p-listbox-filter {
width: 100%;
padding-right: 1.75rem;
}
.p-listbox-list-container {
overflow: auto;
}
.p-listbox-list {
list-style-type: none;
margin: 0;
padding: 0.25rem 0.25rem;
outline: 0 none;
}
.p-listbox-option {
cursor: pointer;
position: relative;
overflow: hidden;
margin: 2px 0;
padding: 0.5rem 0.75rem;
border: 0 none;
border-radius: ${dt('rounded.sm')};
color: ${dt('listbox.item.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-listbox-option:first-child {
margin-top: 0;
}
.p-listbox-option:last-child {
margin-bottom: 0;
}
.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
background: ${dt('listbox.item.selected.background')};
color: ${dt('listbox.item.selected.color')};
}
.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {
background: ${dt('listbox.item.selected.focus.background')};
color: ${dt('listbox.item.selected.focus.color')};
}
.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {
background: ${dt('listbox.item.focus.background')};
color: ${dt('listbox.item.focus.color')};
}
.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {
background: ${dt('listbox.item.focus.background')};
color: ${dt('listbox.item.focus.color')};
}
.p-listbox-option-group {
cursor: auto;
margin: 0;
padding: 0.5rem 0.75rem;
color: ${dt('listbox.item.group.color')};
background: ${dt('listbox.item.group.background')};
font-weight: 600;
}
.p-listbox-empty-message {
padding: 0.5rem 0.75rem;
background: transparent;
}
`;
const classes = {
root: ({ props }) => [
'p-listbox p-component',
@ -29,5 +144,6 @@ const classes = {
export default BaseStyle.extend({
name: 'listbox',
theme,
classes
});

282
components/lib/megamenu/style/MegaMenuStyle.js
View File

@ -1,5 +1,286 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-megamenu {
display: flex;
position: relative;
padding: 0.5rem 0.5rem;
background: ${dt('megamenu.background')};
color: ${dt('megamenu.color')};
border: 1px solid ${dt('megamenu.border.color')};
border-radius: ${dt('rounded.base')};
}
.p-megamenu-root-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-megamenu-item-content {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')};
color: ${dt('megamenu.item.color')};
}
.p-megamenu-item-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: 0.5rem 0.75rem;
user-select: none;
}
.p-megamenu-item-label {
line-height: 1;
}
.p-megamenu-item-icon {
color: ${dt('megamenu.item.icon.color')};
margin-right: 0.5rem;
}
.p-megamenu-item.p-focus > .p-megamenu-item-content {
color: ${dt('megamenu.item.focus.color')};
background: ${dt('megamenu.item.focus.background')};
}
.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon,
.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {
color: ${dt('megamenu.item.icon.focus.color')};
}
.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {
color: ${dt('megamenu.item.focus.color')};
background: ${dt('megamenu.item.focus.background')};
}
.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon,
.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {
color: ${dt('megamenu.item.icon.focus.color')};
}
.p-megamenu-item-active > .p-megamenu-item-content {
color: ${dt('megamenu.item.focus.color')};
background: ${dt('megamenu.item.focus.background')};
}
.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon,
.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
color: ${dt('megamenu.item.icon.focus.color')};
}
.p-megamenu-submenu-icon {
color: ${dt('megamenu.item.icon.color')};
margin-left: 0.5rem;
font-size: 0.875rem;
width: 0.875rem;
height: 0.875rem;
}
.p-megamenu-panel {
display: none;
position: absolute;
width: auto;
z-index: 1;
left: 0;
min-width: 100%;
background: ${dt('megamenu.background')};
color: ${dt('megamenu.color')};
border: 1px solid ${dt('megamenu.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)
}
.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-panel {
display: block;
}
.p-megamenu-submenu {
margin: 0;
list-style: none;
padding: 0.25rem 0.25rem;
min-width: 12.5rem;
}
.p-megamenu-submenu .p-megamenu-item {
margin: 2px 0;
}
.p-megamenu-submenu .p-megamenu-item:first-child {
margin-top: 0;
}
.p-megamenu-submenu .p-megamenu-item:last-child {
margin-bottom: 0;
}
.p-megamenu-submenu .p-megamenu-submenu-item {
margin: 0;
padding: 0.5rem 0.75rem;
color: ${dt('megamenu.submenu.header.color')};
font-weight: 600;
margin-bottom: 2px;
}
.p-megamenu-submenu .p-menuitem-separator {
border-top: 1px solid ${dt('megamenu.separator.border.color')};
margin: 2px 0;
}
.p-megamenu-horizontal {
align-items: center;
}
.p-megamenu-horizontal .p-megamenu-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-megamenu-horizontal .p-megamenu-end {
margin-left: auto;
align-self: center;
}
.p-megamenu-vertical {
display: inline-flex;
flex-direction: column;
min-width: 12.5rem;
padding: 0.25rem 0.25rem;
}
.p-megamenu-vertical .p-megamenu-root-list {
flex-direction: column;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-panel {
left: 100%;
top: 0;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
margin-left: auto;
}
.p-megamenu-grid {
display: flex;
}
.p-megamenu-col-2,
.p-megamenu-col-3,
.p-megamenu-col-4,
.p-megamenu-col-6,
.p-megamenu-col-12 {
flex: 0 0 auto;
padding: 0.5rem;
}
.p-megamenu-col-2 {
width: 16.6667%;
}
.p-megamenu-col-3 {
width: 25%;
}
.p-megamenu-col-4 {
width: 33.3333%;
}
.p-megamenu-col-6 {
width: 50%;
}
.p-megamenu-col-12 {
width: 100%;
}
.p-megamenu-button {
display: none;
justify-content: center;
align-items: center;
cursor: pointer;
width: 1.75rem;
height: 1.75rem;
position: relative;
color: ${dt('megamenu.mobile.toggle.color')};
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-megamenu-button:hover {
color: ${dt('megamenu.mobile.toggle.hover.color')};
background: ${dt('megamenu.mobile.toggle.hover.background')};
}
.p-megamenu-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-megamenu-mobile {
display: flex;
}
.p-megamenu-mobile .p-megamenu-button {
display: flex;
}
.p-megamenu-mobile .p-megamenu-root-list {
position: absolute;
display: none;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
width: 100%;
padding: 0.25rem 0.25rem;
background: ${dt('megamenu.background')};
border: 1px solid ${dt('megamenu.border.color')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
gap: 2px;
}
.p-megamenu-mobile-active .p-megamenu-root-list {
display: flex;
}
.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {
width: 100%;
position: static;
}
.p-megamenu-mobile .p-megamenu-panel {
position: static;
border: 0 none;
border-radius: 0;
box-shadow: none;
}
.p-megamenu-mobile .p-megamenu-grid {
flex-wrap: wrap;
overflow: auto;
max-height: 90%;
}
.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
margin-left: auto;
transition: transform 0.2s;
}
.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
transform: rotate(-180deg);
}
`;
const inlineStyles = {
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
};
@ -77,6 +358,7 @@ const classes = {
export default BaseStyle.extend({
name: 'megamenu',
theme,
classes,
inlineStyles
});

91
components/lib/menu/style/MenuStyle.js
View File

@ -1,5 +1,95 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-menu {
padding: 0.25rem 0.25rem;
background: ${dt('menu.background')};
color: ${dt('menu.color')};
border: 1px solid ${dt('menu.border.color')};
border-radius: ${dt('rounded.base')};
min-width: 12.5rem;
}
.p-menu-list {
margin: 0;
padding: 0;
list-style: none;
}
.p-menu-item {
margin: 2px 0;
}
.p-menu-item:first-child {
margin-top: 0;
}
.p-menu-item:last-child {
margin-bottom: 0;
}
.p-menu-item-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: 0.5rem 0.75rem;
user-select: none;
}
.p-menu-item-content {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')};
color: ${dt('menu.item.color')};
}
.p-menu-item-label {
line-height: 1;
}
.p-menu-item-icon {
color: ${dt('menu.item.icon.color')};
margin-right: 0.5rem;
}
.p-menu-item.p-focus .p-menu-item-content {
color: ${dt('menu.item.focus.color')};
background: ${dt('menu.item.focus.background')};
}
.p-menu-item.p-focus .p-menu-item-icon {
color: ${dt('menu.item.icon.focus.color')};
}
.p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
color: ${dt('menu.item.focus.color')};
background: ${dt('menu.item.focus.background')};
}
.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon {
color: ${dt('menu.item.icon.focus.color')};
}
.p-menu-overlay {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-menu-submenu-item {
margin: 0;
padding: 0.5rem 0.75rem;
color: ${dt('menu.submenu.header.color')};
font-weight: 600;
}
.p-menu-separator {
border-top: 1px solid ${dt('menu.separator.border.color.color')};
margin: 2px 0;
}
`;
const classes = {
root: ({ instance, props }) => [
'p-menu p-component',
@ -28,5 +118,6 @@ const classes = {
export default BaseStyle.extend({
name: 'menu',
theme,
classes
});

243
components/lib/menubar/style/MenubarStyle.js
View File

@ -1,5 +1,247 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-menubar {
display: flex;
align-items: center;
padding: 0.5rem 0.5rem;
background: ${dt('menubar.background')};
color: ${dt('menubar.color')};
border: 1px solid ${dt('menubar.border.color')};
border-radius: ${dt('rounded.base')};
}
.p-menubar-root-list,
.p-menubar-submenu {
margin: 0;
padding: 0;
list-style: none;
outline: 0 none;
}
.p-menubar-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.p-menubar-root-list > .p-menubar-item-active > .p-menubar-submenu {
display: block;
}
.p-menubar-item-content {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')});
color: ${dt('menubar.item.color')};
}
.p-menubar-item-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: 0.5rem 0.75rem;
user-select: none;
}
.p-menubar-item-label {
line-height: 1;
}
.p-menubar-item-icon {
color: ${dt('menubar.item.icon.color')};
margin-right: 0.5rem;
}
.p-menubar-item.p-focus > .p-menubar-item-content {
color: ${dt('menubar.item.focus.color')};
background: ${dt('menubar.item.focus.background')};
}
.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon,
.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {
color: ${dt('menubar.item.icon.focus.color')};
}
.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover {
color: ${dt('menubar.item.focus.color')};
background: ${dt('menubar.item.focus.background')};
}
.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon,
.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {
color: ${dt('menubar.item.icon.focus.color')};
}
.p-menubar-item-active > .p-menubar-item-content {
color: ${dt('menubar.item.focus.color')};
background: ${dt('menubar.item.focus.background')};
}
.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon,
.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
color: ${dt('menubar.item.icon.focus.color')};
}
.p-menubar-submenu-icon {
color: ${dt('menubar.item.icon.color')};
margin-left: auto;
font-size: 0.875rem;
width: 0.875rem;
height: 0.875rem;
}
.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon {
margin-left: 0.5rem;
}
.p-menubar-submenu {
display: none;
position: absolute;
min-width: 12.5rem;
z-index: 1;
padding: 0.25rem 0.25rem;
background: ${dt('menubar.background')};
color: ${dt('menubar.color')};
border: 1px solid ${dt('menubar.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-menubar-submenu .p-menubar-separator {
border-top: 1px solid ${dt('menubar.separator.border.color')};
margin: 2px 0;
}
.p-menubar-submenu .p-menubar-item {
position: relative;
margin: 2px 0;
}
.p-menubar-submenu .p-menubar-item:first-child {
margin-top: 0;
}
.p-menubar-submenu .p-menubar-item:last-child {
margin-bottom: 0;
}
.p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu {
display: block;
left: 100%;
top: 0;
}
.p-menubar-end {
margin-left: auto;
align-self: center;
}
.p-menubar-button {
display: none;
justify-content: center;
align-items: center;
cursor: pointer;
width: 1.75rem;
height: 1.75rem;
position: relative;
color: ${dt('menubar.mobile.toggle.color')};
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-menubar-button:hover {
color: ${dt('menubar.mobile.toggle.hover.color')};
background: ${dt('menubar.mobile.toggle.hover.background')};
}
.p-menubar-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-menubar-mobile {
position: relative;
}
.p-menubar-mobile .p-menubar-button {
display: flex;
}
.p-menubar-mobile .p-menubar-root-list {
position: absolute;
display: none;
width: 100%;
padding: 0.25rem 0.25rem;
background: ${dt('menubar.background')};
border: 1px solid ${dt('menubar.border.color')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-menubar-mobile-active .p-menubar-root-list {
display: flex;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
}
.p-menubar-mobile .p-menubar-root-list .p-menubar-item {
width: 100%;
position: static;
}
.p-menubar-mobile .p-menubar-root-list .p-menubar-separator {
border-top: 1px solid #e2e8f0;
margin: 2px 0;
}
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item {
position: relative;
margin: 2px 0;
}
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item:first-child {
margin-top: 0;
}
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item:last-child {
margin-bottom: 0;
}
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon {
margin-left: auto;
transition: transform 0.2s;
}
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
transform: rotate(-180deg);
}
.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon {
transition: transform 0.2s;
transform: rotate(90deg);
}
.p-menubar-mobile .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
transform: rotate(-90deg);
}
.p-menubar-mobile .p-menubar-submenu {
width: 100%;
position: static;
box-shadow: none;
border: 0 none;
padding-left: 1rem;
}
`;
const inlineStyles = {
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
};
@ -35,6 +277,7 @@ const classes = {
export default BaseStyle.extend({
name: 'menubar',
theme,
classes,
inlineStyles
});

177
components/lib/message/style/MessageStyle.js
View File

@ -1,5 +1,181 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-message-content {
display: flex;
align-items: center;
padding: 0.5rem 0.75rem;
}
.p-message {
margin: 1rem 0;
border-radius: 6px;
}
.p-message-icon {
flex-shrink: 0;
}
.p-message-close-button {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin: 0 0 0 auto;
overflow: hidden;
position: relative;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
color: inherit;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}
.p-message-close-button:focus-visible {
outline-width: ${dt('focus.ring.width')};
outline-style: ${dt('focus.ring.style')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-message-info {
background: ${dt('message.info.background')};
border: 1px solid ${dt('message.info.border.color')};
color: ${dt('message.info.color')};
box-shadow: ${dt('message.info.box.shadow')};
}
.p-message-info .p-message-close-button:focus-visible {
outline-color: ${dt('message.info.color')};
}
.p-message-info .p-message-close-button:hover {
background: ${dt('message.info.close.hover.background')};
}
.p-message-success {
background: ${dt('message.success.background')};
border: 1px solid ${dt('message.success.border.color')};
color: ${dt('message.success.color')};
box-shadow: ${dt('message.success.box.shadow')};
}
.p-message-success .p-message-close-button:focus-visible {
outline-color: ${dt('message.success.color')};
}
.p-message-success .p-message-close-button:hover {
background: ${dt('message.success.close.hover.background')};
}
.p-message-warn {
background: ${dt('message.warn.background')};
border: 1px solid ${dt('message.warn.border.color')};
color: ${dt('message.warn.color')};
box-shadow: ${dt('message.warn.box.shadow')};
}
.p-message-warn .p-message-close-button:focus-visible {
outline-color: ${dt('message.warn.color')};
}
.p-message-warn .p-message-close-button:hover {
background: ${dt('message.warn.close.hover.background')};
}
.p-message-error {
background: ${dt('message.error.background')};
border: 1px solid ${dt('message.error.border.color')};
color: ${dt('message.error.color')};
box-shadow: ${dt('message.error.box.shadow')};
}
.p-message-error .p-message-close-button:focus-visible {
outline-color: ${dt('message.error.color')};
}
.p-message-error .p-message-close-button:hover {
background: ${dt('message.error.close.hover.background')};
}
.p-message-secondary {
background: ${dt('message.secondary.background')};
border: 1px solid ${dt('message.secondary.border.color')};
color: ${dt('message.secondary.color')};
box-shadow: ${dt('message.secondary.box.shadow')};
}
.p-message-secondary .p-message-close-button:focus-visible {
outline-color: ${dt('message.secondary.color')};
}
.p-message-secondary .p-message-close-button:hover {
background: ${dt('message.secondary.close.hover.background')};
}
.p-message-contrast {
background: ${dt('message.contrast.background')};
border: 1px solid ${dt('message.contrast.border.color')};
color: ${dt('message.contrast.color')};
box-shadow: ${dt('message.contrast.box.shadow')};
}
.p-message-contrast .p-message-close-button:focus-visible {
outline-color: ${dt('message.contrast.color')};
}
.p-message-contrast .p-message-close-button:hover {
background: ${dt('message.contrast.close.hover.background')};
}
.p-message-text {
font-size: 1rem;
font-weight: 500;
}
.p-message-icon {
font-size: 1rem;
margin-right: 0.5rem;
}
.p-message .p-icon:not(.p-message-close-button-icon) {
width: 1rem;
height: 1rem;
}
.p-message-enter-from {
opacity: 0;
}
.p-message-enter-active {
transition: opacity 0.3s;
}
.p-message.p-message-leave-from {
max-height: 1000px;
}
.p-message.p-message-leave-to {
max-height: 0;
opacity: 0;
margin: 0;
}
.p-message-leave-active {
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;
}
.p-message-leave-active .p-message-close-button {
display: none;
}
`;
const classes = {
root: ({ props }) => 'p-message p-component p-message-' + props.severity,
content: 'p-message-content',
@ -11,5 +187,6 @@ const classes = {
export default BaseStyle.extend({
name: 'message',
theme,
classes
});

93
components/lib/metergroup/style/MeterGroupStyle.js
View File

@ -1,5 +1,97 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-metergroup {
display: flex;
gap: 1rem;
}
.p-metergroup-meters {
display: flex;
background: ${dt('metergroup.meters.background')};
border-radius: ${dt('rounded.base')};
}
.p-metergroup-meter {
border: 0 none;
}
.p-metergroup-label-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style-type: none;
}
.p-metergroup-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.p-metergroup-label-marker {
display: inline-flex;
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
}
.p-metergroup-label-icon {
width: 1rem;
height: 1rem;
}
.p-metergroup-horizontal {
flex-direction: column;
}
.p-metergroup-label-list-horizontal {
gap: 1rem;
}
.p-metergroup-horizontal .p-metergroup-meters {
height: 0.5rem;
}
.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
border-top-left-radius: ${dt('rounded.base')};
border-bottom-left-radius: ${dt('rounded.base')};
}
.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-metergroup-vertical {
flex-direction: row;
}
.p-metergroup-label-list-vertical {
flex-direction: column;
gap: 0.5rem;
}
.p-metergroup-vertical .p-metergroup-meters {
flex-direction: column;
width: 0.5rem;
height: 100%;
}
.p-metergroup-vertical .p-metergroup-label-list {
align-items: start;
}
.p-metergroup-vertical .p-metergroup-meter:first-of-type {
border-top-left-radius: ${dt('rounded.base')};
border-top-right-radius: ${dt('rounded.base')};
}
.p-metergroup-vertical .p-metergroup-meter:last-of-type {
border-bottom-left-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
`;
const classes = {
root: ({ props }) => [
'p-metergroup p-component',
@ -25,5 +117,6 @@ const classes = {
export default BaseStyle.extend({
name: 'metergroup',
theme,
classes
});

204
components/lib/multiselect/style/MultiSelectStyle.js
View File

@ -1,5 +1,208 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-multiselect {
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
background: ${dt('multiselect.background')};
border: 1px solid ${dt('multiselect.border.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: ${dt('multiselect.box.shadow')};
}
.p-multiselect:not(.p-disabled):hover {
border-color: ${dt('multiselect.hover.border.color')};
}
.p-multiselect:not(.p-disabled).p-focus {
border-color: ${dt('multiselect.focus.border.color')};
outline: 0 none;
}
.p-multiselect.p-variant-filled {
background: ${dt('multiselect.filled.background')};
}
.p-multiselect.p-variant-filled.p-focus {
background: ${dt('multiselect.filled.focus.background')};
}
.p-multiselect.p-invalid {
border-color: ${dt('multiselect.invalid.border.color')};
}
.p-multiselect.p-disabled {
opacity: 1;
background: ${dt('multiselect.disabled.background')};
}
.p-multiselect-dropdown {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: transparent;
color: ${dt('multiselect.toggle.color')};
width: 2.5rem;
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-multiselect-label-container {
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
}
.p-multiselect-label {
display: block;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.5rem 0.75rem;
color: ${dt('multiselect.color')};
}
.p-multiselect-label.p-placeholder {
color: ${dt('multiselect.placeholder.color')};
}
.p-multiselect.p-disabled .p-multiselect-label {
color: ${dt('multiselect.disabled.color')};
}
.p-inputwrapper-filled.p-multiselect.p-multiselect-display-chip .p-multiselect-label {
padding: 0.25rem 0.25rem;
}
.p-multiselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-multiselect .p-multiselect-overlay {
min-width: 100%;
}
.p-multiselect-overlay {
position: absolute;
top: 0;
left: 0;
background: ${dt('multiselect.overlay.background')};
color: ${dt('multiselect.overlay.color')};
border: 1px solid ${dt('multiselect.overlay.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-multiselect-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem 0 1rem;
}
.p-multiselect-header .p-checkbox {
margin-right: 0.5rem;
}
.p-multiselect-filter-container {
position: relative;
flex: 1 1 auto;
}
.p-multiselect-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
right: 0.75rem;
color: ${dt('multiselect.filter.icon.color')};
}
.p-multiselect-filter-container .p-inputtext {
width: 100%;
padding-right: 1.75rem;
}
.p-multiselect-list-container {
overflow: auto;
}
.p-multiselect-list {
margin: 0;
padding: 0;
list-style-type: none;
padding: 0.25rem 0.25rem;
}
.p-multiselect-option {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
margin: 2px 0;
padding: 0.5rem 0.75rem;
border: 0 none;
color: ${dt('multiselect.item.color')};
background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')};
}
.p-multiselect-option:first-child {
margin-top: 0;
}
.p-multiselect-option:last-child {
margin-bottom: 0;
}
.p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled).p-focus {
background: ${dt('multiselect.item.focus.background')};
color: ${dt('multiselect.item.focus.color')};
}
.p-multiselect-option.p-multiselect-option-selected {
background: ${dt('multiselect.item.selected.background')};
color: ${dt('multiselect.item.selected.color')};
}
.p-multiselect-option.p-multiselect-option-selected.p-focus {
background: ${dt('multiselect.item.selected.focus.background')};
color: ${dt('multiselect.item.selected.focus.color')};
}
.p-multiselect-option .p-checkbox {
margin-right: 0.5rem;
}
.p-multiselect-option-group {
cursor: auto;
margin: 0;
padding: 0.5rem 0.75rem;
color: ${dt('multiselect.item.group.color')};
background: ${dt('multiselect.item.group.background')};
font-weight: 600;
}
.p-multiselect-empty-message {
padding: 0.5rem 0.75rem;
background: transparent;
}
.p-fluid .p-multiselect {
display: flex;
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
@ -58,6 +261,7 @@ const classes = {
export default BaseStyle.extend({
name: 'multiselect',
theme,
classes,
inlineStyles
});

15
components/lib/orderlist/style/OrderListStyle.js
View File

@ -1,5 +1,19 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-orderlist {
display: flex;
gap: 1.125rem;
}
.p-orderlist-controls {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
`;
const classes = {
root: 'p-orderlist p-component',
controls: 'p-orderlist-controls'
@ -7,5 +21,6 @@ const classes = {
export default BaseStyle.extend({
name: 'orderlist',
theme,
classes
});

111
components/lib/organizationchart/style/OrganizationChartStyle.js
View File

@ -1,5 +1,115 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-organizationchart-table {
border-spacing: 0;
border-collapse: separate;
margin: 0 auto;
}
.p-organizationchart-table > tbody > tr > td {
text-align: center;
vertical-align: top;
padding: 0 0.75rem;
}
.p-organizationchart-node {
display: inline-block;
position: relative;
border: 1px solid ${dt('organizationchart.node.border.color')};
background: ${dt('organizationchart.node.background')};
color: ${dt('organizationchart.node.color')};
padding: 0.75rem 1rem;
border-radius: ${dt('rounded.base')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
}
.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
padding: 0.75rem 1rem 1.25rem 1rem;
}
.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-highlight):hover {
background: ${dt('organizationchart.node.hover.background')};
color: ${dt('organizationchart.node.hover.color')};
}
.p-organizationchart-node.p-highlight {
background: ${dt('highlight.background')};
color: ${dt('highlight.color')};
}
.p-organizationchart-node-toggle-button {
position: absolute;
bottom: -0.75rem;
margin-left: -0.75rem;
z-index: 2;
left: 50%;
user-select: none;
cursor: pointer;
width: 1.5rem;
height: 1.5rem;
text-decoration: none;
background: ${dt('organizationchart.toggle.icon.background')};
color: ${dt('organizationchart.toggle.icon.color')};
border-radius: 50%;
border: 1px solid ${dt('organizationchart.toggle.icon.border.color')};
display: inline-flex;
justify-content: center;
align-items: center;
outline-color: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-organizationchart-node-toggle-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-organizationchart-node-toggle-button-icon {
position: relative;
top: 1px;
}
.p-organizationchart-connector-down {
margin: 0 auto;
height: 20px;
width: 1px;
background: ${dt('organizationchart.connector.color')};
}
.p-organizationchart-connector-right {
border-radius: 0;
border-left: 1px solid ${dt('organizationchart.connector.color')};
border-top-left-radius: ${dt('rounded.base')};
}
.p-organizationchart-connector-left {
border-radius: 0;
border-right: 1px solid ${dt('organizationchart.connector.color')};
}
.p-organizationchart-connector-top {
border-top: 1px solid ${dt('organizationchart.connector.color')};
}
.p-organizationchart-node-selectable {
cursor: pointer;
}
.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {
border-right: 0 none;
}
.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
border-top-right-radius: ${dt('rounded.base')};
}
.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
border-left: 1px solid ${dt('organizationchart.connector.color')};
border-top-left-radius: ${dt('rounded.base')};
}
`;
const classes = {
root: 'p-organizationchart p-component',
table: 'p-organizationchart-table',
@ -15,5 +125,6 @@ const classes = {
export default BaseStyle.extend({
name: 'organizationchart',
theme,
classes
});

76
components/lib/paginator/style/PaginatorStyle.js
View File

@ -1,5 +1,80 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-paginator {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background: ${dt('paginator.background')};
color: ${dt('paginator.color')};
border: 0 none;
padding: 0.5rem 1rem;
border-radius: ${dt('rounded.base')};
gap: 0.25rem;
}
.p-paginator-content-start {
margin-right: auto;
}
.p-paginator-content-end {
margin-left: auto;
}
.p-paginator-page,
.p-paginator-next,
.p-paginator-last,
.p-paginator-first,
.p-paginator-prev {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
user-select: none;
overflow: hidden;
position: relative;
background: transparent;
border: 0 none;
color: ${dt('paginator.navigator.color')};
min-width: 2.5rem;
height: 2.5rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: 50%;
padding: 0;
margin: 0;
}
.p-paginator-page:not(.p-disabled):not(.p-paginator-page-active):hover,
.p-paginator-first:not(.p-disabled):hover,
.p-paginator-prev:not(.p-disabled):hover,
.p-paginator-next:not(.p-disabled):hover,
.p-paginator-last:not(.p-disabled):hover {
background: ${dt('paginator.navigator.hover.background')};
color: ${dt('paginator.navigator.hover.color')};
}
.p-paginator-current {
color: ${dt('paginator.current.page.report.color')};
}
.p-paginator-pages {
display: flex;
align-items: center;
gap: 0.25rem;
}
.p-paginator-page.p-paginator-page-active {
background: ${dt('highlight.background')};
color: ${dt('highlight.color')};
}
.p-paginator-jtp-input .p-inputtext {
max-width: 2.5rem;
}
`;
const classes = {
paginator: ({ instance, key }) => [
'p-paginator p-component',
@ -53,5 +128,6 @@ const classes = {
export default BaseStyle.extend({
name: 'paginator',
theme,
classes
});

34
components/lib/panel/style/PanelStyle.js
View File

@ -1,5 +1,38 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-panel {
border: 1px solid ${dt('panel.border.color')};
border-radius: ${dt('rounded.base')};
background: ${dt('panel.background')};
color: ${dt('panel.color')};
}
.p-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.125rem;
}
.p-panel-toggleable .p-panel-header {
padding: 0.75rem 1.125rem;
}
.p-panel-title {
line-height: 1;
font-weight: 600;
}
.p-panel-content {
padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-panel-footer {
padding: 0 1.125rem 1.125rem 1.125rem;
}
`;
const classes = {
root: ({ props }) => [
'p-panel p-component',
@ -18,5 +51,6 @@ const classes = {
export default BaseStyle.extend({
name: 'panel',
theme,
classes
});

129
components/lib/panelmenu/style/PanelMenuStyle.js
View File

@ -1,5 +1,133 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-panelmenu {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.p-panelmenu-panel {
background: ${dt('panelmenu.panel.background')};
border: 1px solid ${dt('panelmenu.panel.border.color')};
color: ${dt('panelmenu.panel.color')};
border-radius: ${dt('rounded.base')};
padding: 0.25rem 0.25rem;
}
.p-panelmenu-header {
outline: 0 none;
border: 0 none;
}
.p-panelmenu-header-content {
border: 0 none;
color: ${dt('panelmenu.item.color')};
border-radius: ${dt('rounded.base')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-panelmenu-header-link {
display: flex;
gap: 0.5rem;
align-items: center;
user-select: none;
cursor: pointer;
position: relative;
text-decoration: none;
color: inherit;
padding: 0.5rem 0.75rem;
font-weight: 600;
}
.p-panelmenu-header-icon,
.p-panelmenu-item-icon,
.p-panelmenu-submenu-icon {
color: ${dt('panelmenu.item.icon.color')};
}
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
background: ${dt('panelmenu.item.focus.background')};
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon,
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
color: ${dt('panelmenu.item.icon.focus.color')};
}
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {
background: ${dt('panelmenu.item.focus.background')};
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon,
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {
color: ${dt('panelmenu.item.icon.focus.color')};
}
.p-panelmenu .p-panelmenu-item {
margin: 2px 0;
}
.p-panelmenu .p-panelmenu-item:first-child {
margin-top: 0;
}
.p-panelmenu .p-panelmenu-item:last-child {
margin-bottom: 0;
}
.p-panelmenu-submenu {
margin: 4px 0 0 0;
padding: 0 0 0 1rem;
list-style: none;
}
.p-panelmenu-item-link {
display: flex;
gap: 0.5rem;
align-items: center;
user-select: none;
cursor: pointer;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
padding: 0.5rem 0.75rem;
}
.p-panelmenu-item-label {
line-height: 1;
}
.p-panelmenu-item-content {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')};
color: ${dt('panelmenu.item.color')};
}
.p-panelmenu-item.p-focus > .p-panelmenu-item-content {
background: ${dt('panelmenu.item.focus.background')};
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu-item.p-focus > .p-panelmenu-item-icon {
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
background: ${dt('panelmenu.item.focus.background')};
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon,
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
color: ${dt('panelmenu.item.icon.focus.color')};
}
`;
const classes = {
root: 'p-panelmenu p-component',
panel: 'p-panelmenu-panel',
@ -35,5 +163,6 @@ const classes = {
export default BaseStyle.extend({
name: 'panelmenu',
theme,
classes
});

70
components/lib/password/style/PasswordStyle.js
View File

@ -1,5 +1,74 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-password {
display: inline-flex;
position: relative;
}
.p-password .p-password-overlay {
min-width: 100%;
}
.p-password-meter {
height: 10px;
margin-bottom: 0.75rem;
background: ${dt('password.meter.border.color')};
border-radius: ${dt('rounded.base')};
}
.p-password-meter-value {
height: 100%;
width: 0;
transition: width 1s ease-in-out;
border-radius: ${dt('rounded.base')};
}
.p-password-meter-weak {
background: ${dt('password.strength.weak.background')};
}
.p-password-meter-medium {
background: ${dt('password.strength.medium.background')};
}
.p-password-meter-strong {
background: ${dt('password.strength.strong.background')};
}
.p-fluid .p-password {
display: flex;
}
.p-password-input::-ms-reveal,
.p-password-input::-ms-clear {
display: none;
}
.p-password-overlay {
padding: 0.75rem;
background: ${dt('password.overlay.background')};
color: ${dt('password.overlay.color')};
border: 1px solid ${dt('password.overlay.border.color')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
border-radius: ${dt('rounded.base')};
}
.p-password-toggle-mask-icon {
right: 0.75rem;
color: ${dt('password.icon.color')};
position: absolute;
top: 50%;
margin-top: -0.5rem;
width: 1rem;
height: 1rem;
}
.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
padding-right: 2.5rem;
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};
@ -28,6 +97,7 @@ const classes = {
export default BaseStyle.extend({
name: 'password',
theme,
classes,
inlineStyles
});

23
components/lib/picklist/style/PickListStyle.js
View File

@ -1,5 +1,27 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-picklist {
display: flex;
gap: 1.125rem;
}
.p-picklist-controls {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
.p-picklist-list-container {
flex: 1 1 50%;
}
.p-picklist .p-listbox {
height: 100%;
}
`;
const classes = {
root: 'p-picklist p-component',
sourceControls: 'p-picklist-controls p-picklist-source-controls',
@ -11,5 +33,6 @@ const classes = {
export default BaseStyle.extend({
name: 'picklist',
theme,
classes
});

81
components/lib/popover/style/PopoverStyle.js
View File

@ -1,5 +1,85 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-popover {
margin-top: 10px;
background: ${dt('popover.background')};
color: ${dt('popover.color')};
border: 1px solid ${dt('popover.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-popover-content {
padding: 0.75rem;
}
.p-popover-flipped {
margin-top: 0;
margin-bottom: 10px;
}
.p-popover-enter-from {
opacity: 0;
transform: scaleY(0.8);
}
.p-popover-leave-to {
opacity: 0;
}
.p-popover-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}
.p-popover-leave-active {
transition: opacity 0.1s linear;
}
.p-popover:after,
.p-popover:before {
bottom: 100%;
left: ${dt('{overlay.arrow.left} + 1.25rem', 0)};
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-popover:after {
border-width: 8px;
margin-left: -8px;
border-style: solid;
border-color: transparent;
border-bottom-color: ${dt('popover.background')};
}
.p-popover:before {
border-width: 10px;
margin-left: -10px;
border-style: solid;
border-color: transparent;
border-bottom-color: ${dt('popover.border.color')};
}
.p-popover-flipped:after,
.p-popover-flipped:before {
bottom: auto;
top: 100%;
}
.p-popover.p-popover-flipped:after {
border-bottom-color: transparent;
border-top-color: ${dt('popover.background')};
}
.p-popover.p-popover-flipped:before {
border-bottom-color: transparent;
border-top-color: ${dt('popover.border.color')};
}
`;
const classes = {
root: ({ instance }) => [
'p-popover p-component',
@ -12,5 +92,6 @@ const classes = {
export default BaseStyle.extend({
name: 'popover',
theme,
classes
});

74
components/lib/progressspinner/style/ProgressSpinnerStyle.js
View File

@ -1,5 +1,78 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-progressspinner {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
display: inline-block;
}
.p-progressspinner::before {
content: "";
display: block;
padding-top: 100%;
}
.p-progressspinner-spin {
height: 100%;
transform-origin: center center;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
animation: p-progressspinner-rotate 2s linear infinite;
}
.p-progressspinner-circle {
stroke-dasharray: 89, 200;
stroke-dashoffset: 0;
stroke: ${dt('progressspinner.color-1')};
animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;
stroke-linecap: round;
}
@keyframes p-progressspinner-rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes p-progressspinner-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -35px;
}
100% {
stroke-dasharray: 89, 200;
stroke-dashoffset: -124px;
}
}
@keyframes p-progressspinner-color {
100%,
0% {
stroke: ${dt('progressspinner.color-1')};
}
40% {
stroke: ${dt('progressspinner.color-2')};
}
66% {
stroke: ${dt('progressspinner.color-3')};
}
80%,
90% {
stroke: ${dt('progressspinner.color-4')};
}
}
`;
const classes = {
root: 'p-progressspinner',
spin: 'p-progressspinner-spin',
@ -8,5 +81,6 @@ const classes = {
export default BaseStyle.extend({
name: 'progressspinner',
theme,
classes
});

111
components/lib/radiobutton/style/RadioButtonStyle.js
View File

@ -1,5 +1,115 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-radiobutton {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
width: ${dt('radiobutton.width')};
height: ${dt('radiobutton.height')};
}
.p-radiobutton-input {
cursor: pointer;
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: 1px solid transparent;
border-radius: 50%;
}
.p-radiobutton-box {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid ${dt('radiobutton.border.color')};
background: ${dt('radiobutton.background')};
width: ${dt('radiobutton.width')};
height: ${dt('radiobutton.height')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
box-shadow: ${dt('radiobutton.box.shadow')};
}
.p-radiobutton-icon {
transition-duration: ${dt('transition.duration')};
background: transparent;
font-size: ${dt('radiobutton.icon.size')};
width: ${dt('radiobutton.icon.size')};
height: ${dt('radiobutton.icon.size')};
border-radius: 50%;
backface-visibility: hidden;
transform: translateZ(0) scale(0.1);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
border-color: ${dt('radiobutton.hover.border.color')};
}
.p-radiobutton.p-radiobutton-checked .p-radiobutton-box {
border-color: ${dt('radiobutton.checked.border.color')};
background: ${dt('radiobutton.checked.background')};
}
.p-radiobutton.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
background: ${dt('radiobutton.icon.checked.color')};
transform: translateZ(0) scale(1, 1);
visibility: visible;
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box {
border-color: ${dt('radiobutton.checked.hover.border.color')};
background: ${dt('radiobutton.checked.hover.background')};
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
background: ${dt('radiobutton.icon.checked.hover.color')};
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-radiobutton.p-invalid > .p-radiobutton-box {
border-color: ${dt('radiobutton.invalid.border.color')};
}
.p-radiobutton.p-variant-filled .p-radiobutton-box {
background: ${dt('radiobutton.filled.background')};
}
.p-radiobutton.p-variant-filled.p-radiobutton-checked .p-radiobutton-box {
background: ${dt('radiobutton.checked.background')};
}
.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box {
background: ${dt('radiobutton.checked.hover.background')};
}
.p-radiobutton.p-disabled {
opacity: 1;
}
.p-radiobutton.p-disabled .p-radiobutton-box {
background: ${dt('radiobutton.disabled.background')};
}
.p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon {
color: ${dt('radiobutton.icon.disabled.color')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-radiobutton p-component',
@ -17,5 +127,6 @@ const classes = {
export default BaseStyle.extend({
name: 'radiobutton',
theme,
classes
});

40
components/lib/rating/style/RatingStyle.js
View File

@ -1,5 +1,44 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-rating {
position: relative;
display: flex;
align-items: center;
gap: 0.25rem;
}
.p-rating-option {
display: inline-flex;
align-items: center;
cursor: pointer;
outline-color: transparent;
border-radius: 50%;
cursor: pointer;
}
.p-rating-option.p-focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-rating-icon {
color: ${dt('rating.icon.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
font-size: 1rem;
width: 1rem;
height: 1rem;
}
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
color: ${dt('rating.icon.hover.color')};
}
.p-rating-option-active .p-rating-icon {
color: ${dt('rating.icon.active.color')};
}
`;
const classes = {
root: ({ props }) => [
'p-rating',
@ -21,5 +60,6 @@ const classes = {
export default BaseStyle.extend({
name: 'rating',
theme,
classes
});

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

@ -1,5 +1,71 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-scrollpanel-content-container {
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;
border-radius: 3px;
z-index: 2;
cursor: pointer;
opacity: 0;
outline-color: transparent;
transition: outline-color ${dt('transition.duration')};
background: ${dt('scrollpanel.bar.background')};
border: 0 none;
transition: outline-color ${dt('transition.duration')}, opacity ${dt('transition.duration')};
}
.p-scrollpanel-bar:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-scrollpanel-bar-y {
width: 9px;
top: 0;
}
.p-scrollpanel-bar-x {
height: 9px;
bottom: 0;
}
.p-scrollpanel-hidden {
visibility: hidden;
}
.p-scrollpanel:hover .p-scrollpanel-bar,
.p-scrollpanel:active .p-scrollpanel-bar {
opacity: 1;
}
.p-scrollpanel-grabbed {
user-select: none;
}
`;
const classes = {
root: 'p-scrollpanel p-component',
contentContainer: 'p-scrollpanel-content-container',
@ -10,5 +76,6 @@ const classes = {
export default BaseStyle.extend({
name: 'scrollpanel',
theme,
classes
});

58
components/lib/scrolltop/style/ScrollTopStyle.js
View File

@ -1,5 +1,62 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-scrolltop {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
justify-content: center;
background: ${dt('scrolltop.background')};
color: ${dt('scrolltop.color')};
}
.p-scrolltop:hover {
background: ${dt('scrolltop.hover.background')};
color: ${dt('scrolltop.hover.text')};
}
.p-scrolltop-icon {
font-size: 1.5rem;
width: 1.5rem;
height: 1.5rem;
}
.p-scrolltop-sticky {
position: sticky;
}
.p-scrolltop-sticky {
margin-left: auto;
}
.p-scrolltop-enter-from {
opacity: 0;
}
.p-scrolltop-enter-active {
transition: opacity 0.15s;
}
.p-scrolltop.p-scrolltop-leave-to {
opacity: 0;
}
.p-scrolltop-leave-active {
transition: opacity 0.15s;
}
.p-scrolltop {
width: 3rem;
height: 3rem;
border-radius: 50%;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
`;
const classes = {
root: ({ props }) => ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': props.target !== 'window' }],
icon: 'p-scrolltop-icon'
@ -7,5 +64,6 @@ const classes = {
export default BaseStyle.extend({
name: 'scrolltop',
theme,
classes
});

215
components/lib/select/style/SelectStyle.js
View File

@ -1,5 +1,219 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-select {
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
background: ${dt('select.background')};
border: 1px solid ${dt('select.border.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: ${dt('select.box.shadow')};
}
.p-select:not(.p-disabled):hover {
border-color: ${dt('select.hover.border.color')};
}
.p-select:not(.p-disabled).p-focus {
border-color:${dt('select.focus.border.color')};
outline: 0 none;
}
.p-select.p-variant-filled {
background: ${dt('select.filled.background')};
}
.p-select.p-variant-filled.p-focus {
background: ${dt('select.filled.focus.background')};
}
.p-select.p-invalid {
border-color: ${dt('select.invalid.border.color')};
}
.p-select.p-disabled {
opacity: 1;
background: ${dt('select.disabled.background')};
}
.p-select-clear-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
color: #94a3b8;
right: 2.5rem;
}
.p-select-dropdown {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: transparent;
color: ${dt('select.toggle.color')};
width: 2.5rem;
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-select-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
padding: 0.5rem 0.75rem;
text-overflow: ellipsis;
cursor: pointer;
color: ${dt('select.color')};
background: transparent;
border: 0 none;
outline: 0 none;
}
.p-select-label.p-placeholder {
color: ${dt('select.placeholder.color')};
}
.p-select:has(.p-select-clear-icon) .p-select-label {
padding-right: 1.75rem;
}
.p-select.p-disabled .p-select-label {
color: ${dt('select.disabled.color')};
}
.p-select-label-empty {
overflow: hidden;
opacity: 0;
}
input.p-select-label {
cursor: default;
}
.p-select .p-select-overlay {
min-width: 100%;
}
.p-select-overlay {
position: absolute;
top: 0;
left: 0;
background: ${dt('select.overlay.background')};
color: ${dt('select.overlay.color')};
border: 1px solid ${dt('select.overlay.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.p-select-header {
padding: 0.5rem 0.5rem 0 0.5rem;
}
.p-select-filter {
width: 100%;
padding-right: 1.75rem;
margin-right: -1.75rem;
}
.p-select-filter-container {
position: relative;
}
.p-select-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
right: 0.75rem;
color: ${dt('select.filter.icon.color')};
}
.p-select-list-container {
overflow: auto;
}
.p-select-option-group {
cursor: auto;
margin: 0;
padding: 0.5rem 0.75rem;
background: ${dt('select.item.group.background')};
color: ${dt('select.item.group.color')};
font-weight: 600;
}
.p-select-list {
margin: 0;
padding: 0;
list-style-type: none;
padding: 0.25rem 0.25rem;
}
.p-select-option {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
margin: 2px 0;
padding: 0.5rem 0.75rem;
border: 0 none;
color: ${dt('select.item.color')};
background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')};
}
.p-select-option:first-child {
margin-top: 0;
}
.p-select-option:last-child {
margin-bottom: 0;
}
.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
background: ${dt('select.item.focus.background')};
color: ${dt('select.item.focus.color')};
}
.p-select-option.p-select-option-selected {
background: ${dt('select.item.selected.background')};
color: ${dt('select.item.selected.color')};
}
.p-select-option.p-select-option-selected.p-focus {
background: ${dt('select.item.selected.focus.background')};
color: ${dt('select.item.selected.focus.color')};
}
.p-select-option-check-icon {
position: relative;
margin-left: -0.375rem;
margin-right: 0.375rem;
color: ${dt('select.checkmark.color')};
}
.p-select-empty-message {
padding: 0.5rem 0.75rem;
background: transparent;
}
.p-fluid .p-select {
display: flex;
}
.p-fluid .p-select .p-select-label {
width: 1%;
}
`;
const classes = {
root: ({ instance, props, state }) => [
'p-select p-component p-inputwrapper',
@ -54,5 +268,6 @@ const classes = {
export default BaseStyle.extend({
name: 'select',
theme,
classes
});

35
components/lib/selectbutton/style/SelectButtonStyle.js
View File

@ -1,5 +1,39 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-selectbutton {
display: inline-flex;
user-select: none;
vertical-align: bottom;
outline-color: transparent;
border-radius: ${dt('rounded.base')};
}
.p-selectbutton .p-togglebutton {
border-radius: 0;
}
.p-selectbutton .p-togglebutton:focus-visible {
position: relative;
z-index: 1;
}
.p-selectbutton .p-togglebutton:first-child {
border-top-left-radius: ${dt('rounded.base')};
border-bottom-left-radius: ${dt('rounded.base')};
}
.p-selectbutton .p-togglebutton:last-child {
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-selectbutton.p-invalid {
outline: 1px solid ${dt('selectbutton.invalid.border.color')};
outline-offset: 0;
}
`;
const classes = {
root: ({ props }) => [
'p-selectbutton p-component',
@ -11,5 +45,6 @@ const classes = {
export default BaseStyle.extend({
name: 'selectbutton',
theme,
classes
});

39
components/lib/skeleton/style/SkeletonStyle.js
View File

@ -1,5 +1,43 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-skeleton {
overflow: hidden;
background-color: ${dt('skeleton.background')};
border-radius: ${dt('rounded.base')};
}
.p-skeleton::after {
content: "";
animation: p-skeleton-animation 1.2s infinite;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
transform: translateX(-100%);
z-index: 1;
background: linear-gradient( 90deg, rgba(255, 255, 255, 0), ${dt('skeleton.animation.background')}, rgba(255, 255, 255, 0) );
}
.p-skeleton-circle {
border-radius: 50%;
}
.p-skeleton-animation-none::after {
animation: none;
}
@keyframes p-skeleton-animation {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
`;
const inlineStyles = {
root: { position: 'relative' }
};
@ -16,6 +54,7 @@ const classes = {
export default BaseStyle.extend({
name: 'skeleton',
theme,
classes,
inlineStyles
});

83
components/lib/slider/style/SliderStyle.js
View File

@ -1,5 +1,87 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-slider {
position: relative;
background: ${dt('slider.track.background')};
border-radius: ${dt('rounded.base')};
}
.p-slider-handle {
cursor: grab;
touch-action: none;
display: flex;
justify-content: center;
align-items: center;
height: 20px;
width: 20px;
background: ${dt('slider.handle.background')};
border: 0 none;
border-radius: 50%;
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-slider-handle::before {
content: "";
width: 16px;
height: 16px;
display: block;
background-color: ${dt('slider.handle.content.background')};
border-radius: 50%;
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14);
}
.p-slider:not(.p-disabled) .p-slider-handle:hover {
background: ${dt('slider.handle.hover.background')};
border-color: transparent;
}
.p-slider-handle:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: 0;
}
.p-slider-range {
display: block;
background: ${dt('slider.range.background')};
border-radius: ${dt('rounded.base')};
}
.p-slider.p-slider-horizontal {
height: 3px;
}
.p-slider-horizontal .p-slider-range {
top: 0;
left: 0;
height: 100%;
}
.p-slider-horizontal .p-slider-handle {
top: 50%;
margin-top: -10px;
margin-left: -10px;
}
.p-slider-vertical {
height: 100px;
width: 3px;
}
.p-slider-vertical .p-slider-handle {
left: 50%;
margin-left: -10px;
margin-bottom: -10px;
}
.p-slider-vertical .p-slider-range {
bottom: 0;
left: 0;
width: 100%;
}
`;
const inlineStyles = {
handle: { position: 'absolute' },
range: { position: 'absolute' }
@ -20,6 +102,7 @@ const classes = {
export default BaseStyle.extend({
name: 'slider',
theme,
classes,
inlineStyles
});

80
components/lib/speeddial/style/SpeedDialStyle.js
View File

@ -1,5 +1,84 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-speeddial {
position: static;
display: flex;
gap: 0.25rem;
}
.p-speeddial-button {
z-index: 1;
width: 2.5rem;
height: 2.5rem;
}
.p-speeddial-button.p-speeddial-rotate {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt(
'transition.duration'
)}, outline-color ${dt('transition.duration')};
will-change: transform;
}
.p-speeddial-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
transition: top 0s linear ${dt('transition.duration')};
pointer-events: none;
outline: 0 none;
z-index: 2;
gap: 0.25rem;
}
.p-speeddial-item {
transform: scale(0);
opacity: 0;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
will-change: transform;
}
.p-speeddial-circle .p-speeddial-item,
.p-speeddial-semi-circle .p-speeddial-item,
.p-speeddial-quarter-circle .p-speeddial-item {
position: absolute;
}
.p-speeddial-mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background-color: ${dt('mask.background')};
border-radius: 6px;
transition: opacity 150ms;
}
.p-speeddial-mask-visible {
pointer-events: none;
opacity: 1;
transition: opacity 150ms;
}
.p-speeddial-open .p-speeddial-list {
pointer-events: auto;
}
.p-speeddial-open .p-speeddial-item {
transform: scale(1);
opacity: 1;
}
.p-speeddial-open .p-speeddial-rotate {
transform: rotate(45deg);
}
`;
/* Direction */
const inlineStyles = {
root: ({ props }) => ({
@ -41,6 +120,7 @@ const classes = {
export default BaseStyle.extend({
name: 'speeddial',
theme,
classes,
inlineStyles
});

71
components/lib/splitbutton/style/SplitButtonStyle.js
View File

@ -1,5 +1,75 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-splitbutton {
display: inline-flex;
position: relative;
border-radius: ${dt('rounded.base')};
}
.p-splitbutton-button {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0 none;
}
.p-splitbutton-button:not(:disabled):hover,
.p-splitbutton-button:not(:disabled):active {
border-right: 0 none;
}
.p-splitbutton-dropdown {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-splitbutton .p-menu {
min-width: 100%;
}
.p-fluid .p-splitbutton {
display: flex;
}
.p-splitbutton.p-button-rounded .p-splitbutton-button {
border-top-left-radius: 2rem;
border-bottom-left-radius: 2rem;;
}
.p-splitbutton.p-button-rounded .p-splitbutton-dropdown {
border-top-right-radius: 2rem;
border-bottom-right-radius: 2rem;;
}
.p-splitbutton.p-button-raised {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
/*
.p-splitbutton .p-splitbutton-button,
.p-splitbutton.p-button-rounded > .p-splitbutton-button.p-button,
.p-splitbutton.p-button-outlined > .p-splitbutton-button.p-button,
.p-splitbutton.p-button-outlined > .p-splitbutton-button.p-button-outlined.p-button:hover {
flex: 1 1 auto;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0 none;
}
.p-splitbutton-dropdown,
.p-splitbutton.p-button-rounded > .p-splitbutton-dropdown.p-button,
.p-splitbutton.p-button-outlined > .p-splitbutton-dropdown.p-button {
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
*/
`;
const classes = {
root: 'p-splitbutton p-component',
button: 'p-splitbutton-button',
@ -8,5 +78,6 @@ const classes = {
export default BaseStyle.extend({
name: 'splitbutton',
theme,
classes
});

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

@ -1,5 +1,84 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-splitter {
display: flex;
flex-wrap: nowrap;
border: 1px solid ${dt('splitter.border.color')};
background: ${dt('splitter.background')};
border-radius: ${dt('rounded.base')};
color: ${dt('splitter.color')};
}
.p-splitter-vertical {
flex-direction: column;
}
.p-splitter-gutter {
flex-grow: 0;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
background: ${dt('splitter.gutter.background')};
}
.p-splitter-gutter-handle {
border-radius: ${dt('rounded.base')};
background: transparent;
transition: outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-splitter-gutter-handle:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-splitter-horizontal.p-splitter-resizing {
cursor: col-resize;
user-select: none;
}
.p-splitter-vertical.p-splitter-resizing {
cursor: row-resize;
user-select: none;
}
.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
height: 24px;
width: 100%;
}
.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
width: 24px;
height: 100%;
}
.p-splitter-horizontal > .p-splitter-gutter {
cursor: col-resize;
}
.p-splitter-vertical > .p-splitter-gutter {
cursor: row-resize;
}
.p-splitter-panel {
flex-grow: 1;
overflow: hidden;
}
.p-splitter-panel-nested {
display: flex;
}
.p-splitter-panel .p-splitter {
flex-grow: 1;
border: 0 none;
}
`;
const classes = {
root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout],
gutter: 'p-splitter-gutter',
@ -12,6 +91,7 @@ const inlineStyles = {
export default BaseStyle.extend({
name: 'splitter',
theme,
classes,
inlineStyles
});

170
components/lib/stepper/style/StepperStyle.js
View File

@ -1,5 +1,174 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-stepper-list {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
overflow-x: auto;
}
.p-stepper-item {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
padding: 0.5rem;
}
.p-stepper-item:last-of-type {
flex: initial;
}
.p-stepper-item-header {
border: 0 none;
display: inline-flex;
align-items: center;
text-decoration: none;
cursor: pointer;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
background: transparent;
}
.p-stepper-item .p-stepper-item-header:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-stepper.p-stepper-readonly .p-stepper-item {
cursor: auto;
}
.p-stepper-item-title {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin-left: 0.5rem;
color: ${dt('stepper.title.color')};
font-weight: 500;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-stepper-item-number {
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: ${dt('stepper.marker.color')};
border: 1px solid ${dt('stepper.marker.border.color')};
border-width: 2px;
background: ${dt('stepper.marker.background')};
min-width: 2rem;
height: 2rem;
line-height: 2rem;
font-size: 1.143rem;
border-radius: 50%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-stepper-item-number::after {
content: " ";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-stepper-item-active .p-stepper-item-header {
cursor: default;
}
.p-stepper-item-active .p-stepper-item-number {
background: ${dt('stepper.marker.active.background')};
color: ${dt('stepper.marker.active.color')};
}
.p-stepper-item-active .p-stepper-item-title {
color: ${dt('stepper.title.active.color')};
}
.p-stepper-item:not(.p-disabled):focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-stepper-item:has(~ .p-stepper-item-active) .p-stepper-separator {
background: ${dt('stepper.connector.active.background')};
}
.p-stepper-separator {
flex: 1 1 0;
background: ${dt('stepper.connector.background')};
width: 100%;
height: 2px;
margin-inline-start: 1rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-stepper-panels {
background: ${dt('stepper.content.background')};
color: ${dt('stepper.content.color')};
padding: 0.875rem 1.125rem 1.125rem 1.125rem;
}
.p-stepper-vertical .p-stepper-list {
flex-direction: column;
}
.p-stepper-vertical {
display: flex;
flex-direction: column;
}
.p-stepper-vertical .p-stepper-panel-content-container {
display: flex;
flex: 1 1 auto;
}
.p-stepper-vertical .p-stepper-panel {
display: flex;
flex-direction: column;
flex: initial;
}
.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
flex: 1 1 auto;
}
.p-stepper-vertical .p-stepper-panel .p-stepper-item {
flex: initial;
}
.p-stepper-vertical .p-stepper-panel .p-stepper-panel-content {
width: 100%;
padding-left: 1rem;
}
.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
flex: 0 0 auto;
width: 2px;
height: auto;
margin-inline-start: calc(1.75rem + 2px);
}
.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
background: ${dt('stepper.connector.active.background')};
}
.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-panel-content {
padding-left: 3rem;
}
`;
const classes = {
root: ({ props }) => [
'p-stepper p-component',
@ -36,5 +205,6 @@ const classes = {
export default BaseStyle.extend({
name: 'stepper',
theme,
classes
});

117
components/lib/steps/style/StepsStyle.js
View File

@ -1,5 +1,121 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-steps {
position: relative;
}
.p-steps-list {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
}
.p-steps-item {
position: relative;
display: flex;
justify-content: center;
flex: 1 1 auto;
}
.p-steps-item.p-disabled,
.p-steps-item.p-disabled * {
opacity: 1;
pointer-events: auto;
user-select: auto;
cursor: auto;
}
.p-steps-item:before {
content: " ";
border-top: 2px solid ${dt('steps.connector.border.color')};
width: 100%;
top: 50%;
left: 0;
display: block;
position: absolute;
margin-top: -1rem;
margin-top: calc(-1rem + 1px);
}
.p-steps-item:first-child::before {
width: calc(50% + 1rem);
transform: translateX(100%);
}
.p-steps-item:last-child::before {
width: 50%;
}
.p-steps-item-link {
display: inline-flex;
flex-direction: column;
align-items: center;
overflow: hidden;
text-decoration: none;
transition: outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
}
.p-steps-item-link:not(.p-disabled):focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-steps-item-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
margin-top: 0.5rem;
color: ${dt('steps.item.color')};
display: block;
font-weight: 500;
}
.p-steps-item-number {
display: flex;
align-items: center;
justify-content: center;
color: ${dt('steps.marker.color')};
border: 2px solid ${dt('steps.marker.border.color')};
background: ${dt('steps.marker.background')};
min-width: 2rem;
height: 2rem;
line-height: 2rem;
font-size: 1.143rem;
z-index: 1;
border-radius: 50%;
position: relative;
font-weight: 500;
}
.p-steps-item-number::after {
content: " ";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
}
.p-steps:not(.p-readonly) .p-steps-item {
cursor: pointer;
}
.p-steps-item-active .p-steps-item-number {
background: ${dt('steps.marker.active.background')};
color: ${dt('steps.marker.active.color')};
}
.p-steps-item-active .p-steps-item-label {
font-weight: 500;
color: ${dt('steps.item.active.color')};
}
`;
const classes = {
root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
list: 'p-steps-list',
@ -17,5 +133,6 @@ const classes = {
export default BaseStyle.extend({
name: 'steps',
theme,
classes
});

4
components/lib/styled/PrimeVueStyled.js
View File

@ -1,11 +1,9 @@
import * as PrimeVueConfig from 'primevue/config';
import PrimeOne from 'primevue/themes/primeone';
import Aura from 'primevue/themes/primeone/aura';
import Aura from 'primevue/themes/aura';
export const defaultOptions = {
...PrimeVueConfig.defaultOptions,
theme: {
base: PrimeOne,
preset: Aura,
options: {
prefix: 'p',

74
components/lib/tabmenu/style/TabMenuStyle.js
View File

@ -1,5 +1,78 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-tabmenu {
overflow-x: auto;
}
.p-tabmenu-tablist {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex: 1 1 auto;
background: ${dt('tabmenu.nav.background')};
border: 1px solid ${dt('tabmenu.nav.border.color')};
border-width: 0 0 1px 0;
position: relative;
}
.p-tabmenu-item-link {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
text-decoration: none;
position: relative;
overflow: hidden;
border-style: solid;
border-width: 0 0 1px 0;
border-color: transparent transparent ${dt('tabmenu.header.border.color')} transparent;
color: ${dt('tabmenu.header.color')};
padding: 1rem 1.125rem;
font-weight: 600;
border-top-right-radius: ${dt('rounded.base')};
border-top-left-radius: ${dt('rounded.base')};
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
margin: 0 0 -1px 0;
outline-color: transparent;
}
.p-tabmenu-item-link:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px;
}
.p-tabmenu-item-icon {
margin-right: 0.5rem;
}
.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.header.hover.color')};
}
.p-tabmenu-item-active .p-tabmenu-item-link {
color: ${dt('tabmenu.header.active.border.color')};
}
.p-tabmenu-ink-bar {
z-index: 1;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background-color: ${dt('tabmenu.header.active.border.color')};
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
.p-tabmenu::-webkit-scrollbar {
display: none;
}
`;
const classes = {
root: 'p-tabmenu p-component',
tablist: 'p-tabmenu-tablist',
@ -18,5 +91,6 @@ const classes = {
export default BaseStyle.extend({
name: 'tabmenu',
theme,
classes
});

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

@ -1,5 +1,124 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-tabs {
display: flex;
flex-direction: column;
}
.p-tablist {
position: relative;
}
.p-tabs-scrollable > .p-tablist {
overflow: hidden;
}
.p-tablist-viewport {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior: contain auto;
}
.p-tablist-viewport::-webkit-scrollbar {
display: none;
}
.p-tablist-tab-list {
position: relative;
display: flex;
background: ${dt('tabs.nav.background')};
border: 1px solid ${dt('tabs.nav.border.color')};
border-width: 0 0 1px 0;
}
.p-tablist-prev-button,
.p-tablist-next-button {
all: unset;
position: absolute;
top: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: ${dt('tabs.navigator.icon.background')};
color: ${dt('tabs.navigator.icon.color')};
width: 2.5rem;
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
box-shadow: ${dt('tabs.navigator.icon.box.shadow')};
cursor: pointer;
}
.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-offset: ${dt('focus.ring.offset')};
}
.p-tablist-prev-button:hover,
.p-tablist-next-button:hover {
color: ${dt('tabs.navigator.icon.hover.color')};
}
.p-tablist-prev-button {
left: 0;
}
.p-tablist-next-button {
right: 0;
}
.p-tab {
cursor: pointer;
border-style: solid;
border-width: 0 0 1px 0;
border-color: transparent transparent ${dt('tabs.header.border.color')} transparent;
color: ${dt('tabs.header.color')};
background: ${dt('tabs.nav.background')};
padding: 1rem 1.125rem;
font-weight: 600;
border-top-right-radius: ${dt('rounded.base')};
border-top-left-radius: ${dt('rounded.base')};
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
margin: 0 0 -1px 0;
outline-color: transparent;
line-height: 1;
white-space: nowrap;
}
.p-tab:not(.p-disabled):focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px;
}
.p-tab:not(.p-tab-active):not(.p-disabled):hover {
color: ${dt('tabs.header.hover.color')};
}
.p-tab-active {
color: ${dt('tabs.header.active.color')};
}
.p-tabpanels {
background: ${dt('tabs.navigator.content.background')};
color: ${dt('tabs.navigator.content.color')};
padding: 0.875rem 1.125rem 1.125rem 1.125rem;
}
.p-tablist-active-bar {
z-index: 1;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background-color: ${dt('tabs.header.active.border.color')};
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
`;
const classes = {
root: ({ props }) => [
'p-tabs p-component',
@ -11,5 +130,6 @@ const classes = {
export default BaseStyle.extend({
name: 'tabs',
theme,
classes
});

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

@ -1,5 +1,136 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-tabview-tablist-container {
position: relative;
}
.p-tabview-scrollable > .p-tabview-tablist-container {
overflow: hidden;
}
.p-tabview-tablist-scroll-container {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior: contain auto;
}
.p-tabview-tablist-scroll-container::-webkit-scrollbar {
display: none;
}
.p-tabview-tablist {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex: 1 1 auto;
background: ${dt('tabview.nav.background')};
border: 1px solid ${dt('tabview.nav.border.color')};
border-width: 0 0 1px 0;
position: relative;
}
.p-tabview-tab-header {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
text-decoration: none;
position: relative;
overflow: hidden;
border-style: solid;
border-width: 0 0 1px 0;
border-color: transparent transparent ${dt('tabview.header.border.color')} transparent;
color: ${dt('tabview.header.color')};
padding: 1rem 1.125rem;
font-weight: 600;
border-top-right-radius: ${dt('rounded.base')};
border-top-left-radius: ${dt('rounded.base')};
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
margin: 0 0 -1px 0;
outline-color: transparent;
}
.p-tabview-tablist-item:not(.p-disabled) .p-tabview-tab-header:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px;
}
.p-tabview-tablist-item:not(.p-highlight):not(.p-disabled):hover > .p-tabview-tab-header {
color: ${dt('tabview.header.hover.color')};
}
.p-tabview-tablist-item.p-highlight > .p-tabview-tab-header {
color: ${dt('tabview.header.active.color')};
}
.p-tabview-tab-title {
line-height: 1;
white-space: nowrap;
}
.p-tabview-next-button,
.p-tabview-prev-button {
position: absolute;
top: 0;
margin: 0;
padding: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: ${dt('tabview.navigator.icon.background')};
color: ${dt('tabview.navigator.icon.color')};
width: 2.5rem;
border-radius: 0;
outline-color: transparent;
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
box-shadow: ${dt('tabview.navigator.icon.box.shadow')};
border: none;
cursor: pointer;
user-select: none;
}
.p-tabview-next-button:focus-visible,
.p-tabview-prev-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-tabview-next-button:hover,
.p-tabview-prev-button:hover {
color: ${dt('tabview.navigator.icon.hover.color')};
}
.p-tabview-prev-button {
left: 0;
}
.p-tabview-next-button {
right: 0;
}
.p-tabview-panels {
background: ${dt('tabview.navigator.content.background')};
color: ${dt('tabview.navigator.content.color')};
padding: 0.875rem 1.125rem 1.125rem 1.125rem;
}
.p-tabview-ink-bar {
z-index: 1;
display: block;
position: absolute;
bottom: -1px;
height: 1px;
background-color: ${dt('tabview.header.active.border.color')};
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
`;
const classes = {
root: ({ props }) => [
'p-tabview p-component',
@ -31,5 +162,6 @@ const classes = {
export default BaseStyle.extend({
name: 'tabview',
theme,
classes
});

56
components/lib/tag/style/TagStyle.js
View File

@ -1,5 +1,60 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-tag {
display: inline-flex;
align-items: center;
justify-content: center;
background: ${dt('tag.primary.background')};
color: ${dt('tag.primary.color')};
font-size: 0.875rem;
font-weight: 700;
padding: 0.25rem 0.4rem;
border-radius: ${dt('rounded.base')};
gap: 0.25rem;
}
.p-tag-icon {
font-size: 0.75rem;
width: 0.75rem;
height: 0.75rem;
}
.p-tag-rounded {
border-radius: 10rem;
}
.p-tag-success {
background: ${dt('tag.success.background')};
color: ${dt('tag.success.color')};
}
.p-tag-info {
background: ${dt('tag.info.background')};
color: ${dt('tag.info.color')};
}
.p-tag-warn {
background: ${dt('tag.warn.background')};
color: ${dt('tag.warn.color')};
}
.p-tag-danger {
background: ${dt('tag.danger.background')};
color: ${dt('tag.danger.color')};
}
.p-tag-secondary {
background: ${dt('tag.secondary.background')};
color: ${dt('tag.secondary.color')};
}
.p-tag-contrast {
background: ${dt('tag.contrast.background')};
color: ${dt('tag.contrast.color')};
}
`;
const classes = {
root: ({ props }) => [
'p-tag p-component',
@ -19,5 +74,6 @@ const classes = {
export default BaseStyle.extend({
name: 'tag',
theme,
classes
});

42
components/lib/terminal/style/TerminalStyle.js
View File

@ -1,5 +1,46 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-terminal {
height: 18rem;
overflow: auto;
background: ${dt('terminal.background')};
color: ${dt('terminal.color')};
border: 1px solid ${dt('terminal.border.color')};
padding: 0.5rem 0.75rem;
border-radius: ${dt('rounded.base')};
}
.p-terminal-prompt {
display: flex;
align-items: center;
}
.p-terminal-prompt-value {
flex: 1 1 auto;
border: 0 none;
background-color: transparent;
color: inherit;
padding: 0;
outline: 0 none;
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
}
.p-terminal-prompt-label {
margin-right: 0.25rem;
}
.p-terminal-input::-ms-clear {
display: none;
}
.p-terminal-command-response {
margin: 2px 0;
}
`;
const classes = {
root: 'p-terminal p-component',
welcomeMessage: 'p-terminal-welcome-message',
@ -14,5 +55,6 @@ const classes = {
export default BaseStyle.extend({
name: 'terminal',
theme,
classes
});

58
components/lib/textarea/style/TextareaStyle.js
View File

@ -1,5 +1,62 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-inputtextarea {
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
color: ${dt('textarea.color')};
background: ${dt('textarea.background')};
padding: 0.5rem 0.75rem;
border: 1px solid ${dt('textarea.border.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
appearance: none;
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: ${dt('textarea.box.shadow')};
}
.p-inputtextarea:enabled:hover {
border-color: ${dt('textarea.hover.border.color')};
}
.p-inputtextarea:enabled:focus {
border-color: ${dt('textarea.focus.border.color')};
outline: 0 none;
}
.p-inputtextarea.p-invalid {
border-color: ${dt('textarea.invalid.border.color')};
}
.p-inputtextarea.p-variant-filled {
background-color: ${dt('textarea.filled.background')};
}
.p-inputtextarea.p-variant-filled:enabled:focus {
background-color: ${dt('textarea.filled.focus.background')};
}
.p-inputtextarea:disabled {
opacity: 1;
background: ${dt('textarea.disabled.background')};
color: ${dt('textarea.disabled.color')};
}
.p-inputtextarea::placeholder {
color: ${dt('textarea.placeholder.color')};
}
.p-fluid .p-inputtextarea {
width: 100%;
}
.p-inputtextarea-resizable {
overflow: hidden;
resize: none;
}
`;
const classes = {
root: ({ instance, props }) => [
'p-inputtextarea p-component',
@ -14,5 +71,6 @@ const classes = {
export default BaseStyle.extend({
name: 'textarea',
theme,
classes
});

0
components/lib/themes/primeone/presets/aura/accordion/index.js → components/lib/themes/aura/accordion/index.js
View File

0
components/lib/themes/primeone/aura/package.json → components/lib/themes/aura/accordion/package.json
View File

0
components/lib/themes/primeone/presets/aura/autocomplete/index.js → components/lib/themes/aura/autocomplete/index.js
View File

0
components/lib/themes/primeone/base/accordion/package.json → components/lib/themes/aura/autocomplete/package.json
View File

0
components/lib/themes/primeone/presets/aura/avatar/index.js → components/lib/themes/aura/avatar/index.js
View File

0
components/lib/themes/primeone/base/autocomplete/package.json → components/lib/themes/aura/avatar/package.json
View File

0
components/lib/themes/primeone/presets/aura/badge/index.js → components/lib/themes/aura/badge/index.js
View File

0
components/lib/themes/primeone/base/avatar/package.json → components/lib/themes/aura/badge/package.json
View File

0
components/lib/themes/primeone/presets/aura/blockui/index.js → components/lib/themes/aura/blockui/index.js
View File

0
components/lib/themes/primeone/base/badge/package.json → components/lib/themes/aura/blockui/package.json
View File

0
components/lib/themes/primeone/presets/aura/breadcrumb/index.js → components/lib/themes/aura/breadcrumb/index.js
View File

0
components/lib/themes/primeone/base/blockui/package.json → components/lib/themes/aura/breadcrumb/package.json
View File

0
components/lib/themes/primeone/presets/aura/button/index.js → components/lib/themes/aura/button/index.js
View File

0
components/lib/themes/primeone/base/breadcrumb/package.json → components/lib/themes/aura/button/package.json
View File

0
components/lib/themes/primeone/presets/aura/buttongroup/index.js → components/lib/themes/aura/buttongroup/index.js
View File

0
components/lib/themes/primeone/base/button/package.json → components/lib/themes/aura/buttongroup/package.json
View File

0
components/lib/themes/primeone/presets/aura/card/index.js → components/lib/themes/aura/card/index.js
View File

0
components/lib/themes/primeone/base/buttongroup/package.json → components/lib/themes/aura/card/package.json
View File

0
components/lib/themes/primeone/presets/aura/carousel/index.js → components/lib/themes/aura/carousel/index.js
View File

0
components/lib/themes/primeone/base/card/package.json → components/lib/themes/aura/carousel/package.json
View File

0
components/lib/themes/primeone/presets/aura/cascadeselect/index.js → components/lib/themes/aura/cascadeselect/index.js
View File

0
components/lib/themes/primeone/base/carousel/package.json → components/lib/themes/aura/cascadeselect/package.json
View File

0
components/lib/themes/primeone/presets/aura/checkbox/index.js → components/lib/themes/aura/checkbox/index.js
View File

0
components/lib/themes/primeone/base/cascadeselect/package.json → components/lib/themes/aura/checkbox/package.json
View File

Some files were not shown because too many files have changed in this diff Show More