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

Fixed #7153 - Port all styles to @primeuix/styles

pull/7157/head
tugcekucukoglu 2025-01-27 14:52:25 +03:00
parent f009680452
commit 4852576beb
90 changed files with 90 additions and 11869 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
packages/primevue/src/accordion/style/AccordionStyle.js
View File

@ -1,97 +1,6 @@
import { theme } from '@primeuix/styles/accordion';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-accordionpanel {
display: flex;
flex-direction: column;
border-style: solid;
border-width: ${dt('accordion.panel.border.width')};
border-color: ${dt('accordion.panel.border.color')};
}
.p-accordionheader {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: ${dt('accordion.header.padding')};
color: ${dt('accordion.header.color')};
background: ${dt('accordion.header.background')};
border-style: solid;
border-width: ${dt('accordion.header.border.width')};
border-color: ${dt('accordion.header.border.color')};
font-weight: ${dt('accordion.header.font.weight')};
border-radius: ${dt('accordion.header.border.radius')};
transition: background ${dt('accordion.transition.duration')}; color ${dt('accordion.transition.duration')}color ${dt('accordion.transition.duration')}, outline-color ${dt('accordion.transition.duration')}, box-shadow ${dt(
'accordion.transition.duration'
)};
outline-color: transparent;
}
.p-accordionpanel:first-child > .p-accordionheader {
border-width: ${dt('accordion.header.first.border.width')};
border-start-start-radius: ${dt('accordion.header.first.top.border.radius')};
border-start-end-radius: ${dt('accordion.header.first.top.border.radius')};
}
.p-accordionpanel:last-child > .p-accordionheader {
border-end-start-radius: ${dt('accordion.header.last.bottom.border.radius')};
border-end-end-radius: ${dt('accordion.header.last.bottom.border.radius')};
}
.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
border-end-start-radius: ${dt('accordion.header.last.active.bottom.border.radius')};
border-end-end-radius: ${dt('accordion.header.last.active.bottom.border.radius')};
}
.p-accordionheader-toggle-icon {
color: ${dt('accordion.header.toggle.icon.color')};
}
.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
box-shadow: ${dt('accordion.header.focus.ring.shadow')};
outline: ${dt('accordion.header.focus.ring.width')} ${dt('accordion.header.focus.ring.style')} ${dt('accordion.header.focus.ring.color')};
outline-offset: ${dt('accordion.header.focus.ring.offset')};
}
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {
background: ${dt('accordion.header.hover.background')};
color: ${dt('accordion.header.hover.color')};
}
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {
color: ${dt('accordion.header.toggle.icon.hover.color')};
}
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
background: ${dt('accordion.header.active.background')};
color: ${dt('accordion.header.active.color')};
}
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {
color: ${dt('accordion.header.toggle.icon.active.color')};
}
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover {
background: ${dt('accordion.header.active.hover.background')};
color: ${dt('accordion.header.active.hover.color')};
}
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover .p-accordionheader-toggle-icon {
color: ${dt('accordion.header.toggle.icon.active.hover.color')};
}
.p-accordioncontent-content {
border-style: solid;
border-width: ${dt('accordion.content.border.width')};
border-color: ${dt('accordion.content.border.color')};
background-color: ${dt('accordion.content.background')};
color: ${dt('accordion.content.color')};
padding: ${dt('accordion.content.padding')};
}
`;
const classes = {
root: 'p-accordion p-component'
};

267
packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
View File

@ -1,272 +1,7 @@
import { theme } from '@primeuix/styles/autocomplete';
import { isNotEmpty } from '@primeuix/utils/object';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-autocomplete {
display: inline-flex;
}
.p-autocomplete-loader {
position: absolute;
top: 50%;
margin-top: -0.5rem;
inset-inline-end: ${dt('autocomplete.padding.x')};
}
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
inset-inline-end: calc(${dt('autocomplete.dropdown.width')} + ${dt('autocomplete.padding.x')});
}
.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-start-end-radius: 0;
border-end-end-radius: 0;
}
.p-autocomplete-dropdown {
cursor: pointer;
display: inline-flex;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('autocomplete.dropdown.width')};
border-start-end-radius: ${dt('autocomplete.dropdown.border.radius')};
border-end-end-radius: ${dt('autocomplete.dropdown.border.radius')};
background: ${dt('autocomplete.dropdown.background')};
border: 1px solid ${dt('autocomplete.dropdown.border.color')};
border-inline-start: 0 none;
color: ${dt('autocomplete.dropdown.color')};
transition: background ${dt('autocomplete.transition.duration')}, color ${dt('autocomplete.transition.duration')}, border-color ${dt('autocomplete.transition.duration')}, outline-color ${dt('autocomplete.transition.duration')}, box-shadow ${dt(
'autocomplete.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')};
color: ${dt('autocomplete.dropdown.hover.color')};
}
.p-autocomplete-dropdown:not(:disabled):active {
background: ${dt('autocomplete.dropdown.active.background')};
border-color: ${dt('autocomplete.dropdown.active.border.color')};
color: ${dt('autocomplete.dropdown.active.color')};
}
.p-autocomplete-dropdown:focus-visible {
box-shadow: ${dt('autocomplete.dropdown.focus.ring.shadow')};
outline: ${dt('autocomplete.dropdown.focus.ring.width')} ${dt('autocomplete.dropdown.focus.ring.style')} ${dt('autocomplete.dropdown.focus.ring.color')};
outline-offset: ${dt('autocomplete.dropdown.focus.ring.offset')};
}
.p-autocomplete .p-autocomplete-overlay {
min-width: 100%;
}
.p-autocomplete-overlay {
position: absolute;
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('autocomplete.overlay.border.radius')};
box-shadow: ${dt('autocomplete.overlay.shadow')};
}
.p-autocomplete-list-container {
overflow: auto;
}
.p-autocomplete-list {
margin: 0;
list-style-type: none;
display: flex;
flex-direction: column;
gap: ${dt('autocomplete.list.gap')};
padding: ${dt('autocomplete.list.padding')};
}
.p-autocomplete-option {
cursor: pointer;
white-space: nowrap;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: ${dt('autocomplete.option.padding')};
border: 0 none;
color: ${dt('autocomplete.option.color')};
background: transparent;
transition: background ${dt('autocomplete.transition.duration')}, color ${dt('autocomplete.transition.duration')}, border-color ${dt('autocomplete.transition.duration')};
border-radius: ${dt('autocomplete.option.border.radius')};
}
.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
background: ${dt('autocomplete.option.focus.background')};
color: ${dt('autocomplete.option.focus.color')};
}
.p-autocomplete-option-selected {
background: ${dt('autocomplete.option.selected.background')};
color: ${dt('autocomplete.option.selected.color')};
}
.p-autocomplete-option-selected.p-focus {
background: ${dt('autocomplete.option.selected.focus.background')};
color: ${dt('autocomplete.option.selected.focus.color')};
}
.p-autocomplete-option-group {
margin: 0;
padding: ${dt('autocomplete.option.group.padding')};
color: ${dt('autocomplete.option.group.color')};
background: ${dt('autocomplete.option.group.background')};
font-weight: ${dt('autocomplete.option.group.font.weight')};
}
.p-autocomplete-input-multiple {
margin: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: calc(${dt('autocomplete.padding.y')} / 2) ${dt('autocomplete.padding.x')};
gap: calc(${dt('autocomplete.padding.y')} / 2);
color: ${dt('autocomplete.color')};
background: ${dt('autocomplete.background')};
border: 1px solid ${dt('autocomplete.border.color')};
border-radius: ${dt('autocomplete.border.radius')};
width: 100%;
transition: background ${dt('autocomplete.transition.duration')}, color ${dt('autocomplete.transition.duration')}, border-color ${dt('autocomplete.transition.duration')}, outline-color ${dt('autocomplete.transition.duration')}, box-shadow ${dt(
'autocomplete.transition.duration'
)};
outline-color: transparent;
box-shadow: ${dt('autocomplete.shadow')};
}
.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.hover.border.color')};
}
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.focus.border.color')};
box-shadow: ${dt('autocomplete.focus.ring.shadow')};
outline: ${dt('autocomplete.focus.ring.width')} ${dt('autocomplete.focus.ring.style')} ${dt('autocomplete.focus.ring.color')};
outline-offset: ${dt('autocomplete.focus.ring.offset')};
}
.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
border-color: ${dt('autocomplete.invalid.border.color')};
}
.p-variant-filled.p-autocomplete-input-multiple {
background: ${dt('autocomplete.filled.background')};
}
.p-autocomplete:not(.p-disabled):hover .p-variant-filled.p-autocomplete-input-multiple {
background: ${dt('autocomplete.filled.hover.background')};
}
.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple {
background: ${dt('autocomplete.filled.focus.background')};
}
.p-autocomplete.p-disabled .p-autocomplete-input-multiple {
opacity: 1;
background: ${dt('autocomplete.disabled.background')};
color: ${dt('autocomplete.disabled.color')};
}
.p-autocomplete-chip.p-chip {
padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
border-radius: ${dt('autocomplete.chip.border.radius')};
}
.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
padding-inline-start: calc(${dt('autocomplete.padding.y')} / 2);
padding-inline-end: calc(${dt('autocomplete.padding.y')} / 2);
}
.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
background: ${dt('autocomplete.chip.focus.background')};
color: ${dt('autocomplete.chip.focus.color')};
}
.p-autocomplete-input-chip {
flex: 1 1 auto;
display: inline-flex;
padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
}
.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.placeholder.color')};
}
.p-autocomplete.p-invalid .p-autocomplete-input-chip input::placeholder {
color: ${dt('autocomplete.invalid.placeholder.color')};
}
.p-autocomplete-empty-message {
padding: ${dt('autocomplete.empty.message.padding')};
}
.p-autocomplete-fluid {
display: flex;
}
.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
width: 1%;
}
.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown {
width: ${dt('autocomplete.dropdown.sm.width')};
}
.p-autocomplete:has(.p-inputtext-sm) .p-autocomplete-dropdown .p-icon {
font-size: ${dt('form.field.sm.font.size')};
width: ${dt('form.field.sm.font.size')};
height: ${dt('form.field.sm.font.size')};
}
.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown {
width: ${dt('autocomplete.dropdown.lg.width')};
}
.p-autocomplete:has(.p-inputtext-lg) .p-autocomplete-dropdown .p-icon {
font-size: ${dt('form.field.lg.font.size')};
width: ${dt('form.field.lg.font.size')};
height: ${dt('form.field.lg.font.size')};
}
`;
const inlineStyles = {
root: { position: 'relative' }
};

83
packages/primevue/src/avatar/style/AvatarStyle.js
View File

@ -1,87 +1,6 @@
import { theme } from '@primeuix/styles/avatar';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: ${dt('avatar.width')};
height: ${dt('avatar.height')};
font-size: ${dt('avatar.font.size')};
background: ${dt('avatar.background')};
color: ${dt('avatar.color')};
border-radius: ${dt('avatar.border.radius')};
}
.p-avatar-image {
background: transparent;
}
.p-avatar-circle {
border-radius: 50%;
}
.p-avatar-circle img {
border-radius: 50%;
}
.p-avatar-icon {
font-size: ${dt('avatar.icon.size')};
width: ${dt('avatar.icon.size')};
height: ${dt('avatar.icon.size')};
}
.p-avatar img {
width: 100%;
height: 100%;
}
.p-avatar-lg {
width: ${dt('avatar.lg.width')};
height: ${dt('avatar.lg.width')};
font-size: ${dt('avatar.lg.font.size')};
}
.p-avatar-lg .p-avatar-icon {
font-size: ${dt('avatar.lg.icon.size')};
width: ${dt('avatar.lg.icon.size')};
height: ${dt('avatar.lg.icon.size')};
}
.p-avatar-xl {
width: ${dt('avatar.xl.width')};
height: ${dt('avatar.xl.width')};
font-size: ${dt('avatar.xl.font.size')};
}
.p-avatar-xl .p-avatar-icon {
font-size: ${dt('avatar.xl.icon.size')};
width: ${dt('avatar.xl.icon.size')};
height: ${dt('avatar.xl.icon.size')};
}
.p-avatar-group {
display: flex;
align-items: center;
}
.p-avatar-group .p-avatar + .p-avatar {
margin-inline-start: ${dt('avatar.group.offset')};
}
.p-avatar-group .p-avatar {
border: 2px solid ${dt('avatar.group.border.color')};
}
.p-avatar-group .p-avatar-lg + .p-avatar-lg {
margin-inline-start: ${dt('avatar.lg.group.offset')};
}
.p-avatar-group .p-avatar-xl + .p-avatar-xl {
margin-inline-start: ${dt('avatar.xl.group.offset')};
}
`;
const classes = {
root: ({ props }) => [
'p-avatar p-component',

78
packages/primevue/src/badge/style/BadgeStyle.js
View File

@ -1,83 +1,7 @@
import { theme } from '@primeuix/styles/badge';
import { isEmpty, isNotEmpty } from '@primeuix/utils/object';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-badge {
display: inline-flex;
border-radius: ${dt('badge.border.radius')};
align-items: center;
justify-content: center;
padding: ${dt('badge.padding')};
background: ${dt('badge.primary.background')};
color: ${dt('badge.primary.color')};
font-size: ${dt('badge.font.size')};
font-weight: ${dt('badge.font.weight')};
min-width: ${dt('badge.min.width')};
height: ${dt('badge.height')};
}
.p-badge-dot {
width: ${dt('badge.dot.size')};
min-width: ${dt('badge.dot.size')};
height: ${dt('badge.dot.size')};
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-sm {
font-size: ${dt('badge.sm.font.size')};
min-width: ${dt('badge.sm.min.width')};
height: ${dt('badge.sm.height')};
}
.p-badge-lg {
font-size: ${dt('badge.lg.font.size')};
min-width: ${dt('badge.lg.min.width')};
height: ${dt('badge.lg.height')};
}
.p-badge-xl {
font-size: ${dt('badge.xl.font.size')};
min-width: ${dt('badge.xl.min.width')};
height: ${dt('badge.xl.height')};
}
`;
const classes = {
root: ({ props, instance }) => [
'p-badge p-component',

19
packages/primevue/src/blockui/style/BlockUIStyle.js
View File

@ -1,23 +1,6 @@
import { theme } from '@primeuix/styles/blockui';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-blockui {
position: relative;
}
.p-blockui-mask {
border-radius: ${dt('blockui.border.radius')};
}
.p-blockui-mask.p-overlay-mask {
position: absolute;
}
.p-blockui-mask-document.p-overlay-mask {
position: fixed;
}
`;
const classes = {
root: 'p-blockui'
};

67
packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js
View File

@ -1,71 +1,6 @@
import { theme } from '@primeuix/styles/breadcrumb';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-breadcrumb {
background: ${dt('breadcrumb.background')};
padding: ${dt('breadcrumb.padding')};
overflow-x: auto;
}
.p-breadcrumb-list {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: ${dt('breadcrumb.gap')};
}
.p-breadcrumb-separator {
display: flex;
align-items: center;
color: ${dt('breadcrumb.separator.color')};
}
.p-breadcrumb-separator-icon:dir(rtl) {
transform: rotate(180deg);
}
.p-breadcrumb::-webkit-scrollbar {
display: none;
}
.p-breadcrumb-item-link {
text-decoration: none;
display: flex;
align-items: center;
gap: ${dt('breadcrumb.item.gap')};
transition: background ${dt('breadcrumb.transition.duration')}, color ${dt('breadcrumb.transition.duration')}, outline-color ${dt('breadcrumb.transition.duration')}, box-shadow ${dt('breadcrumb.transition.duration')};
border-radius: ${dt('breadcrumb.item.border.radius')};
outline-color: transparent;
color: ${dt('breadcrumb.item.color')};
}
.p-breadcrumb-item-link:focus-visible {
box-shadow: ${dt('breadcrumb.item.focus.ring.shadow')};
outline: ${dt('breadcrumb.item.focus.ring.width')} ${dt('breadcrumb.item.focus.ring.style')} ${dt('breadcrumb.item.focus.ring.color')};
outline-offset: ${dt('breadcrumb.item.focus.ring.offset')};
}
.p-breadcrumb-item-link:hover .p-breadcrumb-item-label {
color: ${dt('breadcrumb.item.hover.color')};
}
.p-breadcrumb-item-label {
transition: inherit;
}
.p-breadcrumb-item-icon {
color: ${dt('breadcrumb.item.icon.color')};
transition: inherit;
}
.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {
color: ${dt('breadcrumb.item.icon.hover.color')};
}
`;
const classes = {
root: 'p-breadcrumb p-component',
list: 'p-breadcrumb-list',

643
packages/primevue/src/button/style/ButtonStyle.js
View File

@ -1,647 +1,6 @@
import { theme } from '@primeuix/styles/button';
import BaseStyle from '@primevue/core/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: ${dt('button.padding.y')} ${dt('button.padding.x')};
font-size: 1rem;
font-family: inherit;
font-feature-settings: inherit;
transition: background ${dt('button.transition.duration')}, color ${dt('button.transition.duration')}, border-color ${dt('button.transition.duration')},
outline-color ${dt('button.transition.duration')}, box-shadow ${dt('button.transition.duration')};
border-radius: ${dt('button.border.radius')};
outline-color: transparent;
gap: ${dt('button.gap')};
}
.p-button:disabled {
cursor: default;
}
.p-button-icon-right {
order: 1;
}
.p-button-icon-right:dir(rtl) {
order: -1;
}
.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) {
order: 1;
}
.p-button-icon-bottom {
order: 2;
}
.p-button-icon-only {
width: ${dt('button.icon.only.width')};
padding-inline-start: 0;
padding-inline-end: 0;
gap: 0;
}
.p-button-icon-only.p-button-rounded {
border-radius: 50%;
height: ${dt('button.icon.only.width')};
}
.p-button-icon-only .p-button-label {
visibility: hidden;
width: 0;
}
.p-button-sm {
font-size: ${dt('button.sm.font.size')};
padding: ${dt('button.sm.padding.y')} ${dt('button.sm.padding.x')};
}
.p-button-sm .p-button-icon {
font-size: ${dt('button.sm.font.size')};
}
.p-button-sm.p-button-icon-only {
width: ${dt('button.sm.icon.only.width')};
}
.p-button-sm.p-button-icon-only.p-button-rounded {
height: ${dt('button.sm.icon.only.width')};
}
.p-button-lg {
font-size: ${dt('button.lg.font.size')};
padding: ${dt('button.lg.padding.y')} ${dt('button.lg.padding.x')};
}
.p-button-lg .p-button-icon {
font-size: ${dt('button.lg.font.size')};
}
.p-button-lg.p-button-icon-only {
width: ${dt('button.lg.icon.only.width')};
}
.p-button-lg.p-button-icon-only.p-button-rounded {
height: ${dt('button.lg.icon.only.width')};
}
.p-button-vertical {
flex-direction: column;
}
.p-button-label {
font-weight: ${dt('button.label.font.weight')};
}
.p-button-fluid {
width: 100%;
}
.p-button-fluid.p-button-icon-only {
width: ${dt('button.icon.only.width')};
}
.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 {
box-shadow: ${dt('button.primary.focus.ring.shadow')};
outline: ${dt('button.focus.ring.width')} ${dt('button.focus.ring.style')} ${dt('button.primary.focus.ring.color')};
outline-offset: ${dt('button.focus.ring.offset')};
}
.p-button .p-badge {
min-width: ${dt('button.badge.size')};
height: ${dt('button.badge.size')};
line-height: ${dt('button.badge.size')};
}
.p-button-raised {
box-shadow: ${dt('button.raised.shadow')};
}
.p-button-rounded {
border-radius: ${dt('button.rounded.border.radius')};
}
.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-secondary:focus-visible {
outline-color: ${dt('button.secondary.focus.ring.color')};
box-shadow: ${dt('button.secondary.focus.ring.shadow')};
}
.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.focus.ring.color')};
box-shadow: ${dt('button.success.focus.ring.shadow')};
}
.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.focus.ring.color')};
box-shadow: ${dt('button.info.focus.ring.shadow')};
}
.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 {
outline-color: ${dt('button.warn.focus.ring.color')};
box-shadow: ${dt('button.warn.focus.ring.shadow')};
}
.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.focus.ring.color')};
box-shadow: ${dt('button.help.focus.ring.shadow')};
}
.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 {
outline-color: ${dt('button.danger.focus.ring.color')};
box-shadow: ${dt('button.danger.focus.ring.shadow')};
}
.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.focus.ring.color')};
box-shadow: ${dt('button.contrast.focus.ring.shadow')};
}
.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')};
}
.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-contrast {
background: transparent;
border-color: transparent;
color: ${dt('button.text.contrast.color')};
}
.p-button-text.p-button-contrast:not(:disabled):hover {
background: ${dt('button.text.contrast.hover.background')};
border-color: transparent;
color: ${dt('button.text.contrast.color')};
}
.p-button-text.p-button-contrast:not(:disabled):active {
background: ${dt('button.text.contrast.active.background')};
border-color: transparent;
color: ${dt('button.text.contrast.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')};
}
.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',

35
packages/primevue/src/buttongroup/style/ButtonGroupStyle.js
View File

@ -1,39 +1,6 @@
import { theme } from '@primeuix/styles/buttongroup';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-buttongroup {
display: inline-flex;
}
.p-buttongroup .p-button {
margin: 0;
}
.p-buttongroup .p-button:not(:last-child),
.p-buttongroup .p-button:not(:last-child):hover {
border-inline-end: 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-start-end-radius: 0;
border-end-end-radius: 0;
}
.p-buttongroup .p-button:last-of-type:not(:only-of-type) {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.p-buttongroup .p-button:focus {
position: relative;
z-index: 1;
}
`;
const classes = {
root: 'p-buttongroup p-component'
};

34
packages/primevue/src/card/style/CardStyle.js
View File

@ -1,38 +1,6 @@
import { theme } from '@primeuix/styles/card';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-card {
background: ${dt('card.background')};
color: ${dt('card.color')};
box-shadow: ${dt('card.shadow')};
border-radius: ${dt('card.border.radius')};
display: flex;
flex-direction: column;
}
.p-card-caption {
display: flex;
flex-direction: column;
gap: ${dt('card.caption.gap')};
}
.p-card-body {
padding: ${dt('card.body.padding')};
display: flex;
flex-direction: column;
gap: ${dt('card.body.gap')};
}
.p-card-title {
font-size: ${dt('card.title.font.size')};
font-weight: ${dt('card.title.font.weight')};
}
.p-card-subtitle {
color: ${dt('card.subtitle.color')};
}
`;
const classes = {
root: 'p-card p-component',
header: 'p-card-header',

103
packages/primevue/src/carousel/style/CarouselStyle.js
View File

@ -1,107 +1,6 @@
import { theme } from '@primeuix/styles/carousel';
import BaseStyle from '@primevue/core/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;
gap: ${dt('carousel.content.gap')};
}
.p-carousel-content:dir(rtl) {
flex-direction: row-reverse;
}
.p-carousel-viewport {
overflow: hidden;
width: 100%;
}
.p-carousel-item-list {
display: flex;
flex-direction: row;
}
.p-carousel-item-list:dir(rtl) {
flex-direction: row-reverse;
}
.p-carousel-prev-button,
.p-carousel-next-button {
align-self: center;
flex-shrink: 0;
}
.p-carousel-indicator-list {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
padding: ${dt('carousel.indicator.list.padding')};
gap: ${dt('carousel.indicator.list.gap')};
margin: 0;
list-style: none;
}
.p-carousel-indicator-button {
display: flex;
align-items: center;
justify-content: center;
background: ${dt('carousel.indicator.background')};
width: ${dt('carousel.indicator.width')};
height: ${dt('carousel.indicator.height')};
border: 0 none;
transition: background ${dt('carousel.transition.duration')}, color ${dt('carousel.transition.duration')}, outline-color ${dt('carousel.transition.duration')}, box-shadow ${dt('carousel.transition.duration')};
outline-color: transparent;
border-radius: ${dt('carousel.indicator.border.radius')};
padding: 0;
margin: 0;
user-select: none;
cursor: pointer;
}
.p-carousel-indicator-button:focus-visible {
box-shadow: ${dt('carousel.indicator.focus.ring.shadow')};
outline: ${dt('carousel.indicator.focus.ring.width')} ${dt('carousel.indicator.focus.ring.style')} ${dt('carousel.indicator.focus.ring.color')};
outline-offset: ${dt('carousel.indicator.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',

247
packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
View File

@ -1,251 +1,6 @@
import { theme } from '@primeuix/styles/cascadeselect';
import BaseStyle from '@primevue/core/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 ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, outline-color ${dt(
'cascadeselect.transition.duration'
)}, box-shadow ${dt('cascadeselect.transition.duration')};
border-radius: ${dt('cascadeselect.border.radius')};
outline-color: transparent;
box-shadow: ${dt('cascadeselect.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')};
box-shadow: ${dt('cascadeselect.focus.ring.shadow')};
outline: ${dt('cascadeselect.focus.ring.width')} ${dt('cascadeselect.focus.ring.style')} ${dt('cascadeselect.focus.ring.color')};
outline-offset: ${dt('cascadeselect.focus.ring.offset')};
}
.p-cascadeselect.p-variant-filled {
background: ${dt('cascadeselect.filled.background')};
}
.p-cascadeselect.p-variant-filled:not(.p-disabled):hover {
background: ${dt('cascadeselect.filled.hover.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.dropdown.color')};
width: ${dt('cascadeselect.dropdown.width')};
border-start-end-radius: ${dt('border.radius.md')};
border-end-end-radius: ${dt('border.radius.md')};
}
.p-cascadeselect-clear-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
color: ${dt('cascadeselect.clear.icon.color')};
inset-inline-end: ${dt('cascadeselect.dropdown.width')};
}
.p-cascadeselect-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
padding: ${dt('cascadeselect.padding.y')} ${dt('cascadeselect.padding.x')};
background: transparent;
border: 0 none;
outline: 0 none;
}
.p-cascadeselect-label.p-placeholder {
color: ${dt('cascadeselect.placeholder.color')};
}
.p-cascadeselect.p-invalid .p-cascadeselect-label.p-placeholder {
color: ${dt('cascadeselect.invalid.placeholder.color')};
}
.p-cascadeselect.p-disabled .p-cascadeselect-label {
color: ${dt('cascadeselect.disabled.color')};
}
.p-cascadeselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-cascadeselect-fluid {
display: flex;
}
.p-cascadeselect-fluid .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('cascadeselect.overlay.border.radius')};
box-shadow: ${dt('cascadeselect.overlay.shadow')};
}
.p-cascadeselect .p-cascadeselect-overlay {
min-width: 100%;
}
.p-cascadeselect-option-list {
display: none;
min-width: 100%;
position: absolute;
z-index: 1;
}
.p-cascadeselect-list {
min-width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
padding: ${dt('cascadeselect.list.padding')};
display: flex;
flex-direction: column;
gap: ${dt('cascadeselect.list.gap')};
}
.p-cascadeselect-option {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
border: 0 none;
color: ${dt('cascadeselect.option.color')};
background: transparent;
border-radius: ${dt('cascadeselect.option.border.radius')};
}
.p-cascadeselect-option-active {
overflow: visible;
}
.p-cascadeselect-option-active > .p-cascadeselect-option-content {
background: ${dt('cascadeselect.option.focus.background')};
color: ${dt('cascadeselect.option.focus.color')};
}
.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {
background: ${dt('cascadeselect.option.focus.background')};
color: ${dt('cascadeselect.option.focus.color')};
}
.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content > .p-cascadeselect-group-icon-container > .p-cascadeselect-group-icon {
color: ${dt('cascadeselect.option.icon.focus.color')};
}
.p-cascadeselect-option-selected > .p-cascadeselect-option-content {
background: ${dt('cascadeselect.option.selected.background')};
color: ${dt('cascadeselect.option.selected.color')};
}
.p-cascadeselect-option-selected.p-focus > .p-cascadeselect-option-content {
background: ${dt('cascadeselect.option.selected.focus.background')};
color: ${dt('cascadeselect.option.selected.focus.color')};
}
.p-cascadeselect-option-active > .p-cascadeselect-option-list {
inset-inline-start: 100%;
inset-block-start: 0;
}
.p-cascadeselect-option-content {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
position: relative;
padding: ${dt('cascadeselect.option.padding')};
border-radius: ${dt('cascadeselect.option.border.radius')};
transition: background ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, box-shadow ${dt(
'cascadeselect.transition.duration'
)}, outline-color ${dt('cascadeselect.transition.duration')};
}
.p-cascadeselect-group-icon {
font-size: ${dt('cascadeselect.option.icon.size')};
width: ${dt('cascadeselect.option.icon.size')};
height: ${dt('cascadeselect.option.icon.size')};
color: ${dt('cascadeselect.option.icon.color')};
}
.p-cascadeselect-group-icon:dir(rtl) {
transform: rotate(180deg);
}
.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
position: static;
box-shadow: none;
border: 0 none;
padding-inline-start: ${dt('tieredmenu.submenu.mobile.indent')};
padding-inline-end: 0;
}
.p-cascadeselect-mobile-active .p-cascadeselect-group-icon {
transition: transform 0.2s;
transform: rotate(90deg);
}
.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
transform: rotate(-90deg);
}
.p-cascadeselect-sm .p-cascadeselect-label {
font-size: ${dt('cascadeselect.sm.font.size')};
padding-block: ${dt('cascadeselect.sm.padding.y')};
padding-inline: ${dt('cascadeselect.sm.padding.x')};
}
.p-cascadeselect-sm .p-cascadeselect-dropdown .p-icon {
font-size: ${dt('cascadeselect.sm.font.size')};
width: ${dt('cascadeselect.sm.font.size')};
height: ${dt('cascadeselect.sm.font.size')};
}
.p-cascadeselect-lg .p-cascadeselect-label {
font-size: ${dt('cascadeselect.lg.font.size')};
padding-block: ${dt('cascadeselect.lg.padding.y')};
padding-inline: ${dt('cascadeselect.lg.padding.x')};
}
.p-cascadeselect-lg .p-cascadeselect-dropdown .p-icon {
font-size: ${dt('cascadeselect.lg.font.size')};
width: ${dt('cascadeselect.lg.font.size')};
height: ${dt('cascadeselect.lg.font.size')};
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};

139
packages/primevue/src/checkbox/style/CheckboxStyle.js
View File

@ -1,143 +1,6 @@
import { theme } from '@primeuix/styles/checkbox';
import BaseStyle from '@primevue/core/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;
inset-block-start: 0;
inset-inline-start: 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.height')};
transition: background ${dt('checkbox.transition.duration')}, color ${dt('checkbox.transition.duration')}, border-color ${dt('checkbox.transition.duration')}, box-shadow ${dt('checkbox.transition.duration')}, outline-color ${dt(
'checkbox.transition.duration'
)};
outline-color: transparent;
box-shadow: ${dt('checkbox.shadow')};
}
.p-checkbox-icon {
transition-duration: ${dt('checkbox.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 {
border-color: ${dt('checkbox.focus.border.color')};
box-shadow: ${dt('checkbox.focus.ring.shadow')};
outline: ${dt('checkbox.focus.ring.width')} ${dt('checkbox.focus.ring.style')} ${dt('checkbox.focus.ring.color')};
outline-offset: ${dt('checkbox.focus.ring.offset')};
}
.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
border-color: ${dt('checkbox.checked.focus.border.color')};
}
.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')};
border-color: ${dt('checkbox.checked.disabled.border.color')};
}
.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
color: ${dt('checkbox.icon.disabled.color')};
}
.p-checkbox-sm,
.p-checkbox-sm .p-checkbox-box {
width: ${dt('checkbox.sm.width')};
height: ${dt('checkbox.sm.height')};
}
.p-checkbox-sm .p-checkbox-icon {
font-size: ${dt('checkbox.icon.sm.size')};
width: ${dt('checkbox.icon.sm.size')};
height: ${dt('checkbox.icon.sm.size')};
}
.p-checkbox-lg,
.p-checkbox-lg .p-checkbox-box {
width: ${dt('checkbox.lg.width')};
height: ${dt('checkbox.lg.height')};
}
.p-checkbox-lg .p-checkbox-icon {
font-size: ${dt('checkbox.icon.lg.size')};
width: ${dt('checkbox.icon.lg.size')};
height: ${dt('checkbox.icon.lg.size')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-checkbox p-component',

7
packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js
View File

@ -1,11 +1,6 @@
import { theme } from '@primeuix/styles/checkboxgroup';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-checkbox-group {
display: inline-flex;
}
`;
const classes = {
root: 'p-checkbox-group p-component'
};

54
packages/primevue/src/chip/style/ChipStyle.js
View File

@ -1,58 +1,6 @@
import { theme } from '@primeuix/styles/chip';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-chip {
display: inline-flex;
align-items: center;
background: ${dt('chip.background')};
color: ${dt('chip.color')};
border-radius: ${dt('chip.border.radius')};
padding-block: ${dt('chip.padding.y')};
padding-inline: ${dt('chip.padding.x')};
gap: ${dt('chip.gap')};
}
.p-chip-icon {
color: ${dt('chip.icon.color')};
font-size: ${dt('chip.icon.font.size')};
width: ${dt('chip.icon.size')};
height: ${dt('chip.icon.size')};
}
.p-chip-image {
border-radius: 50%;
width: ${dt('chip.image.width')};
height: ${dt('chip.image.height')};
margin-inline-start: calc(-1 * ${dt('chip.padding.y')});
}
.p-chip:has(.p-chip-remove-icon) {
padding-inline-end: ${dt('chip.padding.y')};
}
.p-chip:has(.p-chip-image) {
padding-block-start: calc(${dt('chip.padding.y')} / 2);
padding-block-end: calc(${dt('chip.padding.y')} / 2);
}
.p-chip-remove-icon {
cursor: pointer;
font-size: ${dt('chip.remove.icon.size')};
width: ${dt('chip.remove.icon.size')};
height: ${dt('chip.remove.icon.size')};
color: ${dt('chip.remove.icon.color')};
border-radius: 50%;
transition: outline-color ${dt('chip.transition.duration')}, box-shadow ${dt('chip.transition.duration')};
outline-color: transparent;
}
.p-chip-remove-icon:focus-visible {
box-shadow: ${dt('chip.remove.icon.focus.ring.shadow')};
outline: ${dt('chip.remove.icon.focus.ring.width')} ${dt('chip.remove.icon.focus.ring.style')} ${dt('chip.remove.icon.focus.ring.color')};
outline-offset: ${dt('chip.remove.icon.focus.ring.offset')};
}
`;
const classes = {
root: 'p-chip p-component',
image: 'p-chip-image',

114
packages/primevue/src/colorpicker/style/ColorPickerStyle.js
View File

@ -1,118 +1,6 @@
import { theme } from '@primeuix/styles/colorpicker';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-colorpicker {
display: inline-block;
position: relative;
}
.p-colorpicker-dragging {
cursor: pointer;
}
.p-colorpicker-preview {
width: ${dt('colorpicker.preview.width')};
height: ${dt('colorpicker.preview.height')};
padding: 0;
border: 0 none;
border-radius: ${dt('colorpicker.preview.border.radius')};
transition: background ${dt('colorpicker.transition.duration')}, color ${dt('colorpicker.transition.duration')}, border-color ${dt('colorpicker.transition.duration')}, outline-color ${dt('colorpicker.transition.duration')}, box-shadow ${dt(
'colorpicker.transition.duration'
)};
outline-color: transparent;
cursor: pointer;
}
.p-colorpicker-preview:enabled:focus-visible {
border-color: ${dt('colorpicker.preview.focus.border.color')};
box-shadow: ${dt('colorpicker.preview.focus.ring.shadow')};
outline: ${dt('colorpicker.preview.focus.ring.width')} ${dt('colorpicker.preview.focus.ring.style')} ${dt('colorpicker.preview.focus.ring.color')};
outline-offset: ${dt('colorpicker.preview.focus.ring.offset')};
}
.p-colorpicker-panel {
background: ${dt('colorpicker.panel.background')};
border: 1px solid ${dt('colorpicker.panel.border.color')};
border-radius: ${dt('colorpicker.panel.border.radius')};
box-shadow: ${dt('colorpicker.panel.shadow')};
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;
inset-block-start: 8px;
inset-inline-start: 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;
inset-block-start: 0px;
inset-inline-start: 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;
inset-block-start: 8px;
inset-inline-start: 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;
inset-block-start: 150px;
inset-inline-start: 0px;
width: 21px;
margin-inline-start: -2px;
margin-block-start: -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',
preview: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],

16
packages/primevue/src/confirmdialog/style/ConfirmDialogStyle.js
View File

@ -1,20 +1,6 @@
import { theme } from '@primeuix/styles/confirmdialog';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-confirmdialog .p-dialog-content {
display: flex;
align-items: center;
gap: ${dt('confirmdialog.content.gap')};
}
.p-confirmdialog-icon {
color: ${dt('confirmdialog.icon.color')};
font-size: ${dt('confirmdialog.icon.size')};
width: ${dt('confirmdialog.icon.size')};
height: ${dt('confirmdialog.icon.size')};
}
`;
const classes = {
root: 'p-confirmdialog',
icon: 'p-confirmdialog-icon',

109
packages/primevue/src/confirmpopup/style/ConfirmPopupStyle.js
View File

@ -1,113 +1,6 @@
import { theme } from '@primeuix/styles/confirmpopup';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-confirmpopup {
position: absolute;
margin-top: ${dt('confirmpopup.gutter')};
top: 0;
left: 0;
background: ${dt('confirmpopup.background')};
color: ${dt('confirmpopup.color')};
border: 1px solid ${dt('confirmpopup.border.color')};
border-radius: ${dt('confirmpopup.border.radius')};
box-shadow: ${dt('confirmpopup.shadow')};
}
.p-confirmpopup-content {
display: flex;
align-items: center;
padding: ${dt('confirmpopup.content.padding')};
gap: ${dt('confirmpopup.content.gap')};
}
.p-confirmpopup-icon {
font-size: ${dt('confirmpopup.icon.size')};
width: ${dt('confirmpopup.icon.size')};
height: ${dt('confirmpopup.icon.size')};
color: ${dt('confirmpopup.icon.color')};
}
.p-confirmpopup-footer {
display: flex;
justify-content: flex-end;
gap: ${dt('confirmpopup.footer.gap')};
padding: ${dt('confirmpopup.footer.padding')};
}
.p-confirmpopup-footer button {
width: auto;
}
.p-confirmpopup-footer button:last-child {
margin: 0;
}
.p-confirmpopup-flipped {
margin-block-start: calc(${dt('confirmpopup.gutter')} * -1);
margin-block-end: ${dt('confirmpopup.gutter')};
}
.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: calc(${dt('confirmpopup.arrow.offset')} + ${dt('confirmpopup.arrow.left')});
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-confirmpopup:after {
border-width: calc(${dt('confirmpopup.gutter')} - 2px);
margin-left: calc(-1 * (${dt('confirmpopup.gutter')} - 2px));
border-style: solid;
border-color: transparent;
border-bottom-color: ${dt('confirmpopup.background')};
}
.p-confirmpopup:before {
border-width: ${dt('confirmpopup.gutter')};
margin-left: calc(-1 * ${dt('confirmpopup.gutter')});
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: 'p-confirmpopup p-component',
content: 'p-confirmpopup-content',

149
packages/primevue/src/contextmenu/style/ContextMenuStyle.js
View File

@ -1,153 +1,6 @@
import { theme } from '@primeuix/styles/contextmenu';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-contextmenu {
background: ${dt('contextmenu.background')};
color: ${dt('contextmenu.color')};
border: 1px solid ${dt('contextmenu.border.color')};
border-radius: ${dt('contextmenu.border.radius')};
box-shadow: ${dt('contextmenu.shadow')};
min-width: 12.5rem;
}
.p-contextmenu-root-list,
.p-contextmenu-submenu {
margin: 0;
padding: ${dt('contextmenu.list.padding')};
list-style: none;
outline: 0 none;
display: flex;
flex-direction: column;
gap: ${dt('contextmenu.list.gap')};
}
.p-contextmenu-submenu {
position: absolute;
display: flex;
flex-direction: column;
min-width: 100%;
z-index: 1;
background: ${dt('contextmenu.background')};
color: ${dt('contextmenu.color')};
border: 1px solid ${dt('contextmenu.border.color')};
border-radius: ${dt('contextmenu.border.radius')};
box-shadow: ${dt('contextmenu.shadow')};
}
.p-contextmenu-item {
position: relative;
}
.p-contextmenu-item-content {
transition: background ${dt('contextmenu.transition.duration')}, color ${dt('contextmenu.transition.duration')};
border-radius: ${dt('contextmenu.item.border.radius')};
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: ${dt('contextmenu.item.padding')};
gap: ${dt('contextmenu.item.gap')};
user-select: none;
}
.p-contextmenu-item-label {
line-height: 1;
}
.p-contextmenu-item-icon {
color: ${dt('contextmenu.item.icon.color')};
}
.p-contextmenu-submenu-icon {
color: ${dt('contextmenu.submenu.icon.color')};
margin-left: auto;
font-size: ${dt('contextmenu.submenu.icon.size')};
width: ${dt('contextmenu.submenu.icon.size')};
height: ${dt('contextmenu.submenu.icon.size')};
}
.p-contextmenu-submenu-icon:dir(rtl) {
margin-left: 0;
margin-right: auto;
}
.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 {
color: ${dt('contextmenu.item.icon.focus.color')};
}
.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
color: ${dt('contextmenu.submenu.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 {
color: ${dt('contextmenu.item.icon.focus.color')};
}
.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {
color: ${dt('contextmenu.submenu.icon.focus.color')};
}
.p-contextmenu-item-active > .p-contextmenu-item-content {
color: ${dt('contextmenu.item.active.color')};
background: ${dt('contextmenu.item.active.background')};
}
.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {
color: ${dt('contextmenu.item.icon.active.color')};
}
.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
color: ${dt('contextmenu.submenu.icon.active.color')};
}
.p-contextmenu-separator {
border-block-start: 1px solid ${dt('contextmenu.separator.border.color')};
}
.p-contextmenu-enter-from,
.p-contextmenu-leave-active {
opacity: 0;
}
.p-contextmenu-enter-active {
transition: opacity 250ms;
}
.p-contextmenu-mobile .p-contextmenu-submenu {
position: static;
box-shadow: none;
border: 0 none;
padding-inline-start: ${dt('tieredmenu.submenu.mobile.indent')};
padding-inline-end: 0;
}
.p-contextmenu-mobile .p-contextmenu-submenu-icon {
transition: transform 0.2s;
transform: rotate(90deg);
}
.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
transform: rotate(-90deg);
}
`;
const classes = {
root: ({ instance }) => [
'p-contextmenu p-component',

591
packages/primevue/src/datatable/style/DataTableStyle.js
View File

@ -1,595 +1,6 @@
import { theme } from '@primeuix/styles/datatable';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-datatable {
position: relative;
}
.p-datatable-table {
border-spacing: 0;
border-collapse: separate;
width: 100%;
}
.p-datatable-scrollable > .p-datatable-table-container {
position: relative;
}
.p-datatable-scrollable-table > .p-datatable-thead {
inset-block-start: 0;
z-index: 1;
}
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
position: sticky;
z-index: 1;
}
.p-datatable-scrollable-table > .p-datatable-tfoot {
inset-block-end: 0;
z-index: 1;
}
.p-datatable-scrollable .p-datatable-frozen-column {
position: sticky;
background: ${dt('datatable.header.cell.background')};
}
.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;
}
.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;
inset-block-start: 0;
inset-inline-end: 0;
margin: 0;
width: ${dt('datatable.column.resizer.width')};
height: 100%;
padding: 0;
cursor: col-resize;
border: 1px solid transparent;
}
.p-datatable-column-header-content {
display: flex;
align-items: center;
gap: ${dt('datatable.header.cell.gap')};
}
.p-datatable-column-resize-indicator {
width: ${dt('datatable.resize.indicator.width')};
position: absolute;
z-index: 10;
display: none;
background: ${dt('datatable.resize.indicator.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: ${dt('datatable.filter.inline.gap')};
}
.p-datatable-inline-filter .p-datatable-filter-element-container {
flex: 1 1 auto;
width: 1%;
}
.p-datatable-filter-overlay {
background: ${dt('datatable.filter.overlay.select.background')};
color: ${dt('datatable.filter.overlay.select.color')};
border: 1px solid ${dt('datatable.filter.overlay.select.border.color')};
border-radius: ${dt('datatable.filter.overlay.select.border.radius')};
box-shadow: ${dt('datatable.filter.overlay.select.shadow')};
min-width: 12.5rem;
}
.p-datatable-filter-constraint-list {
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
padding: ${dt('datatable.filter.constraint.list.padding')};
gap: ${dt('datatable.filter.constraint.list.gap')};
}
.p-datatable-filter-constraint {
padding: ${dt('datatable.filter.constraint.padding')};
color: ${dt('datatable.filter.constraint.color')};
border-radius: ${dt('datatable.filter.constraint.border.radius')};
cursor: pointer;
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
box-shadow ${dt('datatable.transition.duration')};
}
.p-datatable-filter-constraint-selected {
background: ${dt('datatable.filter.constraint.selected.background')};
color: ${dt('datatable.filter.constraint.selected.color')};
}
.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover {
background: ${dt('datatable.filter.constraint.focus.background')};
color: ${dt('datatable.filter.constraint.focus.color')};
}
.p-datatable-filter-constraint:focus-visible {
outline: 0 none;
background: ${dt('datatable.filter.constraint.focus.background')};
color: ${dt('datatable.filter.constraint.focus.color')};
}
.p-datatable-filter-constraint-selected:focus-visible {
outline: 0 none;
background: ${dt('datatable.filter.constraint.selected.focus.background')};
color: ${dt('datatable.filter.constraint.selected.focus.color')};
}
.p-datatable-filter-constraint-separator {
border-block-start: 1px solid ${dt('datatable.filter.constraint.separator.border.color')};
}
.p-datatable-popover-filter {
display: inline-flex;
margin-inline-start: auto;
}
.p-datatable-filter-overlay-popover {
background: ${dt('datatable.filter.overlay.popover.background')};
color: ${dt('datatable.filter.overlay.popover.color')};
border: 1px solid ${dt('datatable.filter.overlay.popover.border.color')};
border-radius: ${dt('datatable.filter.overlay.popover.border.radius')};
box-shadow: ${dt('datatable.filter.overlay.popover.shadow')};
min-width: 12.5rem;
padding: ${dt('datatable.filter.overlay.popover.padding')};
display: flex;
flex-direction: column;
gap: ${dt('datatable.filter.overlay.popover.gap')};
}
.p-datatable-filter-operator-dropdown {
width: 100%;
}
.p-datatable-filter-rule-list,
.p-datatable-filter-rule {
display: flex;
flex-direction: column;
gap: ${dt('datatable.filter.overlay.popover.gap')};
}
.p-datatable-filter-rule {
border-block-end: 1px solid ${dt('datatable.filter.rule.border.color')};
padding-bottom: ${dt('datatable.filter.overlay.popover.gap')};
}
.p-datatable-filter-rule:last-child {
border-block-end: 0 none;
padding-bottom: 0;
}
.p-datatable-filter-add-rule-button {
width: 100%;
}
.p-datatable-filter-remove-rule-button {
width: 100%;
}
.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;
inset-block-start: 0;
inset-inline-start: 0;
}
.p-datatable-paginator-top {
border-color: ${dt('datatable.paginator.top.border.color')};
border-style: solid;
border-width: ${dt('datatable.paginator.top.border.width')};
}
.p-datatable-paginator-bottom {
border-color: ${dt('datatable.paginator.bottom.border.color')};
border-style: solid;
border-width: ${dt('datatable.paginator.bottom.border.width')};
}
.p-datatable-header {
background: ${dt('datatable.header.background')};
color: ${dt('datatable.header.color')};
border-color: ${dt('datatable.header.border.color')};
border-style: solid;
border-width: ${dt('datatable.header.border.width')};
padding: ${dt('datatable.header.padding')};
}
.p-datatable-footer {
background: ${dt('datatable.footer.background')};
color: ${dt('datatable.footer.color')};
border-color: ${dt('datatable.footer.border.color')};
border-style: solid;
border-width: ${dt('datatable.footer.border.width')};
padding: ${dt('datatable.footer.padding')};
}
.p-datatable-header-cell {
padding: ${dt('datatable.header.cell.padding')};
background: ${dt('datatable.header.cell.background')};
border-color: ${dt('datatable.header.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0;
color: ${dt('datatable.header.cell.color')};
font-weight: normal;
text-align: start;
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
}
.p-datatable-column-title {
font-weight: ${dt('datatable.column.title.font.weight')};
}
.p-datatable-tbody > tr {
outline-color: transparent;
background: ${dt('datatable.row.background')};
color: ${dt('datatable.row.color')};
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
}
.p-datatable-tbody > tr > td {
text-align: start;
border-color: ${dt('datatable.body.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0;
padding: ${dt('datatable.body.cell.padding')};
}
.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('datatable.row.selected.background')};
color: ${dt('datatable.row.selected.color')};
}
.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {
border-block-end-color: ${dt('datatable.body.cell.selected.border.color')};
}
.p-datatable-tbody > tr.p-datatable-row-selected > td {
border-block-end-color: ${dt('datatable.body.cell.selected.border.color')};
}
.p-datatable-tbody > tr:focus-visible,
.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {
box-shadow: ${dt('datatable.row.focus.ring.shadow')};
outline: ${dt('datatable.row.focus.ring.width')} ${dt('datatable.row.focus.ring.style')} ${dt('datatable.row.focus.ring.color')};
outline-offset: ${dt('datatable.row.focus.ring.offset')};
}
.p-datatable-tfoot > tr > td {
text-align: start;
padding: ${dt('datatable.footer.cell.padding')};
border-color: ${dt('datatable.footer.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0;
color: ${dt('datatable.footer.cell.color')};
background: ${dt('datatable.footer.cell.background')};
}
.p-datatable-column-footer {
font-weight: ${dt('datatable.column.footer.font.weight')};
}
.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')};
font-size: ${dt('datatable.sort.icon.size')};
width: ${dt('datatable.sort.icon.size')};
height: ${dt('datatable.sort.icon.size')};
transition: color ${dt('datatable.transition.duration')};
}
.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('datatable.header.cell.selected.background')};
color: ${dt('datatable.header.cell.selected.color')};
}
.p-datatable-column-sorted .p-datatable-sort-icon {
color: ${dt('datatable.header.cell.selected.color')};
}
.p-datatable-sortable-column:focus-visible {
box-shadow: ${dt('datatable.header.cell.focus.ring.shadow')};
outline: ${dt('datatable.header.cell.focus.ring.width')} ${dt('datatable.header.cell.focus.ring.style')} ${dt('datatable.header.cell.focus.ring.color')};
outline-offset: ${dt('datatable.header.cell.focus.ring.offset')};
}
.p-datatable-hoverable .p-datatable-selectable-row {
cursor: pointer;
}
.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: ${dt('datatable.loading.icon.size')};
width: ${dt('datatable.loading.icon.size')};
height: ${dt('datatable.loading.icon.size')};
}
.p-datatable-gridlines .p-datatable-header {
border-width: 1px 1px 0 1px;
}
.p-datatable-gridlines .p-datatable-footer {
border-width: 0 1px 1px 1px;
}
.p-datatable-gridlines .p-datatable-paginator-top {
border-width: 1px 1px 0 1px;
}
.p-datatable-gridlines .p-datatable-paginator-bottom {
border-width: 0 1px 1px 1px;
}
.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-datatable-row-selected {
background: ${dt('datatable.row.selected.background')};
color: ${dt('datatable.row.selected.color')};
}
.p-datatable-striped.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.p-datatable-sm .p-datatable-header {
padding: ${dt('datatable.header.sm.padding')};
}
.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
padding: ${dt('datatable.header.cell.sm.padding')};
}
.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
padding: ${dt('datatable.body.cell.sm.padding')};
}
.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
padding: ${dt('datatable.footer.cell.sm.padding')};
}
.p-datatable.p-datatable-sm .p-datatable-footer {
padding: ${dt('datatable.footer.sm.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-header {
padding: ${dt('datatable.header.lg.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
padding: ${dt('datatable.header.cell.lg.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
padding: ${dt('datatable.body.lg.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
padding: ${dt('datatable.footer.cell.lg.padding')};
}
.p-datatable.p-datatable-lg .p-datatable-footer {
padding: ${dt('datatable.footer.lg.padding')};
}
.p-datatable-row-toggle-button {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('datatable.row.toggle.button.size')};
height: ${dt('datatable.row.toggle.button.size')};
color: ${dt('datatable.row.toggle.button.color')};
border: 0 none;
background: transparent;
cursor: pointer;
border-radius: ${dt('datatable.row.toggle.button.border.radius')};
transition: background ${dt('datatable.transition.duration')}, color ${dt('datatable.transition.duration')}, border-color ${dt('datatable.transition.duration')},
outline-color ${dt('datatable.transition.duration')}, box-shadow ${dt('datatable.transition.duration')};
outline-color: transparent;
user-select: none;
}
.p-datatable-row-toggle-button:enabled:hover {
color: ${dt('datatable.row.toggle.button.hover.color')};
background: ${dt('datatable.row.toggle.button.hover.background')};
}
.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
background: ${dt('datatable.row.toggle.button.selected.hover.background')};
color: ${dt('datatable.row.toggle.button.selected.hover.color')};
}
.p-datatable-row-toggle-button:focus-visible {
box-shadow: ${dt('datatable.row.toggle.button.focus.ring.shadow')};
outline: ${dt('datatable.row.toggle.button.focus.ring.width')} ${dt('datatable.row.toggle.button.focus.ring.style')} ${dt('datatable.row.toggle.button.focus.ring.color')};
outline-offset: ${dt('datatable.row.toggle.button.focus.ring.offset')};
}
.p-datatable-row-toggle-icon:dir(rtl) {
transform: rotate(180deg);
}
`;
const classes = {
root: ({ props }) => [
'p-datatable p-component',

53
packages/primevue/src/dataview/style/DataViewStyle.js
View File

@ -1,57 +1,6 @@
import { theme } from '@primeuix/styles/dataview';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-dataview {
border-color: ${dt('dataview.border.color')};
border-width: ${dt('dataview.border.width')};
border-style: solid;
border-radius: ${dt('dataview.border.radius')};
padding: ${dt('dataview.padding')};
}
.p-dataview-header {
background: ${dt('dataview.header.background')};
color: ${dt('dataview.header.color')};
border-color: ${dt('dataview.header.border.color')};
border-width: ${dt('dataview.header.border.width')};
border-style: solid;
padding: ${dt('dataview.header.padding')};
border-radius: ${dt('dataview.header.border.radius')};
}
.p-dataview-content {
background: ${dt('dataview.content.background')};
border-color: ${dt('dataview.content.border.color')};
border-width: ${dt('dataview.content.border.width')};
border-style: solid;
color: ${dt('dataview.content.color')};
padding: ${dt('dataview.content.padding')};
border-radius: ${dt('dataview.content.border.radius')};
}
.p-dataview-footer {
background: ${dt('dataview.footer.background')};
color: ${dt('dataview.footer.color')};
border-color: ${dt('dataview.footer.border.color')};
border-width: ${dt('dataview.footer.border.width')};
border-style: solid;
padding: ${dt('dataview.footer.padding')};
border-radius: ${dt('dataview.footer.border.radius')};
}
.p-dataview-paginator-top {
border-width: ${dt('dataview.paginator.top.border.width')};
border-color: ${dt('dataview.paginator.top.border.color')};
border-style: solid;
}
.p-dataview-paginator-bottom {
border-width: ${dt('dataview.paginator.bottom.border.width')};
border-color: ${dt('dataview.paginator.bottom.border.color')};
border-style: solid;
}
`;
const classes = {
root: ({ props }) => [
'p-dataview p-component',

403
packages/primevue/src/datepicker/style/DatePickerStyle.js
View File

@ -1,407 +1,6 @@
import { theme } from '@primeuix/styles/datepicker';
import BaseStyle from '@primevue/core/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-start-end-radius: 0;
border-end-end-radius: 0;
}
.p-datepicker-dropdown {
cursor: pointer;
display: inline-flex;
user-select: none;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('datepicker.dropdown.width')};
border-start-end-radius: ${dt('datepicker.dropdown.border.radius')};
border-end-end-radius: ${dt('datepicker.dropdown.border.radius')};
background: ${dt('datepicker.dropdown.background')};
border: 1px solid ${dt('datepicker.dropdown.border.color')};
border-inline-start: 0 none;
color: ${dt('datepicker.dropdown.color')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.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')};
color: ${dt('datepicker.dropdown.hover.color')};
}
.p-datepicker-dropdown:not(:disabled):active {
background: ${dt('datepicker.dropdown.active.background')};
border-color: ${dt('datepicker.dropdown.active.border.color')};
color: ${dt('datepicker.dropdown.active.color')};
}
.p-datepicker-dropdown:focus-visible {
box-shadow: ${dt('datepicker.dropdown.focus.ring.shadow')};
outline: ${dt('datepicker.dropdown.focus.ring.width')} ${dt('datepicker.dropdown.focus.ring.style')} ${dt('datepicker.dropdown.focus.ring.color')};
outline-offset: ${dt('datepicker.dropdown.focus.ring.offset')};
}
.p-datepicker:has(.p-datepicker-input-icon-container) {
position: relative;
}
.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
.p-datepicker-input-icon-container {
cursor: pointer;
position: absolute;
top: 50%;
inset-inline-end: ${dt('form.field.padding.x')};
margin-block-start: calc(-1 * (${dt('icon.size')} / 2));
color: ${dt('datepicker.input.icon.color')};
line-height: 1;
}
.p-datepicker-fluid {
display: flex;
}
.p-datepicker-fluid .p-datepicker-input {
width: 1%;
}
.p-datepicker .p-datepicker-panel {
min-width: 100%;
}
.p-datepicker-panel {
width: auto;
padding: ${dt('datepicker.panel.padding')};
background: ${dt('datepicker.panel.background')};
color: ${dt('datepicker.panel.color')};
border: 1px solid ${dt('datepicker.panel.border.color')};
border-radius: ${dt('datepicker.panel.border.radius')};
box-shadow: ${dt('datepicker.panel.shadow')};
}
.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: ${dt('datepicker.header.padding')};
background: ${dt('datepicker.header.background')};
color: ${dt('datepicker.header.color')};
border-block-end: 1px solid ${dt('datepicker.header.border.color')};
}
.p-datepicker-next-button:dir(rtl) {
order: -1;
}
.p-datepicker-prev-button:dir(rtl) {
order: 1;
}
.p-datepicker-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: ${dt('datepicker.title.gap')};
font-weight: ${dt('datepicker.title.font.weight')};
}
.p-datepicker-select-year,
.p-datepicker-select-month {
border: none;
background: transparent;
margin: 0;
cursor: pointer;
font-weight: inherit;
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, outline-color ${dt('datepicker.transition.duration')}, box-shadow ${dt(
'datepicker.transition.duration'
)};
}
.p-datepicker-select-month {
padding: ${dt('datepicker.select.month.padding')};
color: ${dt('datepicker.select.month.color')};
border-radius: ${dt('datepicker.select.month.border.radius')};
}
.p-datepicker-select-year {
padding: ${dt('datepicker.select.year.padding')};
color: ${dt('datepicker.select.year.color')};
border-radius: ${dt('datepicker.select.year.border.radius')};
}
.p-datepicker-select-month:enabled:hover {
background: ${dt('datepicker.select.month.hover.background')};
color: ${dt('datepicker.select.month.hover.color')};
}
.p-datepicker-select-year:enabled:hover {
background: ${dt('datepicker.select.year.hover.background')};
color: ${dt('datepicker.select.year.hover.color')};
}
.p-datepicker-select-month:focus-visible,
.p-datepicker-select-year:focus-visible {
box-shadow: ${dt('datepicker.date.focus.ring.shadow')};
outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};
outline-offset: ${dt('datepicker.date.focus.ring.offset')};
}
.p-datepicker-calendar-container {
display: flex;
}
.p-datepicker-calendar-container .p-datepicker-calendar {
flex: 1 1 auto;
border-inline-start: 1px solid ${dt('datepicker.group.border.color')};
padding-inline-end: ${dt('datepicker.group.gap')};
padding-inline-start: ${dt('datepicker.group.gap')};
}
.p-datepicker-calendar-container .p-datepicker-calendar:first-child {
padding-inline-start: 0;
border-inline-start: 0 none;
}
.p-datepicker-calendar-container .p-datepicker-calendar:last-child {
padding-inline-end: 0;
}
.p-datepicker-day-view {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
margin: ${dt('datepicker.day.view.margin')};
}
.p-datepicker-weekday-cell {
padding: ${dt('datepicker.week.day.padding')};
}
.p-datepicker-weekday {
font-weight: ${dt('datepicker.week.day.font.weight')};
color: ${dt('datepicker.week.day.color')};
}
.p-datepicker-day-cell {
padding: ${dt('datepicker.date.padding')};
}
.p-datepicker-day {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 auto;
overflow: hidden;
position: relative;
width: ${dt('datepicker.date.width')};
height: ${dt('datepicker.date.height')};
border-radius: ${dt('datepicker.date.border.radius')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt(
'datepicker.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 {
box-shadow: ${dt('datepicker.date.focus.ring.shadow')};
outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};
outline-offset: ${dt('datepicker.date.focus.ring.offset')};
}
.p-datepicker-day-selected {
background: ${dt('datepicker.date.selected.background')};
color: ${dt('datepicker.date.selected.color')};
}
.p-datepicker-day-selected-range {
background: ${dt('datepicker.date.range.selected.background')};
color: ${dt('datepicker.date.range.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-today > .p-datepicker-day-selected-range {
background: ${dt('datepicker.date.range.selected.background')};
color: ${dt('datepicker.date.range.selected.color')};
}
.p-datepicker-weeknumber {
text-align: center;
}
.p-datepicker-month-view {
margin: ${dt('datepicker.month.view.margin')};
}
.p-datepicker-month {
width: 33.3%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
padding: ${dt('datepicker.month.padding')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt(
'datepicker.transition.duration'
)};
border-radius: ${dt('datepicker.month.border.radius')};
outline-color: transparent;
color: ${dt('datepicker.date.color')};
}
.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
color: ${dt('datepicker.date.hover.color')};
background: ${dt('datepicker.date.hover.background')};
}
.p-datepicker-month-selected {
color: ${dt('datepicker.date.selected.color')};
background: ${dt('datepicker.date.selected.background')};
}
.p-datepicker-month:not(.p-disabled):focus-visible {
box-shadow: ${dt('datepicker.date.focus.ring.shadow')};
outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};
outline-offset: ${dt('datepicker.date.focus.ring.offset')};
}
.p-datepicker-year-view {
margin: ${dt('datepicker.year.view.margin')};
}
.p-datepicker-year {
width: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
position: relative;
padding: ${dt('datepicker.year.padding')};
transition: background ${dt('datepicker.transition.duration')}, color ${dt('datepicker.transition.duration')}, border-color ${dt('datepicker.transition.duration')}, box-shadow ${dt('datepicker.transition.duration')}, outline-color ${dt(
'datepicker.transition.duration'
)};
border-radius: ${dt('datepicker.year.border.radius')};
outline-color: transparent;
color: ${dt('datepicker.date.color')};
}
.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
color: ${dt('datepicker.date.hover.color')};
background: ${dt('datepicker.date.hover.background')};
}
.p-datepicker-year-selected {
color: ${dt('datepicker.date.selected.color')};
background: ${dt('datepicker.date.selected.background')};
}
.p-datepicker-year:not(.p-disabled):focus-visible {
box-shadow: ${dt('datepicker.date.focus.ring.shadow')};
outline: ${dt('datepicker.date.focus.ring.width')} ${dt('datepicker.date.focus.ring.style')} ${dt('datepicker.date.focus.ring.color')};
outline-offset: ${dt('datepicker.date.focus.ring.offset')};
}
.p-datepicker-buttonbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: ${dt('datepicker.buttonbar.padding')};
border-block-start: 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-block-start: 1px solid ${dt('datepicker.time.picker.border.color')};
padding: 0;
gap: ${dt('datepicker.time.picker.gap')};
}
.p-datepicker-calendar-container + .p-datepicker-time-picker {
padding: ${dt('datepicker.time.picker.padding')};
}
.p-datepicker-time-picker > div {
display: flex;
align-items: center;
flex-direction: column;
gap: ${dt('datepicker.time.picker.button.gap')};
}
.p-datepicker-time-picker span {
font-size: 1rem;
}
.p-datepicker-timeonly .p-datepicker-time-picker {
border-block-start: 0 none;
}
.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown {
width: ${dt('datepicker.dropdown.sm.width')};
}
.p-datepicker:has(.p-inputtext-sm) .p-datepicker-dropdown .p-icon,
.p-datepicker:has(.p-inputtext-sm) .p-datepicker-input-icon {
font-size: ${dt('form.field.sm.font.size')};
width: ${dt('form.field.sm.font.size')};
height: ${dt('form.field.sm.font.size')};
}
.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown {
width: ${dt('datepicker.dropdown.lg.width')};
}
.p-datepicker:has(.p-inputtext-lg) .p-datepicker-dropdown .p-icon,
.p-datepicker:has(.p-inputtext-lg) .p-datepicker-input-icon {
font-size: ${dt('form.field.lg.font.size')};
width: ${dt('form.field.lg.font.size')};
height: ${dt('form.field.lg.font.size')};
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};

150
packages/primevue/src/dialog/style/DialogStyle.js
View File

@ -1,154 +1,6 @@
import { theme } from '@primeuix/styles/dialog';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-dialog {
max-height: 90%;
transform: scale(1);
border-radius: ${dt('dialog.border.radius')};
box-shadow: ${dt('dialog.shadow')};
background: ${dt('dialog.background')};
border: 1px solid ${dt('dialog.border.color')};
color: ${dt('dialog.color')};
}
.p-dialog-content {
overflow-y: auto;
padding: ${dt('dialog.content.padding')};
}
.p-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
padding: ${dt('dialog.header.padding')};
}
.p-dialog-title {
font-weight: ${dt('dialog.title.font.weight')};
font-size: ${dt('dialog.title.font.size')};
}
.p-dialog-footer {
flex-shrink: 0;
padding: ${dt('dialog.footer.padding')};
display: flex;
justify-content: flex-end;
gap: ${dt('dialog.footer.gap')};
}
.p-dialog-header-actions {
display: flex;
align-items: center;
gap: ${dt('dialog.header.gap')};
}
.p-dialog-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-dialog-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-dialog-enter-from,
.p-dialog-leave-to {
opacity: 0;
transform: scale(0.7);
}
.p-dialog-top .p-dialog,
.p-dialog-bottom .p-dialog,
.p-dialog-left .p-dialog,
.p-dialog-right .p-dialog,
.p-dialog-topleft .p-dialog,
.p-dialog-topright .p-dialog,
.p-dialog-bottomleft .p-dialog,
.p-dialog-bottomright .p-dialog {
margin: 0.75rem;
transform: translate3d(0px, 0px, 0px);
}
.p-dialog-top .p-dialog-enter-active,
.p-dialog-top .p-dialog-leave-active,
.p-dialog-bottom .p-dialog-enter-active,
.p-dialog-bottom .p-dialog-leave-active,
.p-dialog-left .p-dialog-enter-active,
.p-dialog-left .p-dialog-leave-active,
.p-dialog-right .p-dialog-enter-active,
.p-dialog-right .p-dialog-leave-active,
.p-dialog-topleft .p-dialog-enter-active,
.p-dialog-topleft .p-dialog-leave-active,
.p-dialog-topright .p-dialog-enter-active,
.p-dialog-topright .p-dialog-leave-active,
.p-dialog-bottomleft .p-dialog-enter-active,
.p-dialog-bottomleft .p-dialog-leave-active,
.p-dialog-bottomright .p-dialog-enter-active,
.p-dialog-bottomright .p-dialog-leave-active {
transition: all 0.3s ease-out;
}
.p-dialog-top .p-dialog-enter-from,
.p-dialog-top .p-dialog-leave-to {
transform: translate3d(0px, -100%, 0px);
}
.p-dialog-bottom .p-dialog-enter-from,
.p-dialog-bottom .p-dialog-leave-to {
transform: translate3d(0px, 100%, 0px);
}
.p-dialog-left .p-dialog-enter-from,
.p-dialog-left .p-dialog-leave-to,
.p-dialog-topleft .p-dialog-enter-from,
.p-dialog-topleft .p-dialog-leave-to,
.p-dialog-bottomleft .p-dialog-enter-from,
.p-dialog-bottomleft .p-dialog-leave-to {
transform: translate3d(-100%, 0px, 0px);
}
.p-dialog-right .p-dialog-enter-from,
.p-dialog-right .p-dialog-leave-to,
.p-dialog-topright .p-dialog-enter-from,
.p-dialog-topright .p-dialog-leave-to,
.p-dialog-bottomright .p-dialog-enter-from,
.p-dialog-bottomright .p-dialog-leave-to {
transform: translate3d(100%, 0px, 0px);
}
.p-dialog-left:dir(rtl) .p-dialog-enter-from,
.p-dialog-left:dir(rtl) .p-dialog-leave-to,
.p-dialog-topleft:dir(rtl) .p-dialog-enter-from,
.p-dialog-topleft:dir(rtl) .p-dialog-leave-to,
.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from,
.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to {
transform: translate3d(100%, 0px, 0px);
}
.p-dialog-right:dir(rtl) .p-dialog-enter-from,
.p-dialog-right:dir(rtl) .p-dialog-leave-to,
.p-dialog-topright:dir(rtl) .p-dialog-enter-from,
.p-dialog-topright:dir(rtl) .p-dialog-leave-to,
.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from,
.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to {
transform: translate3d(-100%, 0px, 0px);
}
.p-dialog-maximized {
width: 100vw !important;
height: 100vh !important;
top: 0px !important;
left: 0px !important;
max-height: 100%;
height: 100%;
border-radius: 0;
}
.p-dialog-maximized .p-dialog-content {
flex-grow: 1;
}
`;
/* Position */
const inlineStyles = {
mask: ({ position, modal }) => ({

84
packages/primevue/src/divider/style/DividerStyle.js
View File

@ -1,88 +1,6 @@
import { theme } from '@primeuix/styles/divider';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-divider-horizontal {
display: flex;
width: 100%;
position: relative;
align-items: center;
margin: ${dt('divider.horizontal.margin')};
padding: ${dt('divider.horizontal.padding')};
}
.p-divider-horizontal:before {
position: absolute;
display: block;
inset-block-start: 50%;
inset-inline-start: 0;
width: 100%;
content: "";
border-block-start: 1px solid ${dt('divider.border.color')};
}
.p-divider-horizontal .p-divider-content {
padding: ${dt('divider.horizontal.content.padding')};
}
.p-divider-vertical {
min-height: 100%;
display: flex;
position: relative;
justify-content: center;
margin: ${dt('divider.vertical.margin')};
padding: ${dt('divider.vertical.padding')};
}
.p-divider-vertical:before {
position: absolute;
display: block;
inset-block-start: 0;
inset-inline-start: 50%;
height: 100%;
content: "";
border-inline-start: 1px solid ${dt('divider.border.color')};
}
.p-divider.p-divider-vertical .p-divider-content {
padding: ${dt('divider.vertical.content.padding')};
}
.p-divider-content {
z-index: 1;
background: ${dt('divider.content.background')};
color: ${dt('divider.content.color')};
}
.p-divider-solid.p-divider-horizontal:before {
border-block-start-style: solid;
}
.p-divider-solid.p-divider-vertical:before {
border-inline-start-style: solid;
}
.p-divider-dashed.p-divider-horizontal:before {
border-block-start-style: dashed;
}
.p-divider-dashed.p-divider-vertical:before {
border-inline-start-style: dashed;
}
.p-divider-dotted.p-divider-horizontal:before {
border-block-start-style: dotted;
}
.p-divider-dotted.p-divider-vertical:before {
border-inline-start-style: dotted;
}
.p-divider-left:dir(rtl),
.p-divider-right:dir(rtl) {
flex-direction: row-reverse;
}
`;
/* Position */
const inlineStyles = {
root: ({ props }) => ({

115
packages/primevue/src/dock/style/DockStyle.js
View File

@ -1,119 +1,6 @@
import { theme } from '@primeuix/styles/dock';
import BaseStyle from '@primevue/core/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: ${dt('dock.background')};
border: 1px solid ${dt('dock.border.color')};
padding: ${dt('dock.padding')};
border-radius: ${dt('dock.border.radius')};
}
.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: ${dt('dock.item.padding')};
border-radius: ${dt('dock.item.border.radius')};
}
.p-dock-item.p-focus {
box-shadow: ${dt('dock.item.focus.ring.shadow')};
outline: ${dt('dock.item.focus.ring.width')} ${dt('dock.item.focus.ring.style')} ${dt('dock.item.focus.ring.color')};
outline-offset: ${dt('dock.item.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: ${dt('dock.item.size')};
height: ${dt('dock.item.size')};
}
.p-dock-top {
left: 0;
top: 0;
width: 100%;
}
.p-dock-bottom {
left: 0;
bottom: 0;
width: 100%;
}
.p-dock-right {
right: 0;
top: 0;
height: 100%;
}
.p-dock-right .p-dock-list {
flex-direction: column;
}
.p-dock-left {
left: 0;
top: 0;
height: 100%;
}
.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',

119
packages/primevue/src/drawer/style/DrawerStyle.js
View File

@ -1,123 +1,6 @@
import { theme } from '@primeuix/styles/drawer';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-drawer {
display: flex;
flex-direction: column;
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: ${dt('drawer.shadow')};
}
.p-drawer-content {
overflow-y: auto;
flex-grow: 1;
padding: ${dt('drawer.content.padding')};
}
.p-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
padding: ${dt('drawer.header.padding')};
}
.p-drawer-footer {
padding: ${dt('drawer.footer.padding')};
}
.p-drawer-title {
font-weight: ${dt('drawer.title.font.weight')};
font-size: ${dt('drawer.title.font.size')};
}
.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-inline-end-width: 1px;
}
.p-drawer-right .p-drawer {
width: 20rem;
height: 100%;
border-inline-start-width: 1px;
}
.p-drawer-top .p-drawer {
height: 10rem;
width: 100%;
border-block-end-width: 1px;
}
.p-drawer-bottom .p-drawer {
height: 10rem;
width: 100%;
border-block-start-width: 1px;
}
.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%;
}
.p-drawer-open {
display: flex;
}
.p-drawer-mask:dir(rtl) {
flex-direction: row-reverse;
}
`;
const inlineStyles = {
mask: ({ position, modal }) => ({
position: 'fixed',

967
packages/primevue/src/editor/style/EditorStyle.js
View File

@ -1,971 +1,6 @@
import { theme } from '@primeuix/styles/editor';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
/*!
* Quill Editor v1.3.3
* https://quilljs.com/
* Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com
*/
.ql-container {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
height: 100%;
margin: 0;
position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
pointer-events: none;
}
.ql-clipboard {
inset-inline-start: -100000px;
height: 1px;
overflow-y: hidden;
position: absolute;
top: 50%;
}
.ql-clipboard p {
margin: 0;
padding: 0;
}
.ql-editor {
box-sizing: border-box;
line-height: 1.42;
height: 100%;
outline: none;
overflow-y: auto;
padding: 12px 15px;
tab-size: 4;
-moz-tab-size: 4;
text-align: left;
white-space: pre-wrap;
word-wrap: break-word;
}
.ql-editor > * {
cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
margin: 0;
padding: 0;
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
padding-inline-start: 1.5rem;
}
.ql-editor ol > li,
.ql-editor ul > li {
list-style-type: none;
}
.ql-editor ul > li::before {
content: '\\2022';
}
.ql-editor ul[data-checked='true'],
.ql-editor ul[data-checked='false'] {
pointer-events: none;
}
.ql-editor ul[data-checked='true'] > li *,
.ql-editor ul[data-checked='false'] > li * {
pointer-events: all;
}
.ql-editor ul[data-checked='true'] > li::before,
.ql-editor ul[data-checked='false'] > li::before {
color: #777;
cursor: pointer;
pointer-events: all;
}
.ql-editor ul[data-checked='true'] > li::before {
content: '\\2611';
}
.ql-editor ul[data-checked='false'] > li::before {
content: '\\2610';
}
.ql-editor li::before {
display: inline-block;
white-space: nowrap;
width: 1.2rem;
}
.ql-editor li:not(.ql-direction-rtl)::before {
margin-inline-start: -1.5rem;
margin-inline-end: 0.3rem;
text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
margin-inline-start: 0.3rem;
margin-inline-end: -1.5rem;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
padding-inline-start: 1.5rem;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
padding-inline-end: 1.5rem;
}
.ql-editor ol li {
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
counter-increment: list-0;
}
.ql-editor ol li:before {
content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-video {
display: block;
max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
background: #000;
}
.ql-editor .ql-bg-red {
background: #e60000;
}
.ql-editor .ql-bg-orange {
background: #f90;
}
.ql-editor .ql-bg-yellow {
background: #ff0;
}
.ql-editor .ql-bg-green {
background: #008a00;
}
.ql-editor .ql-bg-blue {
background: #06c;
}
.ql-editor .ql-bg-purple {
background: #93f;
}
.ql-editor .ql-color-white {
color: #fff;
}
.ql-editor .ql-color-red {
color: #e60000;
}
.ql-editor .ql-color-orange {
color: #f90;
}
.ql-editor .ql-color-yellow {
color: #ff0;
}
.ql-editor .ql-color-green {
color: #008a00;
}
.ql-editor .ql-color-blue {
color: #06c;
}
.ql-editor .ql-color-purple {
color: #93f;
}
.ql-editor .ql-font-serif {
font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
font-size: 0.75rem;
}
.ql-editor .ql-size-large {
font-size: 1.5rem;
}
.ql-editor .ql-size-huge {
font-size: 2.5rem;
}
.ql-editor .ql-direction-rtl {
direction: rtl;
text-align: inherit;
}
.ql-editor .ql-align-center {
text-align: center;
}
.ql-editor .ql-align-justify {
text-align: justify;
}
.ql-editor .ql-align-right {
text-align: right;
}
.ql-editor.ql-blank::before {
color: rgba(0, 0, 0, 0.6);
content: attr(data-placeholder);
font-style: italic;
inset-inline-start: 15px;
pointer-events: none;
position: absolute;
inset-inline-end: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
clear: both;
content: '';
display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
background: none;
border: none;
cursor: pointer;
display: inline-block;
float: left;
height: 24px;
padding-block: 3px;
padding-inline: 5px;
width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
float: left;
height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type='file'],
.ql-snow .ql-toolbar input.ql-image[type='file'] {
display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
stroke: #06c;
}
@media (pointer: coarse) {
.ql-snow.ql-toolbar button:hover:not(.ql-active),
.ql-snow .ql-toolbar button:hover:not(.ql-active) {
color: #444;
}
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
fill: #444;
}
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
stroke: #444;
}
}
.ql-snow {
box-sizing: border-box;
}
.ql-snow * {
box-sizing: border-box;
}
.ql-snow .ql-hidden {
display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
visibility: hidden;
}
.ql-snow .ql-tooltip {
position: absolute;
transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
cursor: pointer;
text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
transform: translateY(-10px);
}
.ql-snow .ql-formats {
display: inline-block;
vertical-align: middle;
}
.ql-snow .ql-formats:after {
clear: both;
content: '';
display: table;
}
.ql-snow .ql-stroke {
fill: none;
stroke: #444;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
fill: none;
stroke: #444;
stroke-miterlimit: 10;
stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
fill: #444;
}
.ql-snow .ql-empty {
fill: none;
}
.ql-snow .ql-even {
fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
stroke-width: 1;
}
.ql-snow .ql-transparent {
opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
display: none;
}
.ql-snow .ql-editor h1 {
font-size: 2rem;
}
.ql-snow .ql-editor h2 {
font-size: 1.5rem;
}
.ql-snow .ql-editor h3 {
font-size: 1.17rem;
}
.ql-snow .ql-editor h4 {
font-size: 1rem;
}
.ql-snow .ql-editor h5 {
font-size: 0.83rem;
}
.ql-snow .ql-editor h6 {
font-size: 0.67rem;
}
.ql-snow .ql-editor a {
text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
border-inline-start: 4px solid #ccc;
margin-block-end: 5px;
margin-block-start: 5px;
padding-inline-start: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
background: #f0f0f0;
border-radius: 3px;
}
.ql-snow .ql-editor pre {
white-space: pre-wrap;
margin-block-end: 5px;
margin-block-start: 5px;
padding: 5px 10px;
}
.ql-snow .ql-editor code {
font-size: 85%;
padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
background: #23241f;
color: #f8f8f2;
overflow: visible;
}
.ql-snow .ql-editor img {
max-width: 100%;
}
.ql-snow .ql-picker {
color: #444;
display: inline-block;
float: left;
inset-inline-start: 0;
font-size: 14px;
font-weight: 500;
height: 24px;
position: relative;
vertical-align: middle;
}
.ql-snow .ql-picker-label {
cursor: pointer;
display: inline-block;
height: 100%;
padding-inline-start: 8px;
padding-inline-end: 2px;
position: relative;
width: 100%;
}
.ql-snow .ql-picker-label::before {
display: inline-block;
line-height: 22px;
}
.ql-snow .ql-picker-options {
background: #fff;
display: none;
min-width: 100%;
padding: 4px 8px;
position: absolute;
white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
cursor: pointer;
display: block;
padding-block-end: 5px;
padding-block-start: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
color: #ccc;
z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
display: block;
margin-block-start: -1px;
top: 100%;
z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
inset-inline-end: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
padding: 4px 0;
}
.ql-snow .ql-icon-picker .ql-picker-item {
height: 24px;
width: 24px;
padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
padding: 3px 5px;
width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
border: 1px solid transparent;
float: left;
height: 16px;
margin: 2px;
padding: 0;
width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
position: absolute;
margin-block-start: -9px;
inset-inline-end: 0;
top: 50%;
width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
font-size: 2rem;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
font-size: 1.5rem;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
font-size: 1.17rem;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
font-size: 1rem;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
font-size: 0.83rem;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
font-size: 0.67rem;
}
.ql-snow .ql-picker.ql-font {
width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
background: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
background: #000;
}
.ql-toolbar.ql-snow {
border: 1px solid #ccc;
box-sizing: border-box;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
padding: 8px;
}
.ql-toolbar.ql-snow .ql-formats {
margin-inline-end: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
border: 1px solid transparent;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
border-block-start: 0;
}
.ql-snow .ql-tooltip {
background: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ddd;
color: #444;
padding: 5px 12px;
white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
content: 'Visit URL:';
line-height: 26px;
margin-inline-end: 8px;
}
.ql-snow .ql-tooltip input[type='text'] {
display: none;
border: 1px solid #ccc;
font-size: 13px;
height: 26px;
margin: 0;
padding: 3px 5px;
width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
display: inline-block;
max-width: 200px;
overflow-x: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
border-inline-end: 1px solid #ccc;
content: 'Edit';
margin-inline-start: 16px;
padding-inline-end: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
content: 'Remove';
margin-inline-start: 8px;
}
.ql-snow .ql-tooltip a {
line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type='text'] {
display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-inline-end: 0;
content: 'Save';
padding-inline-end: 0;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
content: 'Enter link:';
}
.ql-snow .ql-tooltip[data-mode='formula']::before {
content: 'Enter formula:';
}
.ql-snow .ql-tooltip[data-mode='video']::before {
content: 'Enter video:';
}
.ql-snow a {
color: #06c;
}
.ql-container.ql-snow {
border: 1px solid #ccc;
}
.p-editor .p-editor-toolbar {
background: ${dt('editor.toolbar.background')};
border-start-end-radius: ${dt('editor.toolbar.border.radius')};
border-start-start-radius: ${dt('editor.toolbar.border.radius')};
}
.p-editor .p-editor-toolbar.ql-snow {
border: 1px solid ${dt('editor.toolbar.border.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-stroke {
stroke: ${dt('editor.toolbar.item.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-fill {
fill: ${dt('editor.toolbar.item.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
border: 0 none;
color: ${dt('editor.toolbar.item.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
color: ${dt('editor.toolbar.item.hover.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
stroke: ${dt('editor.toolbar.item.hover.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
fill: ${dt('editor.toolbar.item.hover.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
color: ${dt('editor.toolbar.item.active.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
stroke: ${dt('editor.toolbar.item.active.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
fill: ${dt('editor.toolbar.item.active.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
background: ${dt('editor.overlay.background')};
border: 1px solid ${dt('editor.overlay.border.color')};
box-shadow: ${dt('editor.overlay.shadow')};
border-radius: ${dt('editor.overlay.border.radius')};
padding: ${dt('editor.overlay.padding')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
color: ${dt('editor.overlay.option.color')};
border-radius: ${dt('editor.overlay.option.border.radius')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
background: ${dt('editor.overlay.option.focus.background')};
color: ${dt('editor.overlay.option.focus.color')};
}
.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
padding: ${dt('editor.overlay.option.padding')};
}
.p-editor .p-editor-content {
border-end-end-radius: ${dt('editor.content.border.radius')};
border-end-start-radius: ${dt('editor.content.border.radius')};
}
.p-editor .p-editor-content.ql-snow {
border: 1px solid ${dt('editor.content.border.color')};
}
.p-editor .p-editor-content .ql-editor {
background: ${dt('editor.content.background')};
color: ${dt('editor.content.color')};
border-end-end-radius: ${dt('editor.content.border.radius')};
border-end-start-radius: ${dt('editor.content.border.radius')};
}
.p-editor .ql-snow.ql-toolbar button:hover,
.p-editor .ql-snow.ql-toolbar button:focus {
color: ${dt('editor.toolbar.item.hover.color')};
}
.p-editor .ql-snow.ql-toolbar button:hover .ql-stroke,
.p-editor .ql-snow.ql-toolbar button:focus .ql-stroke {
stroke: ${dt('editor.toolbar.item.hover.color')};
}
.p-editor .ql-snow.ql-toolbar button:hover .ql-fill,
.p-editor .ql-snow.ql-toolbar button:focus .ql-fill {
fill: ${dt('editor.toolbar.item.hover.color')};
}
.p-editor .ql-snow.ql-toolbar button.ql-active,
.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
color: ${dt('editor.toolbar.item.active.color')};
}
.p-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
stroke: ${dt('editor.toolbar.item.active.color')};
}
.p-editor .ql-snow.ql-toolbar button.ql-active .ql-fill,
.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
fill: ${dt('editor.toolbar.item.active.color')};
}
.p-editor .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
color: ${dt('editor.toolbar.item.active.color')};
}
`;
const classes = {
root: ({ instance }) => [
'p-editor',

72
packages/primevue/src/fieldset/style/FieldsetStyle.js
View File

@ -1,76 +1,6 @@
import { theme } from '@primeuix/styles/fieldset';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-fieldset {
background: ${dt('fieldset.background')};
border: 1px solid ${dt('fieldset.border.color')};
border-radius: ${dt('fieldset.border.radius')};
color: ${dt('fieldset.color')};
padding: ${dt('fieldset.padding')};
margin: 0;
}
.p-fieldset-legend {
background: ${dt('fieldset.legend.background')};
border-radius: ${dt('fieldset.legend.border.radius')};
border-width: ${dt('fieldset.legend.border.width')};
border-style: solid;
border-color: ${dt('fieldset.legend.border.color')};
padding: ${dt('fieldset.legend.padding')};
transition: background ${dt('fieldset.transition.duration')}, color ${dt('fieldset.transition.duration')}, outline-color ${dt('fieldset.transition.duration')}, box-shadow ${dt('fieldset.transition.duration')};
}
.p-fieldset-toggleable > .p-fieldset-legend {
padding: 0;
}
.p-fieldset-toggle-button {
cursor: pointer;
user-select: none;
overflow: hidden;
position: relative;
text-decoration: none;
display: flex;
gap: ${dt('fieldset.legend.gap')};
align-items: center;
justify-content: center;
padding: ${dt('fieldset.legend.padding')};
background: transparent;
border: 0 none;
border-radius: ${dt('fieldset.legend.border.radius')};
transition: background ${dt('fieldset.transition.duration')}, color ${dt('fieldset.transition.duration')}, outline-color ${dt('fieldset.transition.duration')}, box-shadow ${dt('fieldset.transition.duration')};
outline-color: transparent;
}
.p-fieldset-legend-label {
font-weight: ${dt('fieldset.legend.font.weight')};
}
.p-fieldset-toggle-button:focus-visible {
box-shadow: ${dt('fieldset.legend.focus.ring.shadow')};
outline: ${dt('fieldset.legend.focus.ring.width')} ${dt('fieldset.legend.focus.ring.style')} ${dt('fieldset.legend.focus.ring.color')};
outline-offset: ${dt('fieldset.legend.focus.ring.offset')};
}
.p-fieldset-toggleable > .p-fieldset-legend: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('fieldset.transition.duration')};
}
.p-fieldset-toggleable > .p-fieldset-legend:hover .p-fieldset-toggle-icon {
color: ${dt('fieldset.toggle.icon.hover.color')};
}
.p-fieldset .p-fieldset-content {
padding: ${dt('fieldset.content.padding')};
}
`;
const classes = {
root: ({ props }) => [
'p-fieldset p-component',

86
packages/primevue/src/fileupload/style/FileUploadStyle.js
View File

@ -1,90 +1,6 @@
import { theme } from '@primeuix/styles/fileupload';
import BaseStyle from '@primevue/core/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('fileupload.border.radius')};
background: ${dt('fileupload.background')};
color: ${dt('fileupload.color')};
}
.p-fileupload-header {
display: flex;
align-items: center;
padding: ${dt('fileupload.header.padding')};
background: ${dt('fileupload.header.background')};
color: ${dt('fileupload.header.color')};
border-style: solid;
border-width: ${dt('fileupload.header.border.width')};
border-color: ${dt('fileupload.header.border.color')};
border-radius: ${dt('fileupload.header.border.radius')};
gap: ${dt('fileupload.header.gap')};
}
.p-fileupload-content {
border: 1px solid transparent;
display: flex;
flex-direction: column;
gap: ${dt('fileupload.content.gap')};
transition: border-color ${dt('fileupload.transition.duration')};
padding: ${dt('fileupload.content.padding')};
}
.p-fileupload-content .p-progressbar {
width: 100%;
height: ${dt('fileupload.progressbar.height')};
}
.p-fileupload-file-list {
display: flex;
flex-direction: column;
gap: ${dt('fileupload.filelist.gap')};
}
.p-fileupload-file {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: ${dt('fileupload.file.padding')};
border-block-end: 1px solid ${dt('fileupload.file.border.color')};
gap: ${dt('fileupload.file.gap')};
}
.p-fileupload-file:last-child {
border-block-end: 0;
}
.p-fileupload-file-info {
display: flex;
flex-direction: column;
gap: ${dt('fileupload.file.info.gap')};
}
.p-fileupload-file-thumbnail {
flex-shrink: 0;
}
.p-fileupload-file-actions {
margin-inline-start: auto;
}
.p-fileupload-highlight {
border: 1px dashed ${dt('fileupload.content.highlight.border.color')};
}
.p-fileupload-basic {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: ${dt('fileupload.basic.gap')};
}
`;
const classes = {
root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
header: 'p-fileupload-header',

96
packages/primevue/src/floatlabel/style/FloatLabelStyle.js
View File

@ -1,100 +1,6 @@
import { theme } from '@primeuix/styles/floatlabel';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-floatlabel {
display: block;
position: relative;
}
.p-floatlabel label {
position: absolute;
pointer-events: none;
top: 50%;
transform: translateY(-50%);
transition-property: all;
transition-timing-function: ease;
line-height: 1;
font-weight: ${dt('floatlabel.font.weight')};
inset-inline-start: ${dt('floatlabel.position.x')};
color: ${dt('floatlabel.color')};
transition-duration: ${dt('floatlabel.transition.duration')};
}
.p-floatlabel:has(.p-textarea) label {
top: ${dt('floatlabel.position.y')};
transform: translateY(0);
}
.p-floatlabel:has(.p-inputicon:first-child) label {
inset-inline-start: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
.p-floatlabel:has(.p-invalid) label {
color: ${dt('floatlabel.invalid.color')};
}
.p-floatlabel:has(input:focus) label,
.p-floatlabel:has(input.p-filled) label,
.p-floatlabel:has(input:-webkit-autofill) label,
.p-floatlabel:has(textarea:focus) label,
.p-floatlabel:has(textarea.p-filled) label,
.p-floatlabel:has(.p-inputwrapper-focus) label,
.p-floatlabel:has(.p-inputwrapper-filled) label {
top: ${dt('floatlabel.over.active.top')};
transform: translateY(0);
font-size: ${dt('floatlabel.active.font.size')};
font-weight: ${dt('floatlabel.active.font.weight')};
}
.p-floatlabel:has(input.p-filled) label,
.p-floatlabel:has(textarea.p-filled) label,
.p-floatlabel:has(.p-inputwrapper-filled) label {
color: ${dt('floatlabel.active.color')};
}
.p-floatlabel:has(input:focus) label,
.p-floatlabel:has(input:-webkit-autofill) label,
.p-floatlabel:has(textarea:focus) label,
.p-floatlabel:has(.p-inputwrapper-focus) label {
color: ${dt('floatlabel.focus.color')};
}
.p-floatlabel-in .p-inputtext,
.p-floatlabel-in .p-textarea,
.p-floatlabel-in .p-select-label,
.p-floatlabel-in .p-multiselect-label,
.p-floatlabel-in .p-autocomplete-input-multiple,
.p-floatlabel-in .p-cascadeselect-label,
.p-floatlabel-in .p-treeselect-label {
padding-block-start: ${dt('floatlabel.in.input.padding.top')};
padding-block-end: ${dt('floatlabel.in.input.padding.bottom')};
}
.p-floatlabel-in:has(input:focus) label,
.p-floatlabel-in:has(input.p-filled) label,
.p-floatlabel-in:has(input:-webkit-autofill) label,
.p-floatlabel-in:has(textarea:focus) label,
.p-floatlabel-in:has(textarea.p-filled) label,
.p-floatlabel-in:has(.p-inputwrapper-focus) label,
.p-floatlabel-in:has(.p-inputwrapper-filled) label {
top: ${dt('floatlabel.in.active.top')};
}
.p-floatlabel-on:has(input:focus) label,
.p-floatlabel-on:has(input.p-filled) label,
.p-floatlabel-on:has(input:-webkit-autofill) label,
.p-floatlabel-on:has(textarea:focus) label,
.p-floatlabel-on:has(textarea.p-filled) label,
.p-floatlabel-on:has(.p-inputwrapper-focus) label,
.p-floatlabel-on:has(.p-inputwrapper-filled) label {
top: 0;
transform: translateY(-50%);
border-radius: ${dt('floatlabel.on.border.radius')};
background: ${dt('floatlabel.on.active.background')};
padding: ${dt('floatlabel.on.active.padding')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-floatlabel',

432
packages/primevue/src/galleria/style/GalleriaStyle.js
View File

@ -1,436 +1,6 @@
import { theme } from '@primeuix/styles/galleria';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-galleria {
overflow: hidden;
border-style: solid;
border-width: ${dt('galleria.border.width')};
border-color: ${dt('galleria.border.color')};
border-radius: ${dt('galleria.border.radius')};
}
.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-nav-button {
position: absolute !important;
top: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: ${dt('galleria.nav.button.background')};
color: ${dt('galleria.nav.button.color')};
width: ${dt('galleria.nav.button.size')};
height: ${dt('galleria.nav.button.size')};
transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')}, box-shadow ${dt('galleria.transition.duration')};
margin: calc(-1 * calc(${dt('galleria.nav.button.size')}) / 2) ${dt('galleria.nav.button.gutter')} 0 ${dt('galleria.nav.button.gutter')};
padding: 0;
user-select: none;
border: 0 none;
cursor: pointer;
outline-color: transparent;
}
.p-galleria-nav-button:not(.p-disabled):hover {
background: ${dt('galleria.nav.button.hover.background')};
color: ${dt('galleria.nav.button.hover.color')};
}
.p-galleria-nav-button:not(.p-disabled):focus-visible {
box-shadow: ${dt('galleria.nav.button.focus.ring.shadow')};
outline: ${dt('galleria.nav.button.focus.ring.width')} ${dt('galleria.nav.button.focus.ring.style')} ${dt('galleria.nav.button.focus.ring.color')};
outline-offset: ${dt('galleria.nav.button.focus.ring.offset')};
}
.p-galleria-next-icon,
.p-galleria-prev-icon {
font-size: ${dt('galleria.nav.icon.size')};
width: ${dt('galleria.nav.icon.size')};
height: ${dt('galleria.nav.icon.size')};
}
.p-galleria-prev-button {
border-radius: ${dt('galleria.nav.button.prev.border.radius')};
left: 0;
}
.p-galleria-next-button {
border-radius: ${dt('galleria.nav.button.next.border.radius')};
right: 0;
}
.p-galleria-prev-button:dir(rtl) {
left: auto;
right: 0;
transform: rotate(180deg);
}
.p-galleria-next-button:dir(rtl) {
right: auto;
left: 0;
transform: rotate(180deg);
}
.p-galleria-item {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.p-galleria-hover-navigators .p-galleria-nav-button {
pointer-events: none;
opacity: 0;
transition: opacity ${dt('galleria.transition.duration')} ease-in-out;
}
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
pointer-events: all;
opacity: 1;
}
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-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: ${dt('galleria.caption.padding')};
}
.p-galleria-thumbnails {
display: flex;
flex-direction: column;
overflow: auto;
flex-shrink: 0;
}
.p-galleria-thumbnail-nav-button {
align-self: center;
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
margin: 0 ${dt('galleria.thumbnail.nav.button.gutter')};
padding: 0;
border: none;
user-select: none;
cursor: pointer;
background: transparent;
color: ${dt('galleria.thumbnail.nav.button.color')};
width: ${dt('galleria.thumbnail.nav.button.size')};
height: ${dt('galleria.thumbnail.nav.button.size')};
transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')};
outline-color: transparent;
border-radius: ${dt('galleria.thumbnail.nav.button.border.radius')};
}
.p-galleria-thumbnail-nav-button:hover {
background: ${dt('galleria.thumbnail.nav.button.hover.background')};
color: ${dt('galleria.thumbnail.nav.button.hover.color')};
}
.p-galleria-thumbnail-nav-button:focus-visible {
box-shadow: ${dt('galleria.thumbnail.nav.button.focus.ring.shadow')};
outline: ${dt('galleria.thumbnail.nav.button.focus.ring.width')} ${dt('galleria.thumbnail.nav.button.focus.ring.style')} ${dt('galleria.thumbnail.nav.button.focus.ring.color')};
outline-offset: ${dt('galleria.thumbnail.nav.button.focus.ring.offset')};
}
.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,
.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {
font-size: ${dt('galleria.thumbnail.nav.button.icon.size')};
width: ${dt('galleria.thumbnail.nav.button.icon.size')};
height: ${dt('galleria.thumbnail.nav.button.icon.size')};
}
.p-galleria-thumbnails-content {
display: flex;
flex-direction: row;
background: ${dt('galleria.thumbnails.content.background')};
padding: ${dt('galleria.thumbnails.content.padding')};
}
.p-galleria-thumbnails-viewport {
overflow: hidden;
width: 100%;
}
.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),
.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {
transform: rotate(180deg);
}
.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-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: ${dt('galleria.indicator.list.padding')};
gap: ${dt('galleria.indicator.list.gap')};
margin: 0;
list-style: none;
}
.p-galleria-indicator-button {
display: inline-flex;
align-items: center;
background: ${dt('galleria.indicator.button.background')};
width: ${dt('galleria.indicator.button.width')};
height: ${dt('galleria.indicator.button.height')};
transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')}, box-shadow ${dt('galleria.transition.duration')};
outline-color: transparent;
border-radius: ${dt('galleria.indicator.button.border.radius')};
margin: 0;
padding: 0;
border: none;
user-select: none;
cursor: pointer;
}
.p-galleria-indicator-button:hover {
background: ${dt('galleria.indicator.button.hover.background')};
}
.p-galleria-indicator-button:focus-visible {
box-shadow: ${dt('galleria.indicator.button.focus.ring.shadow')};
outline: ${dt('galleria.indicator.button.focus.ring.width')} ${dt('galleria.indicator.button.focus.ring.style')} ${dt('galleria.indicator.button.focus.ring.color')};
outline-offset: ${dt('galleria.indicator.button.focus.ring.offset')};
}
.p-galleria-indicator-active .p-galleria-indicator-button {
background: ${dt('galleria.indicator.button.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.indicator.list.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.button.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-button:hover {
background: ${dt('galleria.inset.indicator.button.hover.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.button.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-galleria-close-button {
position: absolute !important;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin: ${dt('galleria.close.button.gutter')};
background: ${dt('galleria.close.button.background')};
color: ${dt('galleria.close.button.color')};
width: ${dt('galleria.close.button.size')};
height: ${dt('galleria.close.button.size')};
padding: 0;
border: none;
user-select: none;
cursor: pointer;
border-radius: ${dt('galleria.close.button.border.radius')};
outline-color: transparent;
transition: background ${dt('galleria.transition.duration')}, color ${dt('galleria.transition.duration')}, outline-color ${dt('galleria.transition.duration')};
}
.p-galleria-close-icon {
font-size: ${dt('galleria.close.button.icon.size')};
width: ${dt('galleria.close.button.icon.size')};
height: ${dt('galleria.close.button.icon.size')};
}
.p-galleria-close-button:hover {
background: ${dt('galleria.close.button.hover.background')};
color: ${dt('galleria.close.button.hover.color')};
}
.p-galleria-close-button:focus-visible {
box-shadow: ${dt('galleria.close.button.focus.ring.shadow')};
outline: ${dt('galleria.close.button.focus.ring.width')} ${dt('galleria.close.button.focus.ring.style')} ${dt('galleria.close.button.focus.ring.color')};
outline-offset: ${dt('galleria.close.button.focus.ring.offset')};
}
.p-galleria-mask .p-galleria-nav-button {
position: fixed;
top: 50%;
}
.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-nav-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: 'p-galleria-mask p-overlay-mask p-overlay-mask-enter',
root: ({ instance }) => {

45
packages/primevue/src/iconfield/style/IconFieldStyle.js
View File

@ -1,49 +1,6 @@
import { theme } from '@primeuix/styles/iconfield';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-iconfield {
position: relative;
}
.p-inputicon {
position: absolute;
top: 50%;
margin-top: calc(-1 * (${dt('icon.size')} / 2));
color: ${dt('iconfield.icon.color')};
line-height: 1;
}
.p-iconfield .p-inputicon:first-child {
inset-inline-start: ${dt('form.field.padding.x')};
}
.p-iconfield .p-inputicon:last-child {
inset-inline-end: ${dt('form.field.padding.x')};
}
.p-iconfield .p-inputtext:not(:first-child) {
padding-inline-start: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
.p-iconfield .p-inputtext:not(:last-child) {
padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
.p-iconfield:has(.p-inputfield-sm) .p-inputicon {
font-size: ${dt('form.field.sm.font.size')};
width: ${dt('form.field.sm.font.size')};
height: ${dt('form.field.sm.font.size')};
margin-top: calc(-1 * (${dt('form.field.sm.font.size')} / 2));
}
.p-iconfield:has(.p-inputfield-lg) .p-inputicon {
font-size: ${dt('form.field.lg.font.size')};
width: ${dt('form.field.lg.font.size')};
height: ${dt('form.field.lg.font.size')};
margin-top: calc(-1 * (${dt('form.field.lg.font.size')} / 2));
}
`;
const classes = {
root: 'p-iconfield'
};

50
packages/primevue/src/iftalabel/style/IftaLabelStyle.js
View File

@ -1,54 +1,6 @@
import { theme } from '@primeuix/styles/iftalabel';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-iftalabel {
display: block;
position: relative;
}
.p-iftalabel label {
position: absolute;
pointer-events: none;
top: ${dt('iftalabel.top')};
transition-property: all;
transition-timing-function: ease;
line-height: 1;
font-size: ${dt('iftalabel.font.size')};
font-weight: ${dt('iftalabel.font.weight')};
inset-inline-start: ${dt('iftalabel.position.x')};
color: ${dt('iftalabel.color')};
transition-duration: ${dt('iftalabel.transition.duration')};
}
.p-iftalabel .p-inputtext,
.p-iftalabel .p-textarea,
.p-iftalabel .p-select-label,
.p-iftalabel .p-multiselect-label,
.p-iftalabel .p-autocomplete-input-multiple,
.p-iftalabel .p-cascadeselect-label,
.p-iftalabel .p-treeselect-label {
padding-block-start: ${dt('iftalabel.input.padding.top')};
padding-block-end: ${dt('iftalabel.input.padding.bottom')};
}
.p-iftalabel:has(.p-invalid) label {
color: ${dt('iftalabel.invalid.color')};
}
.p-iftalabel:has(input:focus) label,
.p-iftalabel:has(input:-webkit-autofill) label,
.p-iftalabel:has(textarea:focus) label,
.p-iftalabel:has(.p-inputwrapper-focus) label {
color: ${dt('iftalabel.focus.color')};
}
.p-iftalabel .p-inputicon {
top: ${dt('iftalabel.input.padding.top')};
transform: translateY(25%);
margin-top: 0;
}
`;
const classes = {
root: 'p-iftalabel'
};

123
packages/primevue/src/image/style/ImageStyle.js
View File

@ -1,127 +1,6 @@
import { theme } from '@primeuix/styles/image';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-image-mask {
display: flex;
align-items: center;
justify-content: center;
}
.p-image-preview {
position: relative;
display: inline-flex;
line-height: 0;
}
.p-image-preview-mask {
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
border: 0 none;
padding: 0;
cursor: pointer;
background: transparent;
color: ${dt('image.preview.mask.color')};
transition: background ${dt('image.transition.duration')};
}
.p-image-preview:hover > .p-image-preview-mask {
opacity: 1;
cursor: pointer;
background: ${dt('image.preview.mask.background')};
}
.p-image-preview-icon {
font-size: ${dt('image.preview.icon.size')};
width: ${dt('image.preview.icon.size')};
height: ${dt('image.preview.icon.size')};
}
.p-image-toolbar {
position: absolute;
inset-block-start: ${dt('image.toolbar.position.top')};
inset-inline-end: ${dt('image.toolbar.position.right')};
inset-inline-start: ${dt('image.toolbar.position.left')};
inset-block-end: ${dt('image.toolbar.position.bottom')};
display: flex;
z-index: 1;
padding: ${dt('image.toolbar.padding')};
background: ${dt('image.toolbar.background')};
backdrop-filter: blur(${dt('image.toolbar.blur')});
border-color: ${dt('image.toolbar.border.color')};
border-style: solid;
border-width: ${dt('image.toolbar.border.width')};
border-radius: ${dt('image.toolbar.border.radius')};
gap: ${dt('image.toolbar.gap')};
}
.p-image-action {
display: inline-flex;
justify-content: center;
align-items: center;
color: ${dt('image.action.color')};
background: transparent;
width: ${dt('image.action.size')};
height: ${dt('image.action.size')};
margin: 0;
padding: 0;
border: 0 none;
cursor: pointer;
user-select: none;
border-radius: ${dt('image.action.border.radius')};
outline-color: transparent;
transition: background ${dt('image.transition.duration')}, color ${dt('image.transition.duration')}, outline-color ${dt('image.transition.duration')}, box-shadow ${dt('image.transition.duration')};
}
.p-image-action:hover {
color: ${dt('image.action.hover.color')};
background: ${dt('image.action.hover.background')};
}
.p-image-action:focus-visible {
box-shadow: ${dt('image.action.focus.ring.shadow')};
outline: ${dt('image.action.focus.ring.width')} ${dt('image.action.focus.ring.style')} ${dt('image.action.focus.ring.color')};
outline-offset: ${dt('image.action.focus.ring.offset')};
}
.p-image-action .p-icon {
font-size: ${dt('image.action.icon.size')};
width: ${dt('image.action.icon.size')};
height: ${dt('image.action.icon.size')};
}
.p-image-action.p-disabled {
pointer-events: auto;
}
.p-image-original {
transition: transform 0.15s;
max-width: 100vw;
max-height: 100vh;
}
.p-image-original-enter-active {
transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
}
.p-image-original-leave-active {
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.p-image-original-enter-from,
.p-image-original-leave-to {
opacity: 0;
transform: scale(0.7);
}
`;
const classes = {
root: ({ props }) => [
'p-image p-component',

88
packages/primevue/src/imagecompare/style/ImageCompareStyle.js
View File

@ -1,92 +1,6 @@
import { theme } from '@primeuix/styles/imagecompare';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-imagecompare {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 9;
}
.p-imagecompare img {
width: 100%;
height: 100%;
position: absolute;
}
.p-imagecompare img + img {
clip-path: polygon(0 0, ${dt('imagecompare.scope.x', '50%')} 0, ${dt('imagecompare.scope.x', '50%')} 100%, 0 100%);
}
.p-imagecompare:dir(rtl) img + img {
clip-path: polygon(calc(100% - ${dt('imagecompare.scope.x', '50%')}) 0, 100% 0, 100% 100%, calc(100% - ${dt('imagecompare.scope.x', '50%')}) 100%);
}
.p-imagecompare-slider {
position: relative;
-webkit-appearance: none;
width: calc(100% + ${dt('imagecompare.handle.size')});
height: 100%;
margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));
background-color: transparent;
outline: none;
transition: all ${dt('imagecompare.handle.transition.duration')};
}
.p-imagecompare-slider::-webkit-slider-thumb {
-webkit-appearance: none;
height: ${dt('imagecompare.handle.size')};
width: ${dt('imagecompare.handle.size')};
background: ${dt('imagecompare.handle.background')};
border: ${dt('imagecompare.handle.border.width')} solid ${dt('imagecompare.handle.border.color')};
border-radius: ${dt('imagecompare.handle.border.radius')};
background-size: contain;
cursor: ew-resize;
transition: all ${dt('imagecompare.handle.transition.duration')};
}
.p-imagecompare-slider::-moz-range-thumb {
height: ${dt('imagecompare.handle.size')};
width: ${dt('imagecompare.handle.size')};
background: ${dt('imagecompare.handle.background')};
border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};
border-radius: ${dt('imagecompare.handle.border.radius')};
background-size: contain;
cursor: ew-resize;
}
.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {
box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};
outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
}
.p-imagecompare-slider:focus-visible::-moz-range-thumb {
box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};
outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};
outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};
}
.p-imagecompare-slider:hover {
width: calc(100% + ${dt('imagecompare.handle.hover.size')});
margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.hover.size')} / 2));
}
.p-imagecompare-slider:hover::-webkit-slider-thumb {
background: ${dt('imagecompare.handle.hover.background')};
border-color: ${dt('imagecompare.handle.hover.border.color')};
height: ${dt('imagecompare.handle.hover.size')};
width: ${dt('imagecompare.handle.hover.size')};
}
.p-imagecompare-slider:hover::-moz-range-thumb {
background: ${dt('imagecompare.handle.hover.background')};
border-color: ${dt('imagecompare.handle.hover.border.color')};
height: ${dt('imagecompare.handle.hover.size')};
width: ${dt('imagecompare.handle.hover.size')};
}
`;
const classes = {
root: 'p-imagecompare',
slider: 'p-imagecompare-slider'

94
packages/primevue/src/inlinemessage/style/InlineMessageStyle.js
View File

@ -1,98 +1,6 @@
import { theme } from '@primeuix/styles/inlinemessage';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-inlinemessage {
display: inline-flex;
align-items: center;
justify-content: center;
padding: ${dt('inlinemessage.padding')};
border-radius: ${dt('inlinemessage.border.radius')};
gap: ${dt('inlinemessage.gap')};
}
.p-inlinemessage-text {
font-weight: ${dt('inlinemessage.text.font.weight')};
}
.p-inlinemessage-icon {
flex-shrink: 0;
font-size: ${dt('inlinemessage.icon.size')};
width: ${dt('inlinemessage.icon.size')};
height: ${dt('inlinemessage.icon.size')};
}
.p-inlinemessage-icon-only .p-inlinemessage-text {
visibility: hidden;
width: 0;
}
.p-inlinemessage-info {
background: ${dt('inlinemessage.info.background')};
border: 1px solid ${dt('inlinemessage.info.border.color')};
color: ${dt('inlinemessage.info.color')};
box-shadow: ${dt('inlinemessage.info.shadow')};
}
.p-inlinemessage-info .p-inlinemessage-icon {
color: ${dt('inlinemessage.info.color')};
}
.p-inlinemessage-success {
background: ${dt('inlinemessage.success.background')};
border: 1px solid ${dt('inlinemessage.success.border.color')};
color: ${dt('inlinemessage.success.color')};
box-shadow: ${dt('inlinemessage.success.shadow')};
}
.p-inlinemessage-success .p-inlinemessage-icon {
color: ${dt('inlinemessage.success.color')};
}
.p-inlinemessage-warn {
background: ${dt('inlinemessage.warn.background')};
border: 1px solid ${dt('inlinemessage.warn.border.color')};
color: ${dt('inlinemessage.warn.color')};
box-shadow: ${dt('inlinemessage.warn.shadow')};
}
.p-inlinemessage-warn .p-inlinemessage-icon {
color: ${dt('inlinemessage.warn.color')};
}
.p-inlinemessage-error {
background: ${dt('inlinemessage.error.background')};
border: 1px solid ${dt('inlinemessage.error.border.color')};
color: ${dt('inlinemessage.error.color')};
box-shadow: ${dt('inlinemessage.error.shadow')};
}
.p-inlinemessage-error .p-inlinemessage-icon {
color: ${dt('inlinemessage.error.color')};
}
.p-inlinemessage-secondary {
background: ${dt('inlinemessage.secondary.background')};
border: 1px solid ${dt('inlinemessage.secondary.border.color')};
color: ${dt('inlinemessage.secondary.color')};
box-shadow: ${dt('inlinemessage.secondary.shadow')};
}
.p-inlinemessage-secondary .p-inlinemessage-icon {
color: ${dt('inlinemessage.secondary.color')};
}
.p-inlinemessage-contrast {
background: ${dt('inlinemessage.contrast.background')};
border: 1px solid ${dt('inlinemessage.contrast.border.color')};
color: ${dt('inlinemessage.contrast.color')};
box-shadow: ${dt('inlinemessage.contrast.shadow')};
}
.p-inlinemessage-contrast .p-inlinemessage-icon {
color: ${dt('inlinemessage.contrast.color')};
}
`;
const classes = {
root: ({ props, instance }) => ['p-inlinemessage p-component p-inlinemessage-' + props.severity, { 'p-inlinemessage-icon-only': !instance.$slots.default }],
icon: ({ props }) => ['p-inlinemessage-icon', props.icon],

28
packages/primevue/src/inplace/style/InplaceStyle.js
View File

@ -1,32 +1,6 @@
import { theme } from '@primeuix/styles/inplace';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-inplace-display {
display: inline-block;
cursor: pointer;
border: 1px solid transparent;
padding: ${dt('inplace.padding')};
border-radius: ${dt('inplace.border.radius')};
transition: background ${dt('inplace.transition.duration')}, color ${dt('inplace.transition.duration')}, outline-color ${dt('inplace.transition.duration')}, box-shadow ${dt('inplace.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 {
box-shadow: ${dt('inplace.focus.ring.shadow')};
outline: ${dt('inplace.focus.ring.width')} ${dt('inplace.focus.ring.style')} ${dt('inplace.focus.ring.color')};
outline-offset: ${dt('inplace.focus.ring.offset')};
}
.p-inplace-content {
display: block;
}
`;
const classes = {
root: 'p-inplace p-component',
display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }],

101
packages/primevue/src/inputchips/style/InputChipsStyle.js
View File

@ -1,105 +1,6 @@
import { theme } from '@primeuix/styles/inputchips';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-inputchips {
display: inline-flex;
}
.p-inputchips-input {
margin: 0;
list-style-type: none;
cursor: text;
overflow: hidden;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: calc(${dt('inputchips.padding.y')} / 2) ${dt('inputchips.padding.x')};
gap: calc(${dt('inputchips.padding.y')} / 2);
color: ${dt('inputchips.color')};
background: ${dt('inputchips.background')};
border: 1px solid ${dt('inputchips.border.color')};
border-radius: ${dt('inputchips.border.radius')};
width: 100%;
transition: background ${dt('inputchips.transition.duration')}, color ${dt('inputchips.transition.duration')}, border-color ${dt('inputchips.transition.duration')}, outline-color ${dt('inputchips.transition.duration')}, box-shadow ${dt(
'inputchips.transition.duration'
)};
outline-color: transparent;
box-shadow: ${dt('inputchips.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')};
box-shadow: ${dt('inputchips.focus.ring.shadow')};
outline: ${dt('inputchips.focus.ring.width')} ${dt('inputchips.focus.ring.style')} ${dt('inputchips.focus.ring.color')};
outline-offset: ${dt('inputchips.focus.ring.offset')};
}
.p-inputchips.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-inputchips.p-disabled .p-inputchips-input {
opacity: 1;
background: ${dt('inputchips.disabled.background')};
color: ${dt('inputchips.disabled.color')};
}
.p-inputchips-chip.p-chip {
padding-top: calc(${dt('inputchips.padding.y')} / 2);
padding-bottom: calc(${dt('inputchips.padding.y')} / 2);
border-radius: ${dt('inputchips.chip.border.radius')};
transition: background ${dt('inputchips.transition.duration')}, color ${dt('inputchips.transition.duration')};
}
.p-inputchips-chip-item.p-focus .p-inputchips-chip {
background: ${dt('inputchips.chip.focus.background')};
color: ${dt('inputchips.chip.focus.color')};
}
.p-inputchips-input:has(.p-inputchips-chip) {
padding-left: calc(${dt('inputchips.padding.y')} / 2);
padding-right: calc(${dt('inputchips.padding.y')} / 2);
}
.p-inputchips-input-item {
flex: 1 1 auto;
display: inline-flex;
padding-top: calc(${dt('inputchips.padding.y')} / 2);
padding-bottom: calc(${dt('inputchips.padding.y')} / 2);
}
.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')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-inputchips p-component p-inputwrapper',

100
packages/primevue/src/inputgroup/style/InputGroupStyle.js
View File

@ -1,104 +1,6 @@
import { theme } from '@primeuix/styles/inputgroup';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-inputgroup,
.p-inputgroup .p-iconfield,
.p-inputgroup .p-floatlabel,
.p-inputgroup .p-iftalabel {
display: flex;
align-items: stretch;
width: 100%;
}
.p-inputgroup .p-inputtext,
.p-inputgroup .p-inputwrapper {
flex: 1 1 auto;
width: 1%;
}
.p-inputgroupaddon {
display: flex;
align-items: center;
justify-content: center;
padding: ${dt('inputgroup.addon.padding')};
background: ${dt('inputgroup.addon.background')};
color: ${dt('inputgroup.addon.color')};
border-block-start: 1px solid ${dt('inputgroup.addon.border.color')};
border-block-end: 1px solid ${dt('inputgroup.addon.border.color')};
min-width: ${dt('inputgroup.addon.min.width')};
}
.p-inputgroupaddon:first-child,
.p-inputgroupaddon + .p-inputgroupaddon {
border-inline-start: 1px solid ${dt('inputgroup.addon.border.color')};
}
.p-inputgroupaddon:last-child {
border-inline-end: 1px solid ${dt('inputgroup.addon.border.color')};
}
.p-inputgroupaddon:has(.p-button) {
padding: 0;
overflow: hidden;
}
.p-inputgroupaddon .p-button {
border-radius: 0;
}
.p-inputgroup > .p-component,
.p-inputgroup > .p-inputwrapper > .p-component,
.p-inputgroup > .p-iconfield > .p-component,
.p-inputgroup > .p-floatlabel > .p-component,
.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component,
.p-inputgroup > .p-iftalabel > .p-component,
.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component {
border-radius: 0;
margin: 0;
}
.p-inputgroupaddon:first-child,
.p-inputgroup > .p-component:first-child,
.p-inputgroup > .p-inputwrapper:first-child > .p-component,
.p-inputgroup > .p-iconfield:first-child > .p-component,
.p-inputgroup > .p-floatlabel:first-child > .p-component,
.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component,
.p-inputgroup > .p-iftalabel:first-child > .p-component,
.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component {
border-start-start-radius: ${dt('inputgroup.addon.border.radius')};
border-end-start-radius: ${dt('inputgroup.addon.border.radius')};
}
.p-inputgroupaddon:last-child,
.p-inputgroup > .p-component:last-child,
.p-inputgroup > .p-inputwrapper:last-child > .p-component,
.p-inputgroup > .p-iconfield:last-child > .p-component,
.p-inputgroup > .p-floatlabel:last-child > .p-component,
.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component,
.p-inputgroup > .p-iftalabel:last-child > .p-component,
.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component {
border-start-end-radius: ${dt('inputgroup.addon.border.radius')};
border-end-end-radius: ${dt('inputgroup.addon.border.radius')};
}
.p-inputgroup .p-component:focus,
.p-inputgroup .p-component.p-focus,
.p-inputgroup .p-inputwrapper-focus,
.p-inputgroup .p-component:focus ~ label,
.p-inputgroup .p-component.p-focus ~ label,
.p-inputgroup .p-inputwrapper-focus ~ label {
z-index: 1;
}
.p-inputgroup > .p-button:not(.p-button-icon-only) {
width: auto;
}
.p-inputgroup .p-iconfield + .p-iconfield .p-inputtext {
border-inline-start: 0;
}
`;
const classes = {
root: 'p-inputgroup'
};

162
packages/primevue/src/inputnumber/style/InputNumberStyle.js
View File

@ -1,166 +1,6 @@
import { theme } from '@primeuix/styles/inputnumber';
import BaseStyle from '@primevue/core/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;
cursor: pointer;
background: ${dt('inputnumber.button.background')};
color: ${dt('inputnumber.button.color')};
width: ${dt('inputnumber.button.width')};
transition: background ${dt('inputnumber.transition.duration')}, color ${dt('inputnumber.transition.duration')}, border-color ${dt('inputnumber.transition.duration')}, outline-color ${dt('inputnumber.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 .p-inputnumber-button {
position: relative;
border: 0 none;
}
.p-inputnumber-stacked .p-inputnumber-button-group {
display: flex;
flex-direction: column;
position: absolute;
inset-block-start: 1px;
inset-inline-end: 1px;
height: calc(100% - 2px);
z-index: 1;
}
.p-inputnumber-stacked .p-inputnumber-increment-button {
padding: 0;
border-start-end-radius: calc(${dt('inputnumber.button.border.radius')} - 1px);
}
.p-inputnumber-stacked .p-inputnumber-decrement-button {
padding: 0;
border-end-end-radius: calc(${dt('inputnumber.button.border.radius')} - 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-increment-button {
order: 3;
border-start-end-radius: ${dt('inputnumber.button.border.radius')};
border-end-end-radius: ${dt('inputnumber.button.border.radius')};
border-inline-start: 0 none;
}
.p-inputnumber-horizontal .p-inputnumber-input {
order: 2;
border-radius: 0;
}
.p-inputnumber-horizontal .p-inputnumber-decrement-button {
order: 1;
border-start-start-radius: ${dt('inputnumber.button.border.radius')};
border-end-start-radius: ${dt('inputnumber.button.border.radius')};
border-inline-end: 0 none;
}
.p-floatlabel:has(.p-inputnumber-horizontal) label {
margin-inline-start: ${dt('inputnumber.button.width')};
}
.p-inputnumber-vertical {
flex-direction: column;
}
.p-inputnumber-vertical .p-inputnumber-button {
border: 1px solid ${dt('inputnumber.button.border.color')};
padding: ${dt('inputnumber.button.vertical.padding')};
}
.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-increment-button {
order: 1;
border-start-start-radius: ${dt('inputnumber.button.border.radius')};
border-start-end-radius: ${dt('inputnumber.button.border.radius')};
width: 100%;
border-block-end: 0 none;
}
.p-inputnumber-vertical .p-inputnumber-input {
order: 2;
border-radius: 0;
text-align: center;
}
.p-inputnumber-vertical .p-inputnumber-decrement-button {
order: 3;
border-end-start-radius: ${dt('inputnumber.button.border.radius')};
border-end-end-radius: ${dt('inputnumber.button.border.radius')};
width: 100%;
border-block-start: 0 none;
}
.p-inputnumber-input {
flex: 1 1 auto;
}
.p-inputnumber-fluid {
width: 100%;
}
.p-inputnumber-fluid .p-inputnumber-input {
width: 1%;
}
.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
width: 100%;
}
.p-inputnumber:has(.p-inputtext-sm) .p-inputnumber-button .p-icon {
font-size: ${dt('form.field.sm.font.size')};
width: ${dt('form.field.sm.font.size')};
height: ${dt('form.field.sm.font.size')};
}
.p-inputnumber:has(.p-inputtext-lg) .p-inputnumber-button .p-icon {
font-size: ${dt('form.field.lg.font.size')};
width: ${dt('form.field.lg.font.size')};
height: ${dt('form.field.lg.font.size')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-inputnumber p-component p-inputwrapper',

37
packages/primevue/src/knob/style/KnobStyle.js
View File

@ -1,41 +1,6 @@
import { theme } from '@primeuix/styles/knob';
import BaseStyle from '@primevue/core/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: 50%;
outline-color: transparent;
transition: background ${dt('knob.transition.duration')}, color ${dt('knob.transition.duration')}, outline-color ${dt('knob.transition.duration')}, box-shadow ${dt('knob.transition.duration')};
}
.p-knob svg:focus-visible {
box-shadow: ${dt('knob.focus.ring.shadow')};
outline: ${dt('knob.focus.ring.width')} ${dt('knob.focus.ring.style')} ${dt('knob.focus.ring.color')};
outline-offset: ${dt('knob.focus.ring.offset')};
}
@keyframes p-knob-dash-frame {
100% {
stroke-dashoffset: 0;
}
}
`;
const classes = {
root: ({ instance, props }) => [
'p-knob p-component',

112
packages/primevue/src/listbox/style/ListboxStyle.js
View File

@ -1,116 +1,6 @@
import { theme } from '@primeuix/styles/listbox';
import BaseStyle from '@primevue/core/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('listbox.border.radius')};
transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')},
box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
outline-color: transparent;
box-shadow: ${dt('listbox.shadow')};
}
.p-listbox.p-disabled {
opacity: 1;
background: ${dt('listbox.disabled.background')};
color: ${dt('listbox.disabled.color')};
}
.p-listbox.p-disabled .p-listbox-option {
color: ${dt('listbox.disabled.color')};
}
.p-listbox.p-invalid {
border-color: ${dt('listbox.invalid.border.color')};
}
.p-listbox-header {
padding: ${dt('listbox.list.header.padding')};
}
.p-listbox-filter {
width: 100%;
}
.p-listbox-list-container {
overflow: auto;
}
.p-listbox-list {
list-style-type: none;
margin: 0;
padding: ${dt('listbox.list.padding')};
outline: 0 none;
display: flex;
flex-direction: column;
gap: ${dt('listbox.list.gap')};
}
.p-listbox-option {
display: flex;
align-items: center;
cursor: pointer;
position: relative;
overflow: hidden;
padding: ${dt('listbox.option.padding')};
border: 0 none;
border-radius: ${dt('listbox.option.border.radius')};
color: ${dt('listbox.option.color')};
transition: background ${dt('listbox.transition.duration')}, color ${dt('listbox.transition.duration')}, border-color ${dt('listbox.transition.duration')},
box-shadow ${dt('listbox.transition.duration')}, outline-color ${dt('listbox.transition.duration')};
}
.p-listbox-striped li:nth-child(even of .p-listbox-option) {
background: ${dt('listbox.option.striped.background')};
}
.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
background: ${dt('listbox.option.selected.background')};
color: ${dt('listbox.option.selected.color')};
}
.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {
background: ${dt('listbox.option.selected.focus.background')};
color: ${dt('listbox.option.selected.focus.color')};
}
.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {
background: ${dt('listbox.option.focus.background')};
color: ${dt('listbox.option.focus.color')};
}
.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {
background: ${dt('listbox.option.focus.background')};
color: ${dt('listbox.option.focus.color')};
}
.p-listbox-option-blank-icon {
flex-shrink: 0;
}
.p-listbox-option-check-icon {
position: relative;
flex-shrink: 0;
margin-inline-start: ${dt('listbox.checkmark.gutter.start')};
margin-inline-end: ${dt('listbox.checkmark.gutter.end')};
color: ${dt('listbox.checkmark.color')};
}
.p-listbox-option-group {
margin: 0;
padding: ${dt('listbox.option.group.padding')};
color: ${dt('listbox.option.group.color')};
background: ${dt('listbox.option.group.background')};
font-weight: ${dt('listbox.option.group.font.weight')};
}
.p-listbox-empty-message {
padding: ${dt('listbox.empty.message.padding')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-listbox p-component',

338
packages/primevue/src/megamenu/style/MegaMenuStyle.js
View File

@ -1,342 +1,6 @@
import { theme } from '@primeuix/styles/megamenu';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-megamenu {
position: relative;
display: flex;
align-items: center;
background: ${dt('megamenu.background')};
border: 1px solid ${dt('megamenu.border.color')};
border-radius: ${dt('megamenu.border.radius')};
color: ${dt('megamenu.color')};
gap: ${dt('megamenu.gap')};
}
.p-megamenu-start,
.p-megamenu-end {
display: flex;
align-items: center;
}
.p-megamenu-root-list {
margin: 0;
padding: 0;
list-style: none;
outline: 0 none;
align-items: center;
display: flex;
flex-wrap: wrap;
gap: ${dt('megamenu.gap')};
}
.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content {
border-radius: ${dt('megamenu.base.item.border.radius')};
}
.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {
padding: ${dt('megamenu.base.item.padding')};
}
.p-megamenu-item-content {
transition: background ${dt('megamenu.transition.duration')}, color ${dt('megamenu.transition.duration')};
border-radius: ${dt('megamenu.item.border.radius')};
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: ${dt('megamenu.item.padding')};
gap: ${dt('megamenu.item.gap')};
user-select: none;
outline: 0 none;
}
.p-megamenu-item-label {
line-height: 1;
}
.p-megamenu-item-icon {
color: ${dt('megamenu.item.icon.color')};
}
.p-megamenu-submenu-icon {
color: ${dt('megamenu.submenu.icon.color')};
font-size: ${dt('megamenu.submenu.icon.size')};
width: ${dt('megamenu.submenu.icon.size')};
height: ${dt('megamenu.submenu.icon.size')};
}
.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 {
color: ${dt('megamenu.item.icon.focus.color')};
}
.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {
color: ${dt('megamenu.submenu.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 {
color: ${dt('megamenu.item.icon.focus.color')};
}
.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {
color: ${dt('megamenu.submenu.icon.focus.color')};
}
.p-megamenu-item-active > .p-megamenu-item-content {
color: ${dt('megamenu.item.active.color')};
background: ${dt('megamenu.item.active.background')};
}
.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {
color: ${dt('megamenu.item.icon.active.color')};
}
.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
color: ${dt('megamenu.submenu.icon.active.color')};
}
.p-megamenu-overlay {
display: none;
position: absolute;
width: auto;
z-index: 1;
left: 0;
min-width: 100%;
padding: ${dt('megamenu.overlay.padding')};
background: ${dt('megamenu.overlay.background')};
color: ${dt('megamenu.overlay.color')};
border: 1px solid ${dt('megamenu.overlay.border.color')};
border-radius: ${dt('megamenu.overlay.border.radius')};
box-shadow: ${dt('megamenu.overlay.shadow')};
}
.p-megamenu-overlay:dir(rtl) {
left: auto;
right: 0;
}
.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
display: block;
}
.p-megamenu-submenu {
margin: 0;
list-style: none;
padding: ${dt('megamenu.submenu.padding')};
min-width: 12.5rem;
display: flex;
flex-direction: column;
gap: ${dt('megamenu.submenu.gap')}
}
.p-megamenu-submenu-label {
padding: ${dt('megamenu.submenu.label.padding')};
color: ${dt('megamenu.submenu.label.color')};
font-weight: ${dt('megamenu.submenu.label.font.weight')};
background: ${dt('megamenu.submenu.label.background')};
}
.p-megamenu-separator {
border-block-start: 1px solid ${dt('megamenu.separator.border.color')};
}
.p-megamenu-horizontal {
align-items: center;
padding: ${dt('megamenu.horizontal.orientation.padding')};
}
.p-megamenu-horizontal .p-megamenu-root-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: ${dt('megamenu.horizontal.orientation.gap')};
}
.p-megamenu-horizontal .p-megamenu-end {
margin-left: auto;
align-self: center;
}
.p-megamenu-horizontal .p-megamenu-end:dir(rtl) {
margin-left: 0;
margin-right: auto;
}
.p-megamenu-vertical {
display: inline-flex;
min-width: 12.5rem;
flex-direction: column;
align-items: stretch;
padding: ${dt('megamenu.vertical.orientation.padding')};
}
.p-megamenu-vertical .p-megamenu-root-list {
align-items: stretch;
flex-direction: column;
gap: ${dt('megamenu.vertical.orientation.gap')};
}
.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
left: 100%;
top: 0;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay:dir(rtl) {
left: auto;
right: 100%;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
margin-left: auto;
}
.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon:dir(rtl) {
margin-left: 0;
margin-right: auto;
transform: rotate(180deg);
}
.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: ${dt('megamenu.overlay.gap')};
}
.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: ${dt('megamenu.mobile.button.size')};
height: ${dt('megamenu.mobile.button.size')};
position: relative;
color: ${dt('megamenu.mobile.button.color')};
border: 0 none;
background: transparent;
border-radius: ${dt('megamenu.mobile.button.border.radius')};
transition: background ${dt('megamenu.transition.duration')}, color ${dt('megamenu.transition.duration')}, outline-color ${dt('megamenu.transition.duration')}, box-shadow ${dt('megamenu.transition.duration')};
outline-color: transparent;
}
.p-megamenu-button:hover {
color: ${dt('megamenu.mobile.button.hover.color')};
background: ${dt('megamenu.mobile.button.hover.background')};
}
.p-megamenu-button:focus-visible {
box-shadow: ${dt('megamenu.mobile.button.focus.ring.shadow')};
outline: ${dt('megamenu.mobile.button.focus.ring.width')} ${dt('megamenu.mobile.button.focus.ring.style')} ${dt('megamenu.mobile.button.focus.ring.color')};
outline-offset: ${dt('megamenu.mobile.button.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: ${dt('megamenu.submenu.padding')};
gap: ${dt('megamenu.submenu.gap')};
background: ${dt('megamenu.overlay.background')};
border: 1px solid ${dt('megamenu.overlay.border.color')};
box-shadow: ${dt('megamenu.overlay.shadow')};
}
.p-megamenu-mobile .p-megamenu-root-list:dir(rtl) {
left: auto;
right: 0;
}
.p-megamenu-mobile-active .p-megamenu-root-list {
display: block;
}
.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {
width: 100%;
position: static;
}
.p-megamenu-mobile .p-megamenu-overlay {
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 > .p-megamenu-item-content .p-megamenu-submenu-icon:dir(rtl) {
margin-left: 0;
margin-right: auto;
}
.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
transform: rotate(-180deg);
}
`;
const inlineStyles = {
rootList: ({ props }) => ({ 'max-height': props.scrollHeight, overflow: 'auto' })
};

82
packages/primevue/src/menu/style/MenuStyle.js
View File

@ -1,86 +1,6 @@
import { theme } from '@primeuix/styles/menu';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-menu {
background: ${dt('menu.background')};
color: ${dt('menu.color')};
border: 1px solid ${dt('menu.border.color')};
border-radius: ${dt('menu.border.radius')};
min-width: 12.5rem;
}
.p-menu-list {
margin: 0;
padding: ${dt('menu.list.padding')};
outline: 0 none;
list-style: none;
display: flex;
flex-direction: column;
gap: ${dt('menu.list.gap')};
}
.p-menu-item-content {
transition: background ${dt('menu.transition.duration')}, color ${dt('menu.transition.duration')};
border-radius: ${dt('menu.item.border.radius')};
color: ${dt('menu.item.color')};
}
.p-menu-item-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: ${dt('menu.item.padding')};
gap: ${dt('menu.item.gap')};
user-select: none;
outline: 0 none;
}
.p-menu-item-label {
line-height: 1;
}
.p-menu-item-icon {
color: ${dt('menu.item.icon.color')};
}
.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: ${dt('menu.shadow')};
}
.p-menu-submenu-label {
background: ${dt('menu.submenu.label.background')};
padding: ${dt('menu.submenu.label.padding')};
color: ${dt('menu.submenu.label.color')};
font-weight: ${dt('menu.submenu.label.font.weight')};
}
.p-menu-separator {
border-block-start: 1px solid ${dt('menu.separator.border.color')};
}
`;
const classes = {
root: ({ props }) => [
'p-menu p-component',

268
packages/primevue/src/menubar/style/MenubarStyle.js
View File

@ -1,272 +1,6 @@
import { theme } from '@primeuix/styles/menubar';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-menubar {
display: flex;
align-items: center;
background: ${dt('menubar.background')};
border: 1px solid ${dt('menubar.border.color')};
border-radius: ${dt('menubar.border.radius')};
color: ${dt('menubar.color')};
padding: ${dt('menubar.padding')};
gap: ${dt('menubar.gap')};
}
.p-menubar-start,
.p-megamenu-end {
display: flex;
align-items: center;
}
.p-menubar-root-list,
.p-menubar-submenu {
display: flex;
margin: 0;
padding: 0;
list-style: none;
outline: 0 none;
}
.p-menubar-root-list {
align-items: center;
flex-wrap: wrap;
gap: ${dt('menubar.gap')};
}
.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
border-radius: ${dt('menubar.base.item.border.radius')};
}
.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
padding: ${dt('menubar.base.item.padding')};
}
.p-menubar-item-content {
transition: background ${dt('menubar.transition.duration')}, color ${dt('menubar.transition.duration')};
border-radius: ${dt('menubar.item.border.radius')};
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: ${dt('menubar.item.padding')};
gap: ${dt('menubar.item.gap')};
user-select: none;
outline: 0 none;
}
.p-menubar-item-label {
line-height: 1;
}
.p-menubar-item-icon {
color: ${dt('menubar.item.icon.color')};
}
.p-menubar-submenu-icon {
color: ${dt('menubar.submenu.icon.color')};
margin-left: auto;
font-size: ${dt('menubar.submenu.icon.size')};
width: ${dt('menubar.submenu.icon.size')};
height: ${dt('menubar.submenu.icon.size')};
}
.p-menubar-submenu .p-menubar-submenu-icon:dir(rtl) {
margin-left: 0;
margin-right: auto;
}
.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 {
color: ${dt('menubar.item.icon.focus.color')};
}
.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {
color: ${dt('menubar.submenu.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 {
color: ${dt('menubar.item.icon.focus.color')};
}
.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {
color: ${dt('menubar.submenu.icon.focus.color')};
}
.p-menubar-item-active > .p-menubar-item-content {
color: ${dt('menubar.item.active.color')};
background: ${dt('menubar.item.active.background')};
}
.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon {
color: ${dt('menubar.item.icon.active.color')};
}
.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
color: ${dt('menubar.submenu.icon.active.color')};
}
.p-menubar-submenu {
display: none;
position: absolute;
min-width: 12.5rem;
z-index: 1;
background: ${dt('menubar.submenu.background')};
border: 1px solid ${dt('menubar.submenu.border.color')};
border-radius: ${dt('menubar.submenu.border.radius')};
box-shadow: ${dt('menubar.submenu.shadow')};
color: ${dt('menubar.submenu.color')};
flex-direction: column;
padding: ${dt('menubar.submenu.padding')};
gap: ${dt('menubar.submenu.gap')};
}
.p-menubar-submenu .p-menubar-separator {
border-block-start: 1px solid ${dt('menubar.separator.border.color')};
}
.p-menubar-submenu .p-menubar-item {
position: relative;
}
.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-end:dir(rtl) {
margin-left: 0;
margin-right: auto;
}
.p-menubar-button {
display: none;
justify-content: center;
align-items: center;
cursor: pointer;
width: ${dt('menubar.mobile.button.size')};
height: ${dt('menubar.mobile.button.size')};
position: relative;
color: ${dt('menubar.mobile.button.color')};
border: 0 none;
background: transparent;
border-radius: ${dt('menubar.mobile.button.border.radius')};
transition: background ${dt('menubar.transition.duration')}, color ${dt('menubar.transition.duration')}, outline-color ${dt('menubar.transition.duration')};
outline-color: transparent;
}
.p-menubar-button:hover {
color: ${dt('menubar.mobile.button.hover.color')};
background: ${dt('menubar.mobile.button.hover.background')};
}
.p-menubar-button:focus-visible {
box-shadow: ${dt('menubar.mobile.button.focus.ring.shadow')};
outline: ${dt('menubar.mobile.button.focus.ring.width')} ${dt('menubar.mobile.button.focus.ring.style')} ${dt('menubar.mobile.button.focus.ring.color')};
outline-offset: ${dt('menubar.mobile.button.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%;
flex-direction: column;
top: 100%;
left: 0;
z-index: 1;
padding: ${dt('menubar.submenu.padding')};
background: ${dt('menubar.submenu.background')};
border: 1px solid ${dt('menubar.submenu.border.color')};
box-shadow: ${dt('menubar.submenu.shadow')};
border-radius: ${dt('menubar.submenu.border.radius')};
gap: ${dt('menubar.submenu.gap')};
}
.p-menubar-mobile .p-menubar-root-list:dir(rtl) {
left: auto;
right: 0;
}
.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
padding: ${dt('menubar.item.padding')};
}
.p-menubar-mobile-active .p-menubar-root-list {
display: flex;
}
.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-block-start: 1px solid ${dt('menubar.separator.border.color')};
}
.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 > .p-menubar-item-content .p-menubar-submenu-icon:dir(rtl),
.p-menubar-mobile .p-menubar-submenu-icon:dir(rtl) {
margin-left: 0;
margin-right: auto;
}
.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-inline-start: ${dt('menubar.submenu.mobile.indent')};
padding-inline-end: 0;
}
`;
const inlineStyles = {
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'flex' : 'none' })
};

302
packages/primevue/src/message/style/MessageStyle.js
View File

@ -1,306 +1,6 @@
import { theme } from '@primeuix/styles/message';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-message {
border-radius: ${dt('message.border.radius')};
outline-width: ${dt('message.border.width')};
outline-style: solid;
}
.p-message-content {
display: flex;
align-items: center;
padding: ${dt('message.content.padding')};
gap: ${dt('message.content.gap')};
height: 100%;
}
.p-message-icon {
flex-shrink: 0;
}
.p-message-close-button {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-inline-start: auto;
overflow: hidden;
position: relative;
width: ${dt('message.close.button.width')};
height: ${dt('message.close.button.height')};
border-radius: ${dt('message.close.button.border.radius')};
background: transparent;
transition: background ${dt('message.transition.duration')}, color ${dt('message.transition.duration')}, outline-color ${dt('message.transition.duration')}, box-shadow ${dt('message.transition.duration')}, opacity 0.3s;
outline-color: transparent;
color: inherit;
padding: 0;
border: none;
cursor: pointer;
user-select: none;
}
.p-message-close-icon {
font-size: ${dt('message.close.icon.size')};
width: ${dt('message.close.icon.size')};
height: ${dt('message.close.icon.size')};
}
.p-message-close-button:focus-visible {
outline-width: ${dt('message.close.button.focus.ring.width')};
outline-style: ${dt('message.close.button.focus.ring.style')};
outline-offset: ${dt('message.close.button.focus.ring.offset')};
}
.p-message-info {
background: ${dt('message.info.background')};
outline-color: ${dt('message.info.border.color')};
color: ${dt('message.info.color')};
box-shadow: ${dt('message.info.shadow')};
}
.p-message-info .p-message-close-button:focus-visible {
outline-color: ${dt('message.info.close.button.focus.ring.color')};
box-shadow: ${dt('message.info.close.button.focus.ring.shadow')};
}
.p-message-info .p-message-close-button:hover {
background: ${dt('message.info.close.button.hover.background')};
}
.p-message-info.p-message-outlined {
color: ${dt('message.info.outlined.color')};
outline-color: ${dt('message.info.outlined.border.color')};
}
.p-message-info.p-message-simple {
color: ${dt('message.info.simple.color')};
}
.p-message-success {
background: ${dt('message.success.background')};
outline-color: ${dt('message.success.border.color')};
color: ${dt('message.success.color')};
box-shadow: ${dt('message.success.shadow')};
}
.p-message-success .p-message-close-button:focus-visible {
outline-color: ${dt('message.success.close.button.focus.ring.color')};
box-shadow: ${dt('message.success.close.button.focus.ring.shadow')};
}
.p-message-success .p-message-close-button:hover {
background: ${dt('message.success.close.button.hover.background')};
}
.p-message-success.p-message-outlined {
color: ${dt('message.success.outlined.color')};
outline-color: ${dt('message.success.outlined.border.color')};
}
.p-message-success.p-message-simple {
color: ${dt('message.success.simple.color')};
}
.p-message-warn {
background: ${dt('message.warn.background')};
outline-color: ${dt('message.warn.border.color')};
color: ${dt('message.warn.color')};
box-shadow: ${dt('message.warn.shadow')};
}
.p-message-warn .p-message-close-button:focus-visible {
outline-color: ${dt('message.warn.close.button.focus.ring.color')};
box-shadow: ${dt('message.warn.close.button.focus.ring.shadow')};
}
.p-message-warn .p-message-close-button:hover {
background: ${dt('message.warn.close.button.hover.background')};
}
.p-message-warn.p-message-outlined {
color: ${dt('message.warn.outlined.color')};
outline-color: ${dt('message.warn.outlined.border.color')};
}
.p-message-warn.p-message-simple {
color: ${dt('message.warn.simple.color')};
}
.p-message-error {
background: ${dt('message.error.background')};
outline-color: ${dt('message.error.border.color')};
color: ${dt('message.error.color')};
box-shadow: ${dt('message.error.shadow')};
}
.p-message-error .p-message-close-button:focus-visible {
outline-color: ${dt('message.error.close.button.focus.ring.color')};
box-shadow: ${dt('message.error.close.button.focus.ring.shadow')};
}
.p-message-error .p-message-close-button:hover {
background: ${dt('message.error.close.button.hover.background')};
}
.p-message-error.p-message-outlined {
color: ${dt('message.error.outlined.color')};
outline-color: ${dt('message.error.outlined.border.color')};
}
.p-message-error.p-message-simple {
color: ${dt('message.error.simple.color')};
}
.p-message-secondary {
background: ${dt('message.secondary.background')};
outline-color: ${dt('message.secondary.border.color')};
color: ${dt('message.secondary.color')};
box-shadow: ${dt('message.secondary.shadow')};
}
.p-message-secondary .p-message-close-button:focus-visible {
outline-color: ${dt('message.secondary.close.button.focus.ring.color')};
box-shadow: ${dt('message.secondary.close.button.focus.ring.shadow')};
}
.p-message-secondary .p-message-close-button:hover {
background: ${dt('message.secondary.close.button.hover.background')};
}
.p-message-secondary.p-message-outlined {
color: ${dt('message.secondary.outlined.color')};
outline-color: ${dt('message.secondary.outlined.border.color')};
}
.p-message-secondary.p-message-simple {
color: ${dt('message.secondary.simple.color')};
}
.p-message-contrast {
background: ${dt('message.contrast.background')};
outline-color: ${dt('message.contrast.border.color')};
color: ${dt('message.contrast.color')};
box-shadow: ${dt('message.contrast.shadow')};
}
.p-message-contrast .p-message-close-button:focus-visible {
outline-color: ${dt('message.contrast.close.button.focus.ring.color')};
box-shadow: ${dt('message.contrast.close.button.focus.ring.shadow')};
}
.p-message-contrast .p-message-close-button:hover {
background: ${dt('message.contrast.close.button.hover.background')};
}
.p-message-contrast.p-message-outlined {
color: ${dt('message.contrast.outlined.color')};
outline-color: ${dt('message.contrast.outlined.border.color')};
}
.p-message-contrast.p-message-simple {
color: ${dt('message.contrast.simple.color')};
}
.p-message-text {
font-size: ${dt('message.text.font.size')};
font-weight: ${dt('message.text.font.weight')};
}
.p-message-icon {
font-size: ${dt('message.icon.size')};
width: ${dt('message.icon.size')};
height: ${dt('message.icon.size')};
}
.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.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.3s;
}
.p-message-leave-active .p-message-close-button {
opacity: 0;
}
.p-message-sm .p-message-content {
padding: ${dt('message.content.sm.padding')};
}
.p-message-sm .p-message-text {
font-size: ${dt('message.text.sm.font.size')};
}
.p-message-sm .p-message-icon {
font-size: ${dt('message.icon.sm.size')};
width: ${dt('message.icon.sm.size')};
height: ${dt('message.icon.sm.size')};
}
.p-message-sm .p-message-close-icon {
font-size: ${dt('message.close.icon.sm.size')};
width: ${dt('message.close.icon.sm.size')};
height: ${dt('message.close.icon.sm.size')};
}
.p-message-lg .p-message-content {
padding: ${dt('message.content.lg.padding')};
}
.p-message-lg .p-message-text {
font-size: ${dt('message.text.lg.font.size')};
}
.p-message-lg .p-message-icon {
font-size: ${dt('message.icon.lg.size')};
width: ${dt('message.icon.lg.size')};
height: ${dt('message.icon.lg.size')};
}
.p-message-lg .p-message-close-icon {
font-size: ${dt('message.close.icon.lg.size')};
width: ${dt('message.close.icon.lg.size')};
height: ${dt('message.close.icon.lg.size')};
}
.p-message-outlined {
background: transparent;
outline-width: ${dt('message.outlined.border.width')};
}
.p-message-simple {
background: transparent;
outline-color: transparent;
box-shadow: none;
}
.p-message-simple .p-message-content {
padding: ${dt('message.simple.content.padding')};
}
.p-message-outlined .p-message-close-button:hover,
.p-message-simple .p-message-close-button:hover {
background: transparent;
}
`;
const classes = {
root: ({ props }) => [
'p-message p-component p-message-' + props.severity,

92
packages/primevue/src/metergroup/style/MeterGroupStyle.js
View File

@ -1,96 +1,6 @@
import { theme } from '@primeuix/styles/metergroup';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-metergroup {
display: flex;
gap: ${dt('metergroup.gap')};
}
.p-metergroup-meters {
display: flex;
background: ${dt('metergroup.meters.background')};
border-radius: ${dt('metergroup.border.radius')};
}
.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: ${dt('metergroup.label.gap')};
}
.p-metergroup-label-marker {
display: inline-flex;
width: ${dt('metergroup.label.marker.size')};
height: ${dt('metergroup.label.marker.size')};
border-radius: 100%;
}
.p-metergroup-label-icon {
font-size: ${dt('metergroup.label.icon.size')};
width: ${dt('metergroup.label.icon.size')};
height: ${dt('metergroup.label.icon.size')};
}
.p-metergroup-horizontal {
flex-direction: column;
}
.p-metergroup-label-list-horizontal {
gap: ${dt('metergroup.label.list.horizontal.gap')};
}
.p-metergroup-horizontal .p-metergroup-meters {
height: ${dt('metergroup.meters.size')};
}
.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
border-start-start-radius: ${dt('metergroup.border.radius')};
border-end-start-radius: ${dt('metergroup.border.radius')};
}
.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
border-start-end-radius: ${dt('metergroup.border.radius')};
border-end-end-radius: ${dt('metergroup.border.radius')};
}
.p-metergroup-vertical {
flex-direction: row;
}
.p-metergroup-label-list-vertical {
flex-direction: column;
gap: ${dt('metergroup.label.list.vertical.gap')};
}
.p-metergroup-vertical .p-metergroup-meters {
flex-direction: column;
width: ${dt('metergroup.meters.size')};
height: 100%;
}
.p-metergroup-vertical .p-metergroup-label-list {
align-items: flex-start;
}
.p-metergroup-vertical .p-metergroup-meter:first-of-type {
border-start-start-radius: ${dt('metergroup.border.radius')};
border-start-end-radius: ${dt('metergroup.border.radius')};
}
.p-metergroup-vertical .p-metergroup-meter:last-of-type {
border-end-start-radius: ${dt('metergroup.border.radius')};
border-end-end-radius: ${dt('metergroup.border.radius')};
}
`;
const classes = {
root: ({ props }) => [
'p-metergroup p-component',

238
packages/primevue/src/multiselect/style/MultiSelectStyle.js
View File

@ -1,242 +1,6 @@
import { theme } from '@primeuix/styles/multiselect';
import BaseStyle from '@primevue/core/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 ${dt('multiselect.transition.duration')}, color ${dt('multiselect.transition.duration')}, border-color ${dt('multiselect.transition.duration')}, outline-color ${dt('multiselect.transition.duration')}, box-shadow ${dt(
'multiselect.transition.duration'
)};
border-radius: ${dt('multiselect.border.radius')};
outline-color: transparent;
box-shadow: ${dt('multiselect.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')};
box-shadow: ${dt('multiselect.focus.ring.shadow')};
outline: ${dt('multiselect.focus.ring.width')} ${dt('multiselect.focus.ring.style')} ${dt('multiselect.focus.ring.color')};
outline-offset: ${dt('multiselect.focus.ring.offset')};
}
.p-multiselect.p-variant-filled {
background: ${dt('multiselect.filled.background')};
}
.p-multiselect.p-variant-filled:not(.p-disabled):hover {
background: ${dt('multiselect.filled.hover.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.dropdown.color')};
width: ${dt('multiselect.dropdown.width')};
border-start-end-radius: ${dt('multiselect.border.radius')};
border-end-end-radius: ${dt('multiselect.border.radius')};
}
.p-multiselect-clear-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
color: ${dt('multiselect.clear.icon.color')};
inset-inline-end: ${dt('multiselect.dropdown.width')};
}
.p-multiselect-label-container {
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
}
.p-multiselect-label {
display: flex;
align-items: center;
gap: calc(${dt('multiselect.padding.y')} / 2);
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
padding: ${dt('multiselect.padding.y')} ${dt('multiselect.padding.x')};
color: ${dt('multiselect.color')};
}
.p-multiselect-label.p-placeholder {
color: ${dt('multiselect.placeholder.color')};
}
.p-multiselect.p-invalid .p-multiselect-label.p-placeholder {
color: ${dt('multiselect.invalid.placeholder.color')};
}
.p-multiselect.p-disabled .p-multiselect-label {
color: ${dt('multiselect.disabled.color')};
}
.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('multiselect.overlay.border.radius')};
box-shadow: ${dt('multiselect.overlay.shadow')};
}
.p-multiselect-header {
display: flex;
align-items: center;
padding: ${dt('multiselect.list.header.padding')};
}
.p-multiselect-header .p-checkbox {
margin-inline-end: ${dt('multiselect.option.gap')};
}
.p-multiselect-filter-container {
flex: 1 1 auto;
}
.p-multiselect-filter {
width: 100%;
}
.p-multiselect-list-container {
overflow: auto;
}
.p-multiselect-list {
margin: 0;
padding: 0;
list-style-type: none;
padding: ${dt('multiselect.list.padding')};
display: flex;
flex-direction: column;
gap: ${dt('multiselect.list.gap')};
}
.p-multiselect-option {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: ${dt('multiselect.option.gap')};
padding: ${dt('multiselect.option.padding')};
border: 0 none;
color: ${dt('multiselect.option.color')};
background: transparent;
transition: background ${dt('multiselect.transition.duration')}, color ${dt('multiselect.transition.duration')}, border-color ${dt('multiselect.transition.duration')}, box-shadow ${dt('multiselect.transition.duration')}, outline-color ${dt(
'multiselect.transition.duration'
)};
border-radius: ${dt('multiselect.option.border.radius')};
}
.p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled).p-focus {
background: ${dt('multiselect.option.focus.background')};
color: ${dt('multiselect.option.focus.color')};
}
.p-multiselect-option.p-multiselect-option-selected {
background: ${dt('multiselect.option.selected.background')};
color: ${dt('multiselect.option.selected.color')};
}
.p-multiselect-option.p-multiselect-option-selected.p-focus {
background: ${dt('multiselect.option.selected.focus.background')};
color: ${dt('multiselect.option.selected.focus.color')};
}
.p-multiselect-option-group {
cursor: auto;
margin: 0;
padding: ${dt('multiselect.option.group.padding')};
background: ${dt('multiselect.option.group.background')};
color: ${dt('multiselect.option.group.color')};
font-weight: ${dt('multiselect.option.group.font.weight')};
}
.p-multiselect-empty-message {
padding: ${dt('multiselect.empty.message.padding')};
}
.p-multiselect-label .p-chip {
padding-block-start: calc(${dt('multiselect.padding.y')} / 2);
padding-block-end: calc(${dt('multiselect.padding.y')} / 2);
border-radius: ${dt('multiselect.chip.border.radius')};
}
.p-multiselect-label:has(.p-chip) {
padding: calc(${dt('multiselect.padding.y')} / 2) calc(${dt('multiselect.padding.x')} / 2);
}
.p-multiselect-fluid {
display: flex;
width: 100%;
}
.p-multiselect-sm .p-multiselect-label {
font-size: ${dt('multiselect.sm.font.size')};
padding-block: ${dt('multiselect.sm.padding.y')};
padding-inline: ${dt('multiselect.sm.padding.x')};
}
.p-multiselect-sm .p-multiselect-dropdown .p-icon {
font-size: ${dt('multiselect.sm.font.size')};
width: ${dt('multiselect.sm.font.size')};
height: ${dt('multiselect.sm.font.size')};
}
.p-multiselect-lg .p-multiselect-label {
font-size: ${dt('multiselect.lg.font.size')};
padding-block: ${dt('multiselect.lg.padding.y')};
padding-inline: ${dt('multiselect.lg.padding.x')};
}
.p-multiselect-lg .p-multiselect-dropdown .p-icon {
font-size: ${dt('multiselect.lg.font.size')};
width: ${dt('multiselect.lg.font.size')};
height: ${dt('multiselect.lg.font.size')};
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};

15
packages/primevue/src/orderlist/style/OrderListStyle.js
View File

@ -1,19 +1,6 @@
import { theme } from '@primeuix/styles/orderlist';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-orderlist {
display: flex;
gap: ${dt('orderlist.gap')};
}
.p-orderlist-controls {
display: flex;
flex-direction: column;
justify-content: center;
gap: ${dt('orderlist.controls.gap')};
}
`;
const classes = {
root: 'p-orderlist p-component',
controls: 'p-orderlist-controls'

117
packages/primevue/src/organizationchart/style/OrganizationChartStyle.js
View File

@ -1,121 +1,6 @@
import { theme } from '@primeuix/styles/organizationchart';
import BaseStyle from '@primevue/core/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 ${dt('organizationchart.gutter')};
}
.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: ${dt('organizationchart.node.padding')};
border-radius: ${dt('organizationchart.node.border.radius')};
transition: background ${dt('organizationchart.transition.duration')}, border-color ${dt('organizationchart.transition.duration')}, color ${dt('organizationchart.transition.duration')}, box-shadow ${dt('organizationchart.transition.duration')};
}
.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
padding: ${dt('organizationchart.node.toggleable.padding')};
}
.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-organizationchart-node-selected):hover {
background: ${dt('organizationchart.node.hover.background')};
color: ${dt('organizationchart.node.hover.color')};
}
.p-organizationchart-node-selected {
background: ${dt('organizationchart.node.selected.background')};
color: ${dt('organizationchart.node.selected.color')};
}
.p-organizationchart-node-toggle-button {
position: absolute;
inset-block-end: calc(-1 * calc(${dt('organizationchart.node.toggle.button.size')} / 2));
margin-inline-start: calc(-1 * calc(${dt('organizationchart.node.toggle.button.size')} / 2));
z-index: 2;
inset-inline-start: 50%;
user-select: none;
cursor: pointer;
width: ${dt('organizationchart.node.toggle.button.size')};
height: ${dt('organizationchart.node.toggle.button.size')};
text-decoration: none;
background: ${dt('organizationchart.node.toggle.button.background')};
color: ${dt('organizationchart.node.toggle.button.color')};
border-radius: ${dt('organizationchart.node.toggle.button.border.radius')};
border: 1px solid ${dt('organizationchart.node.toggle.button.border.color')};
display: inline-flex;
justify-content: center;
align-items: center;
outline-color: transparent;
transition: background ${dt('organizationchart.transition.duration')}, color ${dt('organizationchart.transition.duration')}, border-color ${dt('organizationchart.transition.duration')}, outline-color ${dt(
'organizationchart.transition.duration'
)}, box-shadow ${dt('organizationchart.transition.duration')};
}
.p-organizationchart-node-toggle-button:hover {
background: ${dt('organizationchart.node.toggle.button.hover.background')};
color: ${dt('organizationchart.node.toggle.button.hover.color')};
}
.p-organizationchart-node-toggle-button:focus-visible {
box-shadow: ${dt('breadcrumb.item.focus.ring.shadow')};
outline: ${dt('breadcrumb.item.focus.ring.width')} ${dt('breadcrumb.item.focus.ring.style')} ${dt('breadcrumb.item.focus.ring.color')};
outline-offset: ${dt('breadcrumb.item.focus.ring.offset')};
}
.p-organizationchart-node-toggle-button-icon {
position: relative;
inset-block-start: 1px;
}
.p-organizationchart-connector-down {
margin: 0 auto;
height: ${dt('organizationchart.connector.height')};
width: 1px;
background: ${dt('organizationchart.connector.color')};
}
.p-organizationchart-connector-right {
border-radius: 0;
}
.p-organizationchart-connector-left {
border-radius: 0;
border-inline-end: 1px solid ${dt('organizationchart.connector.color')};
}
.p-organizationchart-connector-top {
border-block-start: 1px solid ${dt('organizationchart.connector.color')};
}
.p-organizationchart-node-selectable {
cursor: pointer;
}
.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {
border-inline-end: 0 none;
}
.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
border-start-end-radius: ${dt('organizationchart.connector.border.radius')};
}
.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
border-inline-start: 1px solid ${dt('organizationchart.connector.color')};
border-start-start-radius: ${dt('organizationchart.connector.border.radius')};
}
`;
const classes = {
root: 'p-organizationchart p-component',
table: 'p-organizationchart-table',

23
packages/primevue/src/overlaybadge/style/OverlayBadgeStyle.js
View File

@ -1,27 +1,6 @@
import { theme } from '@primeuix/styles/overlaybadge';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-overlaybadge {
position: relative;
}
.p-overlaybadge .p-badge {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
transform: translate(50%, -50%);
transform-origin: 100% 0;
margin: 0;
outline-width: ${dt('overlaybadge.outline.width')};
outline-style: solid;
outline-color: ${dt('overlaybadge.outline.color')};
}
.p-overlaybadge .p-badge:dir(rtl) {
transform: translate(-50%, -50%);
}
`;
const classes = {
root: 'p-overlaybadge'
};

100
packages/primevue/src/paginator/style/PaginatorStyle.js
View File

@ -1,104 +1,6 @@
import { theme } from '@primeuix/styles/paginator';
import BaseStyle from '@primevue/core/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')};
padding: ${dt('paginator.padding')};
border-radius: ${dt('paginator.border.radius')};
gap: ${dt('paginator.gap')};
}
.p-paginator-content {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: ${dt('paginator.gap')};
}
.p-paginator-content-start {
margin-inline-end: auto;
}
.p-paginator-content-end {
margin-inline-start: 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: ${dt('paginator.nav.button.background')};
border: 0 none;
color: ${dt('paginator.nav.button.color')};
min-width: ${dt('paginator.nav.button.width')};
height: ${dt('paginator.nav.button.height')};
transition: background ${dt('paginator.transition.duration')}, color ${dt('paginator.transition.duration')}, outline-color ${dt('paginator.transition.duration')}, box-shadow ${dt('paginator.transition.duration')};
border-radius: ${dt('paginator.nav.button.border.radius')};
padding: 0;
margin: 0;
}
.p-paginator-page:focus-visible,
.p-paginator-next:focus-visible,
.p-paginator-last:focus-visible,
.p-paginator-first:focus-visible,
.p-paginator-prev:focus-visible {
box-shadow: ${dt('paginator.nav.button.focus.ring.shadow')};
outline: ${dt('paginator.nav.button.focus.ring.width')} ${dt('paginator.nav.button.focus.ring.style')} ${dt('paginator.nav.button.focus.ring.color')};
outline-offset: ${dt('paginator.nav.button.focus.ring.offset')};
}
.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):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.nav.button.hover.background')};
color: ${dt('paginator.nav.button.hover.color')};
}
.p-paginator-page.p-paginator-page-selected {
background: ${dt('paginator.nav.button.selected.background')};
color: ${dt('paginator.nav.button.selected.color')};
}
.p-paginator-current {
color: ${dt('paginator.current.page.report.color')};
}
.p-paginator-pages {
display: flex;
align-items: center;
gap: ${dt('paginator.gap')};
}
.p-paginator-jtp-input .p-inputtext {
max-width: ${dt('paginator.jump.to.page.input.max.width')};
}
.p-paginator-first:dir(rtl),
.p-paginator-prev:dir(rtl),
.p-paginator-next:dir(rtl),
.p-paginator-last:dir(rtl) {
transform: rotate(180deg);
}
`;
const classes = {
paginator: ({ instance, key }) => [
'p-paginator p-component',

40
packages/primevue/src/panel/style/PanelStyle.js
View File

@ -1,44 +1,6 @@
import { theme } from '@primeuix/styles/panel';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-panel {
border: 1px solid ${dt('panel.border.color')};
border-radius: ${dt('panel.border.radius')};
background: ${dt('panel.background')};
color: ${dt('panel.color')};
}
.p-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: ${dt('panel.header.padding')};
background: ${dt('panel.header.background')};
color: ${dt('panel.header.color')};
border-style: solid;
border-width: ${dt('panel.header.border.width')};
border-color: ${dt('panel.header.border.color')};
border-radius: ${dt('panel.header.border.radius')};
}
.p-panel-toggleable .p-panel-header {
padding: ${dt('panel.toggleable.header.padding')};
}
.p-panel-title {
line-height: 1;
font-weight: ${dt('panel.title.font.weight')};
}
.p-panel-content {
padding: ${dt('panel.content.padding')};
}
.p-panel-footer {
padding: ${dt('panel.footer.padding')};
}
`;
const classes = {
root: ({ props }) => [
'p-panel p-component',

154
packages/primevue/src/panelmenu/style/PanelMenuStyle.js
View File

@ -1,158 +1,6 @@
import { theme } from '@primeuix/styles/panelmenu';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-panelmenu {
display: flex;
flex-direction: column;
gap: ${dt('panelmenu.gap')};
}
.p-panelmenu-panel {
background: ${dt('panelmenu.panel.background')};
border-width: ${dt('panelmenu.panel.border.width')};
border-style: solid;
border-color: ${dt('panelmenu.panel.border.color')};
color: ${dt('panelmenu.panel.color')};
border-radius: ${dt('panelmenu.panel.border.radius')};
padding: ${dt('panelmenu.panel.padding')};
}
.p-panelmenu-panel:first-child {
border-width: ${dt('panelmenu.panel.first.border.width')};
border-start-start-radius: ${dt('panelmenu.panel.first.top.border.radius')};
border-start-end-radius: ${dt('panelmenu.panel.first.top.border.radius')};
}
.p-panelmenu-panel:last-child {
border-width: ${dt('panelmenu.panel.last.border.width')};
border-end-start-radius: ${dt('panelmenu.panel.last.bottom.border.radius')};
border-end-end-radius: ${dt('panelmenu.panel.last.bottom.border.radius')};
}
.p-panelmenu-header {
outline: 0 none;
}
.p-panelmenu-header-content {
border-radius: ${dt('panelmenu.item.border.radius')};
transition: background ${dt('panelmenu.transition.duration')}, color ${dt('panelmenu.transition.duration')}, outline-color ${dt('panelmenu.transition.duration')}, box-shadow ${dt('panelmenu.transition.duration')};
outline-color: transparent;
color: ${dt('panelmenu.item.color')};
}
.p-panelmenu-header-link {
display: flex;
gap: ${dt('panelmenu.item.gap')};
padding: ${dt('panelmenu.item.padding')};
align-items: center;
user-select: none;
cursor: pointer;
position: relative;
text-decoration: none;
color: inherit;
}
.p-panelmenu-header-icon,
.p-panelmenu-item-icon {
color: ${dt('panelmenu.item.icon.color')};
}
.p-panelmenu-submenu-icon {
color: ${dt('panelmenu.submenu.icon.color')};
}
.p-panelmenu-submenu-icon:dir(rtl) {
transform: rotate(180deg);
}
.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-header-icon {
color: ${dt('panelmenu.item.icon.focus.color')};
}
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon {
color: ${dt('panelmenu.submenu.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-header-icon {
color: ${dt('panelmenu.item.icon.focus.color')};
}
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon {
color: ${dt('panelmenu.submenu.icon.focus.color')};
}
.p-panelmenu-submenu {
margin: 0;
padding: 0 0 0 ${dt('panelmenu.submenu.indent')};
outline: 0;
list-style: none;
}
.p-panelmenu-submenu:dir(rtl) {
padding: 0 ${dt('panelmenu.submenu.indent')} 0 0;
}
.p-panelmenu-item-link {
display: flex;
gap: ${dt('panelmenu.item.gap')};
padding: ${dt('panelmenu.item.padding')};
align-items: center;
user-select: none;
cursor: pointer;
text-decoration: none;
color: inherit;
position: relative;
overflow: hidden;
}
.p-panelmenu-item-label {
line-height: 1;
}
.p-panelmenu-item-content {
border-radius: ${dt('panelmenu.item.border.radius')};
transition: background ${dt('panelmenu.transition.duration')}, color ${dt('panelmenu.transition.duration')}, outline-color ${dt('panelmenu.transition.duration')}, box-shadow ${dt('panelmenu.transition.duration')};
color: ${dt('panelmenu.item.color')};
outline-color: transparent;
}
.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-content .p-panelmenu-item-icon {
color: ${dt('panelmenu.item.focus.color')};
}
.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon {
color: ${dt('panelmenu.submenu.icon.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 {
color: ${dt('panelmenu.item.icon.focus.color')};
}
.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
color: ${dt('panelmenu.submenu.icon.focus.color')};
}
`;
const classes = {
root: 'p-panelmenu p-component',
panel: 'p-panelmenu-panel',

80
packages/primevue/src/password/style/PasswordStyle.js
View File

@ -1,84 +1,6 @@
import { theme } from '@primeuix/styles/password';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-password {
display: inline-flex;
position: relative;
}
.p-password .p-password-overlay {
min-width: 100%;
}
.p-password-meter {
height: ${dt('password.meter.height')};
background: ${dt('password.meter.background')};
border-radius: ${dt('password.meter.border.radius')};
}
.p-password-meter-label {
height: 100%;
width: 0;
transition: width 1s ease-in-out;
border-radius: ${dt('password.meter.border.radius')};
}
.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-password-fluid {
display: flex;
}
.p-password-fluid .p-password-input {
width: 100%;
}
.p-password-input::-ms-reveal,
.p-password-input::-ms-clear {
display: none;
}
.p-password-overlay {
padding: ${dt('password.overlay.padding')};
background: ${dt('password.overlay.background')};
color: ${dt('password.overlay.color')};
border: 1px solid ${dt('password.overlay.border.color')};
box-shadow: ${dt('password.overlay.shadow')};
border-radius: ${dt('password.overlay.border.radius')};
}
.p-password-content {
display: flex;
flex-direction: column;
gap: ${dt('password.content.gap')};
}
.p-password-toggle-mask-icon {
inset-inline-end: ${dt('form.field.padding.x')};
color: ${dt('password.icon.color')};
position: absolute;
top: 50%;
margin-top: calc(-1 * calc(${dt('icon.size')} / 2));
width: ${dt('icon.size')};
height: ${dt('icon.size')};
cursor: pointer;
}
.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
padding-inline-end: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')});
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};

23
packages/primevue/src/picklist/style/PickListStyle.js
View File

@ -1,27 +1,6 @@
import { theme } from '@primeuix/styles/picklist';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-picklist {
display: flex;
gap: ${dt('picklist.gap')};
}
.p-picklist-controls {
display: flex;
flex-direction: column;
justify-content: center;
gap: ${dt('picklist.controls.gap')};
}
.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',

81
packages/primevue/src/popover/style/PopoverStyle.js
View File

@ -1,85 +1,6 @@
import { theme } from '@primeuix/styles/popover';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-popover {
margin-block-start: ${dt('popover.gutter')};
background: ${dt('popover.background')};
color: ${dt('popover.color')};
border: 1px solid ${dt('popover.border.color')};
border-radius: ${dt('popover.border.radius')};
box-shadow: ${dt('popover.shadow')};
}
.p-popover-content {
padding: ${dt('popover.content.padding')};
}
.p-popover-flipped {
margin-block-start: calc(${dt('popover.gutter')} * -1);
margin-block-end: ${dt('popover.gutter')};
}
.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: calc(${dt('popover.arrow.offset')} + ${dt('popover.arrow.left')});
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.p-popover:after {
border-width: calc(${dt('popover.gutter')} - 2px);
margin-left: calc(-1 * (${dt('popover.gutter')} - 2px));
border-style: solid;
border-color: transparent;
border-bottom-color: ${dt('popover.background')};
}
.p-popover:before {
border-width: ${dt('popover.gutter')};
margin-left: calc(-1 * ${dt('popover.gutter')});
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: 'p-popover p-component',
content: 'p-popover-content'

119
packages/primevue/src/progressbar/style/ProgressBarStyle.js
View File

@ -1,123 +1,6 @@
import { theme } from '@primeuix/styles/progressbar';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-progressbar {
position: relative;
overflow: hidden;
height: ${dt('progressbar.height')};
background: ${dt('progressbar.background')};
border-radius: ${dt('progressbar.border.radius')};
}
.p-progressbar-value {
margin: 0;
background: ${dt('progressbar.value.background')};
}
.p-progressbar-label {
color: ${dt('progressbar.label.color')};
font-size: ${dt('progressbar.label.font.size')};
font-weight: ${dt('progressbar.label.font.weight')};
}
.p-progressbar-determinate .p-progressbar-value {
height: 100%;
width: 0%;
position: absolute;
display: none;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: width 1s ease-in-out;
}
.p-progressbar-determinate .p-progressbar-label {
display: inline-flex;
}
.p-progressbar-indeterminate .p-progressbar-value::before {
content: "";
position: absolute;
background: inherit;
inset-block-start: 0;
inset-inline-start: 0;
inset-block-end: 0;
will-change: inset-inline-start, inset-inline-end;
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.p-progressbar-indeterminate .p-progressbar-value::after {
content: "";
position: absolute;
background: inherit;
inset-block-start: 0;
inset-inline-start: 0;
inset-block-end: 0;
will-change: inset-inline-start, inset-inline-end;
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation-delay: 1.15s;
}
@keyframes p-progressbar-indeterminate-anim {
0% {
inset-inline-start: -35%;
inset-inline-end: 100%;
}
60% {
inset-inline-start: 100%;
inset-inline-end: -90%;
}
100% {
inset-inline-start: 100%;
inset-inline-end: -90%;
}
}
@-webkit-keyframes p-progressbar-indeterminate-anim {
0% {
inset-inline-start: -35%;
inset-inline-end: 100%;
}
60% {
inset-inline-start: 100%;
inset-inline-end: -90%;
}
100% {
inset-inline-start: 100%;
inset-inline-end: -90%;
}
}
@keyframes p-progressbar-indeterminate-anim-short {
0% {
inset-inline-start: -200%;
inset-inline-end: 100%;
}
60% {
inset-inline-start: 107%;
inset-inline-end: -8%;
}
100% {
inset-inline-start: 107%;
inset-inline-end: -8%;
}
}
@-webkit-keyframes p-progressbar-indeterminate-anim-short {
0% {
inset-inline-start: -200%;
inset-inline-end: 100%;
}
60% {
inset-inline-start: 107%;
inset-inline-end: -8%;
}
100% {
inset-inline-start: 107%;
inset-inline-end: -8%;
}
}
`;
const classes = {
root: ({ instance }) => [
'p-progressbar p-component',

74
packages/primevue/src/progressspinner/style/ProgressSpinnerStyle.js
View File

@ -1,78 +1,6 @@
import { theme } from '@primeuix/styles/progressspinner';
import BaseStyle from '@primevue/core/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.colorOne')};
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.colorOne')};
}
40% {
stroke: ${dt('progressspinner.colorTwo')};
}
66% {
stroke: ${dt('progressspinner.colorThree')};
}
80%,
90% {
stroke: ${dt('progressspinner.colorFour')};
}
}
`;
const classes = {
root: 'p-progressspinner',
spin: 'p-progressspinner-spin',

144
packages/primevue/src/radiobutton/style/RadioButtonStyle.js
View File

@ -1,148 +1,6 @@
import { theme } from '@primeuix/styles/radiobutton';
import BaseStyle from '@primevue/core/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;
inset-inline-start: 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 ${dt('radiobutton.transition.duration')}, color ${dt('radiobutton.transition.duration')}, border-color ${dt('radiobutton.transition.duration')}, box-shadow ${dt('radiobutton.transition.duration')}, outline-color ${dt(
'radiobutton.transition.duration'
)};
outline-color: transparent;
box-shadow: ${dt('radiobutton.shadow')};
}
.p-radiobutton-icon {
transition-duration: ${dt('radiobutton.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-checked .p-radiobutton-box {
border-color: ${dt('radiobutton.checked.border.color')};
background: ${dt('radiobutton.checked.background')};
}
.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-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .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 {
border-color: ${dt('radiobutton.focus.border.color')};
box-shadow: ${dt('radiobutton.focus.ring.shadow')};
outline: ${dt('radiobutton.focus.ring.width')} ${dt('radiobutton.focus.ring.style')} ${dt('radiobutton.focus.ring.color')};
outline-offset: ${dt('radiobutton.focus.ring.offset')};
}
.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
border-color: ${dt('radiobutton.checked.focus.border.color')};
}
.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')};
border-color: ${dt('radiobutton.checked.disabled.border.color')};
}
.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
background: ${dt('radiobutton.icon.disabled.color')};
}
.p-radiobutton-sm,
.p-radiobutton-sm .p-radiobutton-box {
width: ${dt('radiobutton.sm.width')};
height: ${dt('radiobutton.sm.height')};
}
.p-radiobutton-sm .p-radiobutton-icon {
font-size: ${dt('radiobutton.icon.sm.size')};
width: ${dt('radiobutton.icon.sm.size')};
height: ${dt('radiobutton.icon.sm.size')};
}
.p-radiobutton-lg,
.p-radiobutton-lg .p-radiobutton-box {
width: ${dt('radiobutton.lg.width')};
height: ${dt('radiobutton.lg.height')};
}
.p-radiobutton-lg .p-radiobutton-icon {
font-size: ${dt('radiobutton.icon.lg.size')};
width: ${dt('radiobutton.icon.lg.size')};
height: ${dt('radiobutton.icon.lg.size')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-radiobutton p-component',

7
packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js
View File

@ -1,11 +1,6 @@
import { theme } from '@primeuix/styles/radiobuttongroup';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-radiobutton-group {
display: inline-flex;
}
`;
const classes = {
root: 'p-radiobutton-group p-component'
};

49
packages/primevue/src/rating/style/RatingStyle.js
View File

@ -1,53 +1,6 @@
import { theme } from '@primeuix/styles/rating';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-rating {
position: relative;
display: flex;
align-items: center;
gap: ${dt('rating.gap')};
}
.p-rating-option {
display: inline-flex;
align-items: center;
cursor: pointer;
outline-color: transparent;
border-radius: 50%;
transition: background ${dt('rating.transition.duration')}, color ${dt('rating.transition.duration')}, border-color ${dt('rating.transition.duration')}, outline-color ${dt('rating.transition.duration')}, box-shadow ${dt(
'rating.transition.duration'
)};
}
.p-rating-option.p-focus-visible {
box-shadow: ${dt('rating.focus.ring.shadow')};
outline: ${dt('rating.focus.ring.width')} ${dt('rating.focus.ring.style')} ${dt('rating.focus.ring.color')};
outline-offset: ${dt('rating.focus.ring.offset')};
}
.p-rating-icon {
color: ${dt('rating.icon.color')};
transition: background ${dt('rating.transition.duration')}, color ${dt('rating.transition.duration')}, border-color ${dt('rating.transition.duration')}, outline-color ${dt('rating.transition.duration')}, box-shadow ${dt(
'rating.transition.duration'
)};
font-size: ${dt('rating.icon.size')};
width: ${dt('rating.icon.size')};
height: ${dt('rating.icon.size')};
}
.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')};
}
.p-rating-icon.p-invalid { /* @todo */
stroke: ${dt('rating.invalid.icon.color')};
}
`;
const classes = {
root: ({ props }) => [
'p-rating',

23
packages/primevue/src/ripple/style/RippleStyle.js
View File

@ -1,27 +1,6 @@
import { theme } from '@primeuix/styles/ripple';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-ink {
display: block;
position: absolute;
background: ${dt('ripple.background')};
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
`;
const classes = {
root: 'p-ink'
};

68
packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js
View File

@ -1,72 +1,6 @@
import { theme } from '@primeuix/styles/scrollpanel';
import BaseStyle from '@primevue/core/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% + calc(2 * ${dt('scrollpanel.bar.size')}));
width: calc(100% + calc(2 * ${dt('scrollpanel.bar.size')}));
padding-inline: 0 calc(2 * ${dt('scrollpanel.bar.size')});
padding-block: 0 calc(2 * ${dt('scrollpanel.bar.size')});
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: ${dt('scrollpanel.bar.border.radius')};
z-index: 2;
cursor: pointer;
opacity: 0;
outline-color: transparent;
background: ${dt('scrollpanel.bar.background')};
border: 0 none;
transition: outline-color ${dt('scrollpanel.transition.duration')}, opacity ${dt('scrollpanel.transition.duration')};
}
.p-scrollpanel-bar:focus-visible {
box-shadow: ${dt('scrollpanel.bar.focus.ring.shadow')};
outline: ${dt('scrollpanel.barfocus.ring.width')} ${dt('scrollpanel.bar.focus.ring.style')} ${dt('scrollpanel.bar.focus.ring.color')};
outline-offset: ${dt('scrollpanel.barfocus.ring.offset')};
}
.p-scrollpanel-bar-y {
width: ${dt('scrollpanel.bar.size')};
inset-block-start: 0;
}
.p-scrollpanel-bar-x {
height: ${dt('scrollpanel.bar.size')};
inset-block-end: 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',

31
packages/primevue/src/scrolltop/style/ScrollTopStyle.js
View File

@ -1,35 +1,6 @@
import { theme } from '@primeuix/styles/scrolltop';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-scrolltop.p-button {
position: fixed !important;
inset-block-end: 20px;
inset-inline-end: 20px;
}
.p-scrolltop-sticky.p-button {
position: sticky !important;
display: flex;
margin-inline-start: 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;
}
`;
const classes = {
root: ({ props }) => ['p-scrolltop', { 'p-scrolltop-sticky': props.target !== 'window' }],
icon: 'p-scrolltop-icon'

232
packages/primevue/src/select/style/SelectStyle.js
View File

@ -1,235 +1,5 @@
import BaseStyle from '@primevue/core/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 ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')},
outline-color ${dt('select.transition.duration')}, box-shadow ${dt('select.transition.duration')};
border-radius: ${dt('select.border.radius')};
outline-color: transparent;
box-shadow: ${dt('select.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')};
box-shadow: ${dt('select.focus.ring.shadow')};
outline: ${dt('select.focus.ring.width')} ${dt('select.focus.ring.style')} ${dt('select.focus.ring.color')};
outline-offset: ${dt('select.focus.ring.offset')};
}
.p-select.p-variant-filled {
background: ${dt('select.filled.background')};
}
.p-select.p-variant-filled:not(.p-disabled):hover {
background: ${dt('select.filled.hover.background')};
}
.p-select.p-variant-filled:not(.p-disabled).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: ${dt('select.clear.icon.color')};
inset-inline-end: ${dt('select.dropdown.width')};
}
.p-select-dropdown {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: transparent;
color: ${dt('select.dropdown.color')};
width: ${dt('select.dropdown.width')};
border-start-end-radius: ${dt('select.border.radius')};
border-end-end-radius: ${dt('select.border.radius')};
}
.p-select-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
padding: ${dt('select.padding.y')} ${dt('select.padding.x')};
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.p-invalid .p-select-label.p-placeholder {
color: ${dt('select.invalid.placeholder.color')};
}
.p-select:has(.p-select-clear-icon) .p-select-label {
padding-inline-end: calc(1rem + ${dt('select.padding.x')});
}
.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('select.overlay.border.radius')};
box-shadow: ${dt('select.overlay.shadow')};
}
.p-select-header {
padding: ${dt('select.list.header.padding')};
}
.p-select-filter {
width: 100%;
}
.p-select-list-container {
overflow: auto;
}
.p-select-option-group {
cursor: auto;
margin: 0;
padding: ${dt('select.option.group.padding')};
background: ${dt('select.option.group.background')};
color: ${dt('select.option.group.color')};
font-weight: ${dt('select.option.group.font.weight')};
}
.p-select-list {
margin: 0;
padding: 0;
list-style-type: none;
padding: ${dt('select.list.padding')};
gap: ${dt('select.list.gap')};
display: flex;
flex-direction: column;
}
.p-select-option {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
padding: ${dt('select.option.padding')};
border: 0 none;
color: ${dt('select.option.color')};
background: transparent;
transition: background ${dt('select.transition.duration')}, color ${dt('select.transition.duration')}, border-color ${dt('select.transition.duration')},
box-shadow ${dt('select.transition.duration')}, outline-color ${dt('select.transition.duration')};
border-radius: ${dt('select.option.border.radius')};
}
.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
background: ${dt('select.option.focus.background')};
color: ${dt('select.option.focus.color')};
}
.p-select-option.p-select-option-selected {
background: ${dt('select.option.selected.background')};
color: ${dt('select.option.selected.color')};
}
.p-select-option.p-select-option-selected.p-focus {
background: ${dt('select.option.selected.focus.background')};
color: ${dt('select.option.selected.focus.color')};
}
.p-select-option-blank-icon {
flex-shrink: 0;
}
.p-select-option-check-icon {
position: relative;
flex-shrink: 0;
margin-inline-start: ${dt('select.checkmark.gutter.start')};
margin-inline-end: ${dt('select.checkmark.gutter.end')};
color: ${dt('select.checkmark.color')};
}
.p-select-empty-message {
padding: ${dt('select.empty.message.padding')};
}
.p-select-fluid {
display: flex;
width: 100%;
}
.p-select-sm .p-select-label {
font-size: ${dt('select.sm.font.size')};
padding-block: ${dt('select.sm.padding.y')};
padding-inline: ${dt('select.sm.padding.x')};
}
.p-select-sm .p-select-dropdown .p-icon {
font-size: ${dt('select.sm.font.size')};
width: ${dt('select.sm.font.size')};
height: ${dt('select.sm.font.size')};
}
.p-select-lg .p-select-label {
font-size: ${dt('select.lg.font.size')};
padding-block: ${dt('select.lg.padding.y')};
padding-inline: ${dt('select.lg.padding.x')};
}
.p-select-lg .p-select-dropdown .p-icon {
font-size: ${dt('select.lg.font.size')};
width: ${dt('select.lg.font.size')};
height: ${dt('select.lg.font.size')};
}
`;
import { theme } from '@primeuix/styles/select';
const classes = {
root: ({ instance, props, state }) => [

37
packages/primevue/src/selectbutton/style/SelectButtonStyle.js
View File

@ -1,41 +1,6 @@
import { theme } from '@primeuix/styles/selectbutton';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-selectbutton {
display: inline-flex;
user-select: none;
vertical-align: bottom;
outline-color: transparent;
border-radius: ${dt('selectbutton.border.radius')};
}
.p-selectbutton .p-togglebutton {
border-radius: 0;
border-width: 1px 1px 1px 0;
}
.p-selectbutton .p-togglebutton:focus-visible {
position: relative;
z-index: 1;
}
.p-selectbutton .p-togglebutton:first-child {
border-inline-start-width: 1px;
border-start-start-radius: ${dt('selectbutton.border.radius')};
border-end-start-radius: ${dt('selectbutton.border.radius')};
}
.p-selectbutton .p-togglebutton:last-child {
border-start-end-radius: ${dt('selectbutton.border.radius')};
border-end-end-radius: ${dt('selectbutton.border.radius')};
}
.p-selectbutton.p-invalid {
outline: 1px solid ${dt('selectbutton.invalid.border.color')};
outline-offset: 0;
}
`;
const classes = {
root: ({ instance }) => [
'p-selectbutton p-component',

52
packages/primevue/src/skeleton/style/SkeletonStyle.js
View File

@ -1,56 +1,6 @@
import { theme } from '@primeuix/styles/skeleton';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-skeleton {
overflow: hidden;
background: ${dt('skeleton.background')};
border-radius: ${dt('skeleton.border.radius')};
}
.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));
}
[dir='rtl'] .p-skeleton::after {
animation-name: p-skeleton-animation-rtl;
}
.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%);
}
}
@keyframes p-skeleton-animation-rtl {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
`;
const inlineStyles = {
root: { position: 'relative' }
};

90
packages/primevue/src/slider/style/SliderStyle.js
View File

@ -1,94 +1,6 @@
import { theme } from '@primeuix/styles/slider';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-slider {
position: relative;
background: ${dt('slider.track.background')};
border-radius: ${dt('slider.track.border.radius')};
}
.p-slider-handle {
cursor: grab;
touch-action: none;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
height: ${dt('slider.handle.height')};
width: ${dt('slider.handle.width')};
background: ${dt('slider.handle.background')};
border-radius: ${dt('slider.handle.border.radius')};
transition: background ${dt('slider.transition.duration')}, color ${dt('slider.transition.duration')}, border-color ${dt('slider.transition.duration')}, box-shadow ${dt('slider.transition.duration')}, outline-color ${dt(
'slider.transition.duration'
)};
outline-color: transparent;
}
.p-slider-handle::before {
content: "";
width: ${dt('slider.handle.content.width')};
height: ${dt('slider.handle.content.height')};
display: block;
background: ${dt('slider.handle.content.background')};
border-radius: ${dt('slider.handle.content.border.radius')};
box-shadow: ${dt('slider.handle.content.shadow')};
transition: background ${dt('slider.transition.duration')};
}
.p-slider:not(.p-disabled) .p-slider-handle:hover {
background: ${dt('slider.handle.hover.background')};
}
.p-slider:not(.p-disabled) .p-slider-handle:hover::before {
background: ${dt('slider.handle.content.hover.background')};
}
.p-slider-handle:focus-visible {
box-shadow: ${dt('slider.handle.focus.ring.shadow')};
outline: ${dt('slider.handle.focus.ring.width')} ${dt('slider.handle.focus.ring.style')} ${dt('slider.handle.focus.ring.color')};
outline-offset: ${dt('slider.handle.focus.ring.offset')};
}
.p-slider-range {
display: block;
background: ${dt('slider.range.background')};
border-radius: ${dt('slider.border.radius')};
}
.p-slider.p-slider-horizontal {
height: ${dt('slider.track.size')};
}
.p-slider-horizontal .p-slider-range {
inset-block-start: 0;
inset-inline-start: 0;
height: 100%;
}
.p-slider-horizontal .p-slider-handle {
inset-block-start: 50%;
margin-block-start: calc(-1 * calc(${dt('slider.handle.height')} / 2));
margin-inline-start: calc(-1 * calc(${dt('slider.handle.width')} / 2));
}
.p-slider-vertical {
min-height: 100px;
width: ${dt('slider.track.size')};
}
.p-slider-vertical .p-slider-handle {
inset-inline-start: 50%;
margin-inline-start: calc(-1 * calc(${dt('slider.handle.width')} / 2));
margin-block-end: calc(-1 * calc(${dt('slider.handle.height')} / 2));
}
.p-slider-vertical .p-slider-range {
inset-block-end: 0;
inset-inline-start: 0;
width: 100%;
}
`;
const inlineStyles = {
handle: { position: 'absolute' },
range: { position: 'absolute' }

77
packages/primevue/src/speeddial/style/SpeedDialStyle.js
View File

@ -1,81 +1,6 @@
import { theme } from '@primeuix/styles/speeddial';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-speeddial {
position: static;
display: flex;
gap: ${dt('speeddial.gap')};
}
.p-speeddial-button {
z-index: 1;
}
.p-speeddial-button.p-speeddial-rotate {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background ${dt('speeddial.transition.duration')}, color ${dt('speeddial.transition.duration')}, border-color ${dt('speeddial.transition.duration')},
box-shadow ${dt('speeddial.transition.duration')}, outline-color ${dt('speeddial.transition.duration')};
will-change: transform;
}
.p-speeddial-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
transition: inset-block-start 0s linear ${dt('speeddial.transition.duration')};
pointer-events: none;
outline: 0 none;
z-index: 2;
gap: ${dt('speeddial.gap')};
}
.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;
inset-inline-start: 0;
inset-block-start: 0;
width: 100%;
height: 100%;
opacity: 0;
background: ${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 }) => ({

52
packages/primevue/src/splitbutton/style/SplitButtonStyle.js
View File

@ -1,56 +1,6 @@
import { theme } from '@primeuix/styles/splitbutton';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-splitbutton {
display: inline-flex;
position: relative;
border-radius: ${dt('splitbutton.border.radius')};
}
.p-splitbutton-button {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-inline-end: 0 none;
}
.p-splitbutton-button:focus-visible,
.p-splitbutton-dropdown:focus-visible {
z-index: 1;
}
.p-splitbutton-button:not(:disabled):hover,
.p-splitbutton-button:not(:disabled):active {
border-inline-end: 0 none;
}
.p-splitbutton-dropdown {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.p-splitbutton .p-menu {
min-width: 100%;
}
.p-splitbutton-fluid {
display: flex;
}
.p-splitbutton-rounded .p-splitbutton-dropdown {
border-start-end-radius: ${dt('splitbutton.rounded.border.radius')};
border-end-end-radius: ${dt('splitbutton.rounded.border.radius')};
}
.p-splitbutton-rounded .p-splitbutton-button {
border-start-start-radius: ${dt('splitbutton.rounded.border.radius')};
border-end-start-radius: ${dt('splitbutton.rounded.border.radius')};
}
.p-splitbutton-raised {
box-shadow: ${dt('splitbutton.raised.shadow')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-splitbutton p-component',

81
packages/primevue/src/splitter/style/SplitterStyle.js
View File

@ -1,85 +1,6 @@
import { theme } from '@primeuix/styles/splitter';
import BaseStyle from '@primevue/core/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('border.radius.md')};
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('splitter.handle.border.radius')};
background: ${dt('splitter.handle.background')};
transition: outline-color ${dt('splitter.transition.duration')}, box-shadow ${dt('splitter.transition.duration')};
outline-color: transparent;
}
.p-splitter-gutter-handle:focus-visible {
box-shadow: ${dt('splitter.handle.focus.ring.shadow')};
outline: ${dt('splitter.handle.focus.ring.width')} ${dt('splitter.handle.focus.ring.style')} ${dt('splitter.handle.focus.ring.color')};
outline-offset: ${dt('splitter.handle.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: ${dt('splitter.handle.size')};
width: 100%;
}
.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
width: ${dt('splitter.handle.size')};
height: 100%;
}
.p-splitter-horizontal > .p-splitter-gutter {
cursor: col-resize;
}
.p-splitter-vertical > .p-splitter-gutter {
cursor: row-resize;
}
.p-splitterpanel {
flex-grow: 1;
overflow: hidden;
}
.p-splitterpanel-nested {
display: flex;
}
.p-splitterpanel .p-splitter {
flex-grow: 1;
border: 0 none;
}
`;
const classes = {
root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout],
gutter: 'p-splitter-gutter',

185
packages/primevue/src/stepper/style/StepperStyle.js
View File

@ -1,189 +1,6 @@
import { theme } from '@primeuix/styles/stepper';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-steplist {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0;
list-style-type: none;
overflow-x: auto;
}
.p-step {
position: relative;
display: flex;
flex: 1 1 auto;
align-items: center;
gap: ${dt('stepper.step.gap')};
padding: ${dt('stepper.step.padding')};
}
.p-step:last-of-type {
flex: initial;
}
.p-step-header {
border: 0 none;
display: inline-flex;
align-items: center;
text-decoration: none;
cursor: pointer;
transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, outline-color ${dt('stepper.transition.duration')}, box-shadow ${dt(
'stepper.transition.duration'
)};
border-radius: ${dt('stepper.step.header.border.radius')};
outline-color: transparent;
background: transparent;
padding: ${dt('stepper.step.header.padding')};
gap: ${dt('stepper.step.header.gap')};
}
.p-step-header:focus-visible {
box-shadow: ${dt('stepper.step.header.focus.ring.shadow')};
outline: ${dt('stepper.step.header.focus.ring.width')} ${dt('stepper.step.header.focus.ring.style')} ${dt('stepper.step.header.focus.ring.color')};
outline-offset: ${dt('stepper.step.header.focus.ring.offset')};
}
.p-stepper.p-stepper-readonly .p-step {
cursor: auto;
}
.p-step-title {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
color: ${dt('stepper.step.title.color')};
font-weight: ${dt('stepper.step.title.font.weight')};
transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, box-shadow ${dt('stepper.transition.duration')}, outline-color ${dt(
'stepper.transition.duration'
)};
}
.p-step-number {
display: flex;
align-items: center;
justify-content: center;
color: ${dt('stepper.step.number.color')};
border: 2px solid ${dt('stepper.step.number.border.color')};
background: ${dt('stepper.step.number.background')};
min-width: ${dt('stepper.step.number.size')};
height: ${dt('stepper.step.number.size')};
line-height: ${dt('stepper.step.number.size')};
font-size: ${dt('stepper.step.number.font.size')};
z-index: 1;
border-radius: ${dt('stepper.step.number.border.radius')};
position: relative;
font-weight: ${dt('stepper.step.number.font.weight')};
}
.p-step-number::after {
content: " ";
position: absolute;
width: 100%;
height: 100%;
border-radius: ${dt('stepper.step.number.border.radius')};
box-shadow: ${dt('stepper.step.number.shadow')};
}
.p-step-active .p-step-header {
cursor: default;
}
.p-step-active .p-step-number {
background: ${dt('stepper.step.number.active.background')};
border-color: ${dt('stepper.step.number.active.border.color')};
color: ${dt('stepper.step.number.active.color')};
}
.p-step-active .p-step-title {
color: ${dt('stepper.step.title.active.color')};
}
.p-step: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-step:has(~ .p-step-active) .p-stepper-separator {
background: ${dt('stepper.separator.active.background')};
}
.p-stepper-separator {
flex: 1 1 0;
background: ${dt('stepper.separator.background')};
width: 100%;
height: ${dt('stepper.separator.size')};
transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, box-shadow ${dt('stepper.transition.duration')}, outline-color ${dt(
'stepper.transition.duration'
)};
}
.p-steppanels {
padding: ${dt('stepper.steppanels.padding')};
}
.p-steppanel {
background: ${dt('stepper.steppanel.background')};
color: ${dt('stepper.steppanel.color')};
}
.p-stepper:has(.p-stepitem) {
display: flex;
flex-direction: column;
}
.p-stepitem {
display: flex;
flex-direction: column;
flex: initial;
}
.p-stepitem.p-stepitem-active {
flex: 1 1 auto;
}
.p-stepitem .p-step {
flex: initial;
}
.p-stepitem .p-steppanel-content {
width: 100%;
padding: ${dt('stepper.steppanel.padding')};
margin-inline-start: 1rem;
}
.p-stepitem .p-steppanel {
display: flex;
flex: 1 1 auto;
}
.p-stepitem .p-stepper-separator {
flex: 0 0 auto;
width: ${dt('stepper.separator.size')};
height: auto;
margin: ${dt('stepper.separator.margin')};
position: relative;
left: calc(-1 * ${dt('stepper.separator.size')});
}
.p-stepitem .p-stepper-separator:dir(rtl) {
left: calc(-9 * ${dt('stepper.separator.size')});
}
.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
background: ${dt('stepper.separator.active.background')};
}
.p-stepitem:last-of-type .p-steppanel {
padding-inline-start: ${dt('stepper.step.number.size')};
}
`;
const classes = {
root: ({ props }) => [
'p-stepper p-component',

117
packages/primevue/src/steps/style/StepsStyle.js
View File

@ -1,121 +1,6 @@
import { theme } from '@primeuix/styles/steps';
import BaseStyle from '@primevue/core/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.separator.background')};
width: 100%;
top: 50%;
left: 0;
display: block;
position: absolute;
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('steps.transition.duration')}, box-shadow ${dt('steps.transition.duration')};
border-radius: ${dt('steps.item.link.border.radius')};
outline-color: transparent;
gap: ${dt('steps.item.link.gap')};
}
.p-steps-item-link:not(.p-disabled):focus-visible {
box-shadow: ${dt('steps.item.link.focus.ring.shadow')};
outline: ${dt('steps.item.link.focus.ring.width')} ${dt('steps.item.link.focus.ring.style')} ${dt('steps.item.link.focus.ring.color')};
outline-offset: ${dt('steps.item.link.focus.ring.offset')};
}
.p-steps-item-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
color: ${dt('steps.item.label.color')};
display: block;
font-weight: ${dt('steps.item.label.font.weight')};
}
.p-steps-item-number {
display: flex;
align-items: center;
justify-content: center;
color: ${dt('steps.item.number.color')};
border: 2px solid ${dt('steps.item.number.border.color')};
background: ${dt('steps.item.number.background')};
min-width: ${dt('steps.item.number.size')};
height: ${dt('steps.item.number.size')};
line-height: ${dt('steps.item.number.size')};
font-size: ${dt('steps.item.number.font.size')};
z-index: 1;
border-radius: ${dt('steps.item.number.border.radius')};
position: relative;
font-weight: ${dt('steps.item.number.font.weight')};
}
.p-steps-item-number::after {
content: " ";
position: absolute;
width: 100%;
height: 100%;
border-radius: ${dt('steps.item.number.border.radius')};
box-shadow: ${dt('steps.item.number.shadow')};
}
.p-steps:not(.p-readonly) .p-steps-item {
cursor: pointer;
}
.p-steps-item-active .p-steps-item-number {
background: ${dt('steps.item.number.active.background')};
border-color: ${dt('steps.item.number.active.border.color')};
color: ${dt('steps.item.number.active.color')};
}
.p-steps-item-active .p-steps-item-label {
color: ${dt('steps.item.label.active.color')};
}
`;
const classes = {
root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],
list: 'p-steps-list',

94
packages/primevue/src/tabmenu/style/TabMenuStyle.js
View File

@ -1,98 +1,6 @@
import { theme } from '@primeuix/styles/tabmenu';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-tabmenu {
overflow-x: auto;
}
.p-tabmenu-tablist {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
background: ${dt('tabmenu.tablist.background')};
border-style: solid;
border-color: ${dt('tabmenu.tablist.border.color')};
border-width: ${dt('tabmenu.tablist.border.width')};
position: relative;
}
.p-tabmenu-item-link {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
text-decoration: none;
position: relative;
overflow: hidden;
background: ${dt('tabmenu.item.background')};
border-style: solid;
border-width: ${dt('tabmenu.item.border.width')};
border-color: ${dt('tabmenu.item.border.color')};
color: ${dt('tabmenu.item.color')};
padding: ${dt('tabmenu.item.padding')};
font-weight: ${dt('tabmenu.item.font.weight')};
transition: background ${dt('tabmenu.transition.duration')}, border-color ${dt('tabmenu.transition.duration')}, color ${dt('tabmenu.transition.duration')}, outline-color ${dt('tabmenu.transition.duration')}, box-shadow ${dt(
'tabmenu.transition.duration'
)};
margin: ${dt('tabmenu.item.margin')};
outline-color: transparent;
gap: ${dt('tabmenu.item.gap')};
}
.p-tabmenu-item-link:focus-visible {
z-index: 1;
box-shadow: ${dt('tabmenu.item.focus.ring.shadow')};
outline: ${dt('tabmenu.item.focus.ring.width')} ${dt('tabmenu.item.focus.ring.style')} ${dt('tabmenu.item.focus.ring.color')};
outline-offset: ${dt('tabmenu.item.focus.ring.offset')};
}
.p-tabmenu-item-icon {
color: ${dt('tabmenu.item.icon.color')};
transition: background ${dt('tabmenu.transition.duration')}, border-color ${dt('tabmenu.transition.duration')}, color ${dt('tabmenu.transition.duration')}, outline-color ${dt('tabmenu.transition.duration')}, box-shadow ${dt(
'tabmenu.transition.duration'
)};
}
.p-tabmenu-item-label {
line-height: 1;
}
.p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-link {
background: ${dt('tabmenu.item.hover.background')};
border-color: ${dt('tabmenu.item.hover.border.color')};
color: ${dt('tabmenu.item.hover.color')};
}
.p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-icon {
color: ${dt('tabmenu.item.icon.hover.color')};
}
.p-tabmenu-item-active .p-tabmenu-item-link {
background: ${dt('tabmenu.item.active.background')};
border-color: ${dt('tabmenu.item.active.border.color')};
color: ${dt('tabmenu.item.active.color')};
}
.p-tabmenu-item-active .p-tabmenu-item-icon {
color: ${dt('tabmenu.item.icon.active.color')};
}
.p-tabmenu-active-bar {
z-index: 1;
display: block;
position: absolute;
bottom: ${dt('tabmenu.active.bar.bottom')};
height: ${dt('tabmenu.active.bar.height')};
background: ${dt('tabmenu.active.bar.background')};
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',

146
packages/primevue/src/tabs/style/TabsStyle.js
View File

@ -1,150 +1,6 @@
import { theme } from '@primeuix/styles/tabs';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-tabs {
display: flex;
flex-direction: column;
}
.p-tablist {
display: flex;
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.tablist.background')};
border-style: solid;
border-color: ${dt('tabs.tablist.border.color')};
border-width: ${dt('tabs.tablist.border.width')};
}
.p-tablist-content {
flex-grow: 1;
}
.p-tablist-nav-button {
all: unset;
position: absolute !important;
flex-shrink: 0;
inset-block-start: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: ${dt('tabs.nav.button.background')};
color: ${dt('tabs.nav.button.color')};
width: ${dt('tabs.nav.button.width')};
transition: color ${dt('tabs.transition.duration')}, outline-color ${dt('tabs.transition.duration')}, box-shadow ${dt('tabs.transition.duration')};
box-shadow: ${dt('tabs.nav.button.shadow')};
outline-color: transparent;
cursor: pointer;
}
.p-tablist-nav-button:focus-visible {
z-index: 1;
box-shadow: ${dt('tabs.nav.button.focus.ring.shadow')};
outline: ${dt('tabs.nav.button.focus.ring.width')} ${dt('tabs.nav.button.focus.ring.style')} ${dt('tabs.nav.button.focus.ring.color')};
outline-offset: ${dt('tabs.nav.button.focus.ring.offset')};
}
.p-tablist-nav-button:hover {
color: ${dt('tabs.nav.button.hover.color')};
}
.p-tablist-prev-button {
inset-inline-start: 0;
}
.p-tablist-next-button {
inset-inline-end: 0;
}
.p-tablist-prev-button:dir(rtl),
.p-tablist-next-button:dir(rtl) {
transform: rotate(180deg);
}
.p-tab {
flex-shrink: 0;
cursor: pointer;
user-select: none;
position: relative;
border-style: solid;
white-space: nowrap;
background: ${dt('tabs.tab.background')};
border-width: ${dt('tabs.tab.border.width')};
border-color: ${dt('tabs.tab.border.color')};
color: ${dt('tabs.tab.color')};
padding: ${dt('tabs.tab.padding')};
font-weight: ${dt('tabs.tab.font.weight')};
transition: background ${dt('tabs.transition.duration')}, border-color ${dt('tabs.transition.duration')}, color ${dt('tabs.transition.duration')}, outline-color ${dt('tabs.transition.duration')}, box-shadow ${dt('tabs.transition.duration')};
margin: ${dt('tabs.tab.margin')};
outline-color: transparent;
}
.p-tab:not(.p-disabled):focus-visible {
z-index: 1;
box-shadow: ${dt('tabs.tab.focus.ring.shadow')};
outline: ${dt('tabs.tab.focus.ring.width')} ${dt('tabs.tab.focus.ring.style')} ${dt('tabs.tab.focus.ring.color')};
outline-offset: ${dt('tabs.tab.focus.ring.offset')};
}
.p-tab:not(.p-tab-active):not(.p-disabled):hover {
background: ${dt('tabs.tab.hover.background')};
border-color: ${dt('tabs.tab.hover.border.color')};
color: ${dt('tabs.tab.hover.color')};
}
.p-tab-active {
background: ${dt('tabs.tab.active.background')};
border-color: ${dt('tabs.tab.active.border.color')};
color: ${dt('tabs.tab.active.color')};
}
.p-tabpanels {
background: ${dt('tabs.tabpanel.background')};
color: ${dt('tabs.tabpanel.color')};
padding: ${dt('tabs.tabpanel.padding')};
outline: 0 none;
}
.p-tabpanel:focus-visible {
box-shadow: ${dt('tabs.tabpanel.focus.ring.shadow')};
outline: ${dt('tabs.tabpanel.focus.ring.width')} ${dt('tabs.tabpanel.focus.ring.style')} ${dt('tabs.tabpanel.focus.ring.color')};
outline-offset: ${dt('tabs.tabpanel.focus.ring.offset')};
}
.p-tablist-active-bar {
z-index: 1;
display: block;
position: absolute;
inset-block-end: ${dt('tabs.active.bar.bottom')};
height: ${dt('tabs.active.bar.height')};
background: ${dt('tabs.active.bar.background')};
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
`;
const classes = {
root: ({ props }) => [
'p-tabs p-component',

132
packages/primevue/src/tabview/style/TabViewStyle.js
View File

@ -1,136 +1,6 @@
import { theme } from '@primeuix/styles/tabview';
import BaseStyle from '@primevue/core/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.tab.list.background')};
border: 1px solid ${dt('tabview.tab.list.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.tab.border.color')} transparent;
color: ${dt('tabview.tab.color')};
padding: 1rem 1.125rem;
font-weight: 600;
border-top-right-radius: ${dt('border.radius.md')};
border-top-left-radius: ${dt('border.radius.md')};
transition: color ${dt('tabview.transition.duration')}, outline-color ${dt('tabview.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.tab.hover.color')};
}
.p-tabview-tablist-item.p-highlight > .p-tabview-tab-header {
color: ${dt('tabview.tab.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.nav.button.background')};
color: ${dt('tabview.nav.button.color')};
width: 2.5rem;
border-radius: 0;
outline-color: transparent;
transition: color ${dt('tabview.transition.duration')}, outline-color ${dt('tabview.transition.duration')};
box-shadow: ${dt('tabview.nav.button.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.nav.button.hover.color')};
}
.p-tabview-prev-button {
left: 0;
}
.p-tabview-next-button {
right: 0;
}
.p-tabview-panels {
background: ${dt('tabview.tab.panel.background')};
color: ${dt('tabview.tab.panel.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: ${dt('tabview.tab.active.border.color')};
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
`;
const classes = {
root: ({ props }) => [
'p-tabview p-component',

56
packages/primevue/src/tag/style/TagStyle.js
View File

@ -1,60 +1,6 @@
import { theme } from '@primeuix/styles/tag';
import BaseStyle from '@primevue/core/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: ${dt('tag.font.size')};
font-weight: ${dt('tag.font.weight')};
padding: ${dt('tag.padding')};
border-radius: ${dt('tag.border.radius')};
gap: ${dt('tag.gap')};
}
.p-tag-icon {
font-size: ${dt('tag.icon.size')};
width: ${dt('tag.icon.size')};
height:${dt('tag.icon.size')};
}
.p-tag-rounded {
border-radius: ${dt('tag.rounded.border.radius')};
}
.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',

42
packages/primevue/src/terminal/style/TerminalStyle.js
View File

@ -1,46 +1,6 @@
import { theme } from '@primeuix/styles/terminal';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-terminal {
height: ${dt('terminal.height')};
overflow: auto;
background: ${dt('terminal.background')};
color: ${dt('terminal.color')};
border: 1px solid ${dt('terminal.border.color')};
padding: ${dt('terminal.padding')};
border-radius: ${dt('terminal.border.radius')};
}
.p-terminal-prompt {
display: flex;
align-items: center;
}
.p-terminal-prompt-value {
flex: 1 1 auto;
border: 0 none;
background: transparent;
color: inherit;
padding: 0;
outline: 0 none;
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
}
.p-terminal-prompt-label {
margin-inline-end: ${dt('terminal.prompt.gap')};
}
.p-terminal-input::-ms-clear {
display: none;
}
.p-terminal-command-response {
margin: ${dt('terminal.command.response.margin')};
}
`;
const classes = {
root: 'p-terminal p-component',
welcomeMessage: 'p-terminal-welcome-message',

79
packages/primevue/src/textarea/style/TextareaStyle.js
View File

@ -1,83 +1,6 @@
import { theme } from '@primeuix/styles/textarea';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-textarea {
font-family: inherit;
font-feature-settings: inherit;
font-size: 1rem;
color: ${dt('textarea.color')};
background: ${dt('textarea.background')};
padding-block: ${dt('textarea.padding.y')};
padding-inline: ${dt('textarea.padding.x')};
border: 1px solid ${dt('textarea.border.color')};
transition: background ${dt('textarea.transition.duration')}, color ${dt('textarea.transition.duration')}, border-color ${dt('textarea.transition.duration')}, outline-color ${dt('textarea.transition.duration')}, box-shadow ${dt(
'textarea.transition.duration'
)};
appearance: none;
border-radius: ${dt('textarea.border.radius')};
outline-color: transparent;
box-shadow: ${dt('textarea.shadow')};
}
.p-textarea:enabled:hover {
border-color: ${dt('textarea.hover.border.color')};
}
.p-textarea:enabled:focus {
border-color: ${dt('textarea.focus.border.color')};
box-shadow: ${dt('textarea.focus.ring.shadow')};
outline: ${dt('textarea.focus.ring.width')} ${dt('textarea.focus.ring.style')} ${dt('textarea.focus.ring.color')};
outline-offset: ${dt('textarea.focus.ring.offset')};
}
.p-textarea.p-invalid {
border-color: ${dt('textarea.invalid.border.color')};
}
.p-textarea.p-variant-filled {
background: ${dt('textarea.filled.background')};
}
.p-textarea.p-variant-filled:enabled:focus {
background: ${dt('textarea.filled.focus.background')};
}
.p-textarea:disabled {
opacity: 1;
background: ${dt('textarea.disabled.background')};
color: ${dt('textarea.disabled.color')};
}
.p-textarea::placeholder {
color: ${dt('textarea.placeholder.color')};
}
.p-textarea.p-invalid::placeholder {
color: ${dt('textarea.invalid.placeholder.color')};
}
.p-textarea-fluid {
width: 100%;
}
.p-textarea-resizable {
overflow: hidden;
resize: none;
}
.p-textarea-sm {
font-size: ${dt('textarea.sm.font.size')};
padding-block: ${dt('textarea.sm.padding.y')};
padding-inline: ${dt('textarea.sm.padding.x')};
}
.p-textarea-lg {
font-size: ${dt('textarea.lg.font.size')};
padding-block: ${dt('textarea.lg.padding.y')};
padding-inline: ${dt('textarea.lg.padding.x')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-textarea p-component',

156
packages/primevue/src/tieredmenu/style/TieredMenuStyle.js
View File

@ -1,160 +1,6 @@
import { theme } from '@primeuix/styles/tieredmenu';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-tieredmenu {
background: ${dt('tieredmenu.background')};
color: ${dt('tieredmenu.color')};
border: 1px solid ${dt('tieredmenu.border.color')};
border-radius: ${dt('tieredmenu.border.radius')};
min-width: 12.5rem;
}
.p-tieredmenu-root-list,
.p-tieredmenu-submenu {
margin: 0;
padding: ${dt('tieredmenu.list.padding')};
list-style: none;
outline: 0 none;
display: flex;
flex-direction: column;
gap: ${dt('tieredmenu.list.gap')};
}
.p-tieredmenu-submenu {
position: absolute;
min-width: 100%;
z-index: 1;
background: ${dt('tieredmenu.background')};
color: ${dt('tieredmenu.color')};
border: 1px solid ${dt('tieredmenu.border.color')};
border-radius: ${dt('tieredmenu.border.radius')};
box-shadow: ${dt('tieredmenu.shadow')};
}
.p-tieredmenu-item {
position: relative;
}
.p-tieredmenu-item-content {
transition: background ${dt('tieredmenu.transition.duration')}, color ${dt('tieredmenu.transition.duration')};
border-radius: ${dt('tieredmenu.item.border.radius')};
color: ${dt('tieredmenu.item.color')};
}
.p-tieredmenu-item-link {
cursor: pointer;
display: flex;
align-items: center;
text-decoration: none;
overflow: hidden;
position: relative;
color: inherit;
padding: ${dt('tieredmenu.item.padding')};
gap: ${dt('tieredmenu.item.gap')};
user-select: none;
outline: 0 none;
}
.p-tieredmenu-item-label {
line-height: 1;
}
.p-tieredmenu-item-icon {
color: ${dt('tieredmenu.item.icon.color')};
}
.p-tieredmenu-submenu-icon {
color: ${dt('tieredmenu.submenu.icon.color')};
margin-left: auto;
font-size: ${dt('tieredmenu.submenu.icon.size')};
width: ${dt('tieredmenu.submenu.icon.size')};
height: ${dt('tieredmenu.submenu.icon.size')};
}
.p-tieredmenu-submenu-icon:dir(rtl) {
margin-left: 0;
margin-right: auto;
}
.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {
color: ${dt('tieredmenu.item.focus.color')};
background: ${dt('tieredmenu.item.focus.background')};
}
.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
color: ${dt('tieredmenu.item.icon.focus.color')};
}
.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
color: ${dt('tieredmenu.submenu.icon.focus.color')};
}
.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {
color: ${dt('tieredmenu.item.focus.color')};
background: ${dt('tieredmenu.item.focus.background')};
}
.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {
color: ${dt('tieredmenu.item.icon.focus.color')};
}
.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {
color: ${dt('tieredmenu.submenu.icon.focus.color')};
}
.p-tieredmenu-item-active > .p-tieredmenu-item-content {
color: ${dt('tieredmenu.item.active.color')};
background: ${dt('tieredmenu.item.active.background')};
}
.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
color: ${dt('tieredmenu.item.icon.active.color')};
}
.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
color: ${dt('tieredmenu.submenu.icon.active.color')};
}
.p-tieredmenu-separator {
border-block-start: 1px solid ${dt('tieredmenu.separator.border.color')};
}
.p-tieredmenu-overlay {
box-shadow: ${dt('tieredmenu.shadow')};
}
.p-tieredmenu-enter-from,
.p-tieredmenu-leave-active {
opacity: 0;
}
.p-tieredmenu-enter-active {
transition: opacity 250ms;
}
.p-tieredmenu-mobile .p-tieredmenu-submenu {
position: static;
box-shadow: none;
border: 0 none;
padding-inline-start: ${dt('tieredmenu.submenu.mobile.indent')};
padding-inline-end: 0;
}
.p-tieredmenu-mobile .p-tieredmenu-submenu:dir(rtl) {
padding-inline-start: 0;
padding-inline-end: ${dt('tieredmenu.submenu.mobile.indent')};
}
.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {
transition: transform 0.2s;
transform: rotate(90deg);
}
.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
transform: rotate(-90deg);
}
`;
const inlineStyles = {
submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'flex' : 'none' })
};

156
packages/primevue/src/timeline/style/TimelineStyle.js
View File

@ -1,160 +1,6 @@
import { theme } from '@primeuix/styles/timeline';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-timeline {
display: flex;
flex-grow: 1;
flex-direction: column;
direction: ltr;
}
.p-timeline-left .p-timeline-event-opposite {
text-align: right;
}
.p-timeline-left .p-timeline-event-content {
text-align: left;
}
.p-timeline-right .p-timeline-event {
flex-direction: row-reverse;
}
.p-timeline-right .p-timeline-event-opposite {
text-align: left;
}
.p-timeline-right .p-timeline-event-content {
text-align: right;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
flex-direction: row-reverse;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
text-align: right;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
text-align: left;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
text-align: left;
}
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
text-align: right;
}
.p-timeline-vertical .p-timeline-event-opposite,
.p-timeline-vertical .p-timeline-event-content {
padding: ${dt('timeline.vertical.event.content.padding')};
}
.p-timeline-vertical .p-timeline-event-connector {
width: ${dt('timeline.event.connector.size')};
}
.p-timeline-event {
display: flex;
position: relative;
min-height: ${dt('timeline.event.min.height')};
}
.p-timeline-event:last-child {
min-height: 0;
}
.p-timeline-event-opposite {
flex: 1;
}
.p-timeline-event-content {
flex: 1;
}
.p-timeline-event-separator {
flex: 0;
display: flex;
align-items: center;
flex-direction: column;
}
.p-timeline-event-marker {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
align-self: baseline;
border-width: ${dt('timeline.event.marker.border.width')};
border-style: solid;
border-color: ${dt('timeline.event.marker.border.color')};
border-radius: ${dt('timeline.event.marker.border.radius')};
width: ${dt('timeline.event.marker.size')};
height: ${dt('timeline.event.marker.size')};
background: ${dt('timeline.event.marker.background')};
}
.p-timeline-event-marker::before {
content: " ";
border-radius: ${dt('timeline.event.marker.content.border.radius')};
width: ${dt('timeline.event.marker.content.size')};
height:${dt('timeline.event.marker.content.size')};
background: ${dt('timeline.event.marker.content.background')};
}
.p-timeline-event-marker::after {
content: " ";
position: absolute;
width: 100%;
height: 100%;
border-radius: ${dt('timeline.event.marker.border.radius')};
box-shadow: ${dt('timeline.event.marker.content.inset.shadow')};
}
.p-timeline-event-connector {
flex-grow: 1;
background: ${dt('timeline.event.connector.color')};
}
.p-timeline-horizontal {
flex-direction: row;
}
.p-timeline-horizontal .p-timeline-event {
flex-direction: column;
flex: 1;
}
.p-timeline-horizontal .p-timeline-event:last-child {
flex: 0;
}
.p-timeline-horizontal .p-timeline-event-separator {
flex-direction: row;
}
.p-timeline-horizontal .p-timeline-event-connector {
width: 100%;
height: ${dt('timeline.event.connector.size')};
}
.p-timeline-horizontal .p-timeline-event-opposite,
.p-timeline-horizontal .p-timeline-event-content {
padding: ${dt('timeline.horizontal.event.content.padding')};
}
.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
flex-direction: column-reverse;
}
.p-timeline-bottom .p-timeline-event {
flex-direction: column-reverse;
}
`;
const classes = {
root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],
event: 'p-timeline-event',

252
packages/primevue/src/toast/style/ToastStyle.js
View File

@ -1,256 +1,6 @@
import { theme } from '@primeuix/styles/toast';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-toast {
width: ${dt('toast.width')};
white-space: pre-line;
word-break: break-word;
}
.p-toast-message {
margin: 0 0 1rem 0;
}
.p-toast-message-icon {
flex-shrink: 0;
font-size: ${dt('toast.icon.size')};
width: ${dt('toast.icon.size')};
height: ${dt('toast.icon.size')};
}
.p-toast-message-content {
display: flex;
align-items: flex-start;
padding: ${dt('toast.content.padding')};
gap: ${dt('toast.content.gap')};
}
.p-toast-message-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: ${dt('toast.text.gap')};
}
.p-toast-summary {
font-weight: ${dt('toast.summary.font.weight')};
font-size: ${dt('toast.summary.font.size')};
}
.p-toast-detail {
font-weight: ${dt('toast.detail.font.weight')};
font-size: ${dt('toast.detail.font.size')};
}
.p-toast-close-button {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
cursor: pointer;
background: transparent;
transition: background ${dt('toast.transition.duration')}, color ${dt('toast.transition.duration')}, outline-color ${dt('toast.transition.duration')}, box-shadow ${dt('toast.transition.duration')};
outline-color: transparent;
color: inherit;
width: ${dt('toast.close.button.width')};
height: ${dt('toast.close.button.height')};
border-radius: ${dt('toast.close.button.border.radius')};
margin: -25% 0 0 0;
right: -25%;
padding: 0;
border: none;
user-select: none;
}
.p-toast-close-button:dir(rtl) {
margin: -25% 0 0 auto;
left: -25%;
right: auto;
}
.p-toast-message-info,
.p-toast-message-success,
.p-toast-message-warn,
.p-toast-message-error,
.p-toast-message-secondary,
.p-toast-message-contrast {
border-width: ${dt('toast.border.width')};
border-style: solid;
backdrop-filter: blur(${dt('toast.blur')});
border-radius: ${dt('toast.border.radius')};
}
.p-toast-close-icon {
font-size: ${dt('toast.close.icon.size')};
width: ${dt('toast.close.icon.size')};
height: ${dt('toast.close.icon.size')};
}
.p-toast-close-button:focus-visible {
outline-width: ${dt('focus.ring.width')};
outline-style: ${dt('focus.ring.style')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-toast-message-info {
background: ${dt('toast.info.background')};
border-color: ${dt('toast.info.border.color')};
color: ${dt('toast.info.color')};
box-shadow: ${dt('toast.info.shadow')};
}
.p-toast-message-info .p-toast-detail {
color: ${dt('toast.info.detail.color')};
}
.p-toast-message-info .p-toast-close-button:focus-visible {
outline-color: ${dt('toast.info.close.button.focus.ring.color')};
box-shadow: ${dt('toast.info.close.button.focus.ring.shadow')};
}
.p-toast-message-info .p-toast-close-button:hover {
background: ${dt('toast.info.close.button.hover.background')};
}
.p-toast-message-success {
background: ${dt('toast.success.background')};
border-color: ${dt('toast.success.border.color')};
color: ${dt('toast.success.color')};
box-shadow: ${dt('toast.success.shadow')};
}
.p-toast-message-success .p-toast-detail {
color: ${dt('toast.success.detail.color')};
}
.p-toast-message-success .p-toast-close-button:focus-visible {
outline-color: ${dt('toast.success.close.button.focus.ring.color')};
box-shadow: ${dt('toast.success.close.button.focus.ring.shadow')};
}
.p-toast-message-success .p-toast-close-button:hover {
background: ${dt('toast.success.close.button.hover.background')};
}
.p-toast-message-warn {
background: ${dt('toast.warn.background')};
border-color: ${dt('toast.warn.border.color')};
color: ${dt('toast.warn.color')};
box-shadow: ${dt('toast.warn.shadow')};
}
.p-toast-message-warn .p-toast-detail {
color: ${dt('toast.warn.detail.color')};
}
.p-toast-message-warn .p-toast-close-button:focus-visible {
outline-color: ${dt('toast.warn.close.button.focus.ring.color')};
box-shadow: ${dt('toast.warn.close.button.focus.ring.shadow')};
}
.p-toast-message-warn .p-toast-close-button:hover {
background: ${dt('toast.warn.close.button.hover.background')};
}
.p-toast-message-error {
background: ${dt('toast.error.background')};
border-color: ${dt('toast.error.border.color')};
color: ${dt('toast.error.color')};
box-shadow: ${dt('toast.error.shadow')};
}
.p-toast-message-error .p-toast-detail {
color: ${dt('toast.error.detail.color')};
}
.p-toast-message-error .p-toast-close-button:focus-visible {
outline-color: ${dt('toast.error.close.button.focus.ring.color')};
box-shadow: ${dt('toast.error.close.button.focus.ring.shadow')};
}
.p-toast-message-error .p-toast-close-button:hover {
background: ${dt('toast.error.close.button.hover.background')};
}
.p-toast-message-secondary {
background: ${dt('toast.secondary.background')};
border-color: ${dt('toast.secondary.border.color')};
color: ${dt('toast.secondary.color')};
box-shadow: ${dt('toast.secondary.shadow')};
}
.p-toast-message-secondary .p-toast-detail {
color: ${dt('toast.secondary.detail.color')};
}
.p-toast-message-secondary .p-toast-close-button:focus-visible {
outline-color: ${dt('toast.secondary.close.button.focus.ring.color')};
box-shadow: ${dt('toast.secondary.close.button.focus.ring.shadow')};
}
.p-toast-message-secondary .p-toast-close-button:hover {
background: ${dt('toast.secondary.close.button.hover.background')};
}
.p-toast-message-contrast {
background: ${dt('toast.contrast.background')};
border-color: ${dt('toast.contrast.border.color')};
color: ${dt('toast.contrast.color')};
box-shadow: ${dt('toast.contrast.shadow')};
}
.p-toast-message-contrast .p-toast-detail {
color: ${dt('toast.contrast.detail.color')};
}
.p-toast-message-contrast .p-toast-close-button:focus-visible {
outline-color: ${dt('toast.contrast.close.button.focus.ring.color')};
box-shadow: ${dt('toast.contrast.close.button.focus.ring.shadow')};
}
.p-toast-message-contrast .p-toast-close-button:hover {
background: ${dt('toast.contrast.close.button.hover.background')};
}
.p-toast-top-center {
transform: translateX(-50%);
}
.p-toast-bottom-center {
transform: translateX(-50%);
}
.p-toast-center {
min-width: 20vw;
transform: translate(-50%, -50%);
}
.p-toast-message-enter-from {
opacity: 0;
transform: translateY(50%);
}
.p-toast-message-leave-from {
max-height: 1000px;
}
.p-toast .p-toast-message.p-toast-message-leave-to {
max-height: 0;
opacity: 0;
margin-bottom: 0;
overflow: hidden;
}
.p-toast-message-enter-active {
transition: transform 0.3s, opacity 0.3s;
}
.p-toast-message-leave-active {
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
}
`;
// Position
const inlineStyles = {
root: ({ position }) => ({

110
packages/primevue/src/togglebutton/style/ToggleButtonStyle.js
View File

@ -1,114 +1,6 @@
import { theme } from '@primeuix/styles/togglebutton';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-togglebutton {
display: inline-flex;
cursor: pointer;
user-select: none;
overflow: hidden;
position: relative;
color: ${dt('togglebutton.color')};
background: ${dt('togglebutton.background')};
border: 1px solid ${dt('togglebutton.border.color')};
padding: ${dt('togglebutton.padding')};
font-size: 1rem;
font-family: inherit;
font-feature-settings: inherit;
transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},
outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};
border-radius: ${dt('togglebutton.border.radius')};
outline-color: transparent;
font-weight: ${dt('togglebutton.font.weight')};
}
.p-togglebutton-content {
display: inline-flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
gap: ${dt('togglebutton.gap')};
padding: ${dt('togglebutton.content.padding')};
background: transparent;
border-radius: ${dt('togglebutton.content.border.radius')};
transition: background ${dt('togglebutton.transition.duration')}, color ${dt('togglebutton.transition.duration')}, border-color ${dt('togglebutton.transition.duration')},
outline-color ${dt('togglebutton.transition.duration')}, box-shadow ${dt('togglebutton.transition.duration')};
}
.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
background: ${dt('togglebutton.hover.background')};
color: ${dt('togglebutton.hover.color')};
}
.p-togglebutton.p-togglebutton-checked {
background: ${dt('togglebutton.checked.background')};
border-color: ${dt('togglebutton.checked.border.color')};
color: ${dt('togglebutton.checked.color')};
}
.p-togglebutton-checked .p-togglebutton-content {
background: ${dt('togglebutton.content.checked.background')};
box-shadow: ${dt('togglebutton.content.checked.shadow')};
}
.p-togglebutton:focus-visible {
box-shadow: ${dt('togglebutton.focus.ring.shadow')};
outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};
outline-offset: ${dt('togglebutton.focus.ring.offset')};
}
.p-togglebutton.p-invalid {
border-color: ${dt('togglebutton.invalid.border.color')};
}
.p-togglebutton:disabled {
opacity: 1;
cursor: default;
background: ${dt('togglebutton.disabled.background')};
border-color: ${dt('togglebutton.disabled.border.color')};
color: ${dt('togglebutton.disabled.color')};
}
.p-togglebutton-label,
.p-togglebutton-icon {
position: relative;
transition: none;
}
.p-togglebutton-icon {
color: ${dt('togglebutton.icon.color')};
}
.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {
color: ${dt('togglebutton.icon.hover.color')};
}
.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {
color: ${dt('togglebutton.icon.checked.color')};
}
.p-togglebutton:disabled .p-togglebutton-icon {
color: ${dt('togglebutton.icon.disabled.color')};
}
.p-togglebutton-sm {
padding: ${dt('togglebutton.sm.padding')};
font-size: ${dt('togglebutton.sm.font.size')};
}
.p-togglebutton-sm .p-togglebutton-content {
padding: ${dt('togglebutton.content.sm.padding')};
}
.p-togglebutton-lg {
padding: ${dt('togglebutton.lg.padding')};
font-size: ${dt('togglebutton.lg.font.size')};
}
.p-togglebutton-lg .p-togglebutton-content {
padding: ${dt('togglebutton.content.lg.padding')};
}
`;
const classes = {
root: ({ instance, props }) => [
'p-togglebutton p-component',

110
packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
View File

@ -1,114 +1,6 @@
import { theme } from '@primeuix/styles/toggleswitch';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-toggleswitch {
display: inline-block;
width: ${dt('toggleswitch.width')};
height: ${dt('toggleswitch.height')};
}
.p-toggleswitch-input {
cursor: pointer;
appearance: none;
position: absolute;
top: 0;
inset-inline-start: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border-radius: ${dt('toggleswitch.border.radius')};
}
.p-toggleswitch-slider {
cursor: pointer;
width: 100%;
height: 100%;
border-width: ${dt('toggleswitch.border.width')};
border-style: solid;
border-color: ${dt('toggleswitch.border.color')};
background: ${dt('toggleswitch.background')};
transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, border-color ${dt('toggleswitch.transition.duration')}, outline-color ${dt('toggleswitch.transition.duration')}, box-shadow ${dt(
'toggleswitch.transition.duration'
)};
border-radius: ${dt('toggleswitch.border.radius')};
outline-color: transparent;
box-shadow: ${dt('toggleswitch.shadow')};
}
.p-toggleswitch-handle {
position: absolute;
top: 50%;
display: flex;
justify-content: center;
align-items: center;
background: ${dt('toggleswitch.handle.background')};
color: ${dt('toggleswitch.handle.color')};
width: ${dt('toggleswitch.handle.size')};
height: ${dt('toggleswitch.handle.size')};
inset-inline-start: ${dt('toggleswitch.gap')};
margin-block-start: calc(-1 * calc(${dt('toggleswitch.handle.size')} / 2));
border-radius: ${dt('toggleswitch.handle.border.radius')};
transition: background ${dt('toggleswitch.transition.duration')}, color ${dt('toggleswitch.transition.duration')}, inset-inline-start ${dt('toggleswitch.slide.duration')}, box-shadow ${dt('toggleswitch.slide.duration')};
}
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
background: ${dt('toggleswitch.checked.background')};
border-color: ${dt('toggleswitch.checked.border.color')};
}
.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
background: ${dt('toggleswitch.handle.checked.background')};
color: ${dt('toggleswitch.handle.checked.color')};
inset-inline-start: calc(${dt('toggleswitch.width')} - calc(${dt('toggleswitch.handle.size')} + ${dt('toggleswitch.gap')}));
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
background: ${dt('toggleswitch.hover.background')};
border-color: ${dt('toggleswitch.hover.border.color')};
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {
background: ${dt('toggleswitch.handle.hover.background')};
color: ${dt('toggleswitch.handle.hover.color')};
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
background: ${dt('toggleswitch.checked.hover.background')};
border-color: ${dt('toggleswitch.checked.hover.border.color')};
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {
background: ${dt('toggleswitch.handle.checked.hover.background')};
color: ${dt('toggleswitch.handle.checked.hover.color')};
}
.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
box-shadow: ${dt('toggleswitch.focus.ring.shadow')};
outline: ${dt('toggleswitch.focus.ring.width')} ${dt('toggleswitch.focus.ring.style')} ${dt('toggleswitch.focus.ring.color')};
outline-offset: ${dt('toggleswitch.focus.ring.offset')};
}
.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
border-color: ${dt('toggleswitch.invalid.border.color')};
}
.p-toggleswitch.p-disabled {
opacity: 1;
}
.p-toggleswitch.p-disabled .p-toggleswitch-slider {
background: ${dt('toggleswitch.disabled.background')};
}
.p-toggleswitch.p-disabled .p-toggleswitch-handle {
background: ${dt('toggleswitch.handle.disabled.background')};
}
`;
const inlineStyles = {
root: { position: 'relative' }
};

23
packages/primevue/src/toolbar/style/ToolbarStyle.js
View File

@ -1,27 +1,6 @@
import { theme } from '@primeuix/styles/toolbar';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: ${dt('toolbar.padding')};
background: ${dt('toolbar.background')};
border: 1px solid ${dt('toolbar.border.color')};
color: ${dt('toolbar.color')};
border-radius: ${dt('toolbar.border.radius')};
gap: ${dt('toolbar.gap')};
}
.p-toolbar-start,
.p-toolbar-center,
.p-toolbar-end {
display: flex;
align-items: center;
}
`;
const classes = {
root: 'p-toolbar p-component',
start: 'p-toolbar-start',

63
packages/primevue/src/tooltip/style/TooltipStyle.js
View File

@ -1,67 +1,6 @@
import { theme } from '@primeuix/styles/tooltip';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-tooltip {
position: absolute;
display: none;
max-width: ${dt('tooltip.max.width')};
}
.p-tooltip-right,
.p-tooltip-left {
padding: 0 ${dt('tooltip.gutter')};
}
.p-tooltip-top,
.p-tooltip-bottom {
padding: ${dt('tooltip.gutter')} 0;
}
.p-tooltip-text {
white-space: pre-line;
word-break: break-word;
background: ${dt('tooltip.background')};
color: ${dt('tooltip.color')};
padding: ${dt('tooltip.padding')};
box-shadow: ${dt('tooltip.shadow')};
border-radius: ${dt('tooltip.border.radius')};
}
.p-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.p-tooltip-right .p-tooltip-arrow {
margin-top: calc(-1 * ${dt('tooltip.gutter')});
border-width: ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} 0;
border-right-color: ${dt('tooltip.background')};
}
.p-tooltip-left .p-tooltip-arrow {
margin-top: calc(-1 * ${dt('tooltip.gutter')});
border-width: ${dt('tooltip.gutter')} 0 ${dt('tooltip.gutter')} ${dt('tooltip.gutter')};
border-left-color: ${dt('tooltip.background')};
}
.p-tooltip-top .p-tooltip-arrow {
margin-left: calc(-1 * ${dt('tooltip.gutter')});
border-width: ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} 0 ${dt('tooltip.gutter')};
border-top-color: ${dt('tooltip.background')};
border-bottom-color: ${dt('tooltip.background')};
}
.p-tooltip-bottom .p-tooltip-arrow {
margin-left: calc(-1 * ${dt('tooltip.gutter')});
border-width: 0 ${dt('tooltip.gutter')} ${dt('tooltip.gutter')} ${dt('tooltip.gutter')};
border-top-color: ${dt('tooltip.background')};
border-bottom-color: ${dt('tooltip.background')};
}
`;
const classes = {
root: 'p-tooltip p-component',
arrow: 'p-tooltip-arrow',

159
packages/primevue/src/tree/style/TreeStyle.js
View File

@ -1,163 +1,6 @@
import { theme } from '@primeuix/styles/tree';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-tree {
background: ${dt('tree.background')};
color: ${dt('tree.color')};
padding: ${dt('tree.padding')};
}
.p-tree-root-children,
.p-tree-node-children {
display: flex;
list-style-type: none;
flex-direction: column;
margin: 0;
gap: ${dt('tree.gap')};
}
.p-tree-root-children {
padding: 0;
padding-block-start: ${dt('tree.gap')};
}
.p-tree-node-children {
padding: 0;
padding-block-start: ${dt('tree.gap')};
padding-inline-start: ${dt('tree.indent')};
}
.p-tree-node {
padding: 0;
outline: 0 none;
}
.p-tree-node-content {
border-radius: ${dt('tree.node.border.radius')};
padding: ${dt('tree.node.padding')};
display: flex;
align-items: center;
outline-color: transparent;
color: ${dt('tree.node.color')};
gap: ${dt('tree.node.gap')};
transition: background ${dt('tree.transition.duration')}, color ${dt('tree.transition.duration')}, outline-color ${dt('tree.transition.duration')}, box-shadow ${dt('tree.transition.duration')};
}
.p-tree-node:focus-visible > .p-tree-node-content {
box-shadow: ${dt('tree.node.focus.ring.shadow')};
outline: ${dt('tree.node.focus.ring.width')} ${dt('tree.node.focus.ring.style')} ${dt('tree.node.focus.ring.color')};
outline-offset: ${dt('tree.node.focus.ring.offset')};
}
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {
background: ${dt('tree.node.hover.background')};
color: ${dt('tree.node.hover.color')};
}
.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {
color: ${dt('tree.node.icon.hover.color')};
}
.p-tree-node-content.p-tree-node-selected {
background: ${dt('tree.node.selected.background')};
color: ${dt('tree.node.selected.color')};
}
.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button {
color: inherit;
}
.p-tree-node-toggle-button {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
flex-shrink: 0;
width: ${dt('tree.node.toggle.button.size')};
height: ${dt('tree.node.toggle.button.size')};
color: ${dt('tree.node.toggle.button.color')};
border: 0 none;
background: transparent;
border-radius: ${dt('tree.node.toggle.button.border.radius')};
transition: background ${dt('tree.transition.duration')}, color ${dt('tree.transition.duration')}, border-color ${dt('tree.transition.duration')}, outline-color ${dt('tree.transition.duration')}, box-shadow ${dt('tree.transition.duration')};
outline-color: transparent;
padding: 0;
}
.p-tree-node-toggle-button:enabled:hover {
background: ${dt('tree.node.toggle.button.hover.background')};
color: ${dt('tree.node.toggle.button.hover.color')};
}
.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {
background: ${dt('tree.node.toggle.button.selected.hover.background')};
color: ${dt('tree.node.toggle.button.selected.hover.color')};
}
.p-tree-root {
overflow: auto;
}
.p-tree-node-selectable {
cursor: pointer;
user-select: none;
}
.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button {
visibility: hidden;
}
.p-tree-node-icon {
color: ${dt('tree.node.icon.color')};
transition: color ${dt('tree.transition.duration')};
}
.p-tree-node-content.p-tree-node-selected .p-tree-node-icon {
color: ${dt('tree.node.icon.selected.color')};
}
.p-tree-filter {
margin: ${dt('tree.filter.margin')};
}
.p-tree-filter-input {
width: 100%;
}
.p-tree-loading {
position: relative;
height: 100%;
}
.p-tree-loading-icon {
font-size: ${dt('tree.loading.icon.size')};
width: ${dt('tree.loading.icon.size')};
height: ${dt('tree.loading.icon.size')};
}
.p-tree .p-tree-mask {
position: absolute;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.p-tree-flex-scrollable {
display: flex;
flex: 1;
height: 100%;
flex-direction: column;
}
.p-tree-flex-scrollable .p-tree-root {
flex: 1;
}
`;
const classes = {
root: ({ props }) => [
'p-tree p-component',

176
packages/primevue/src/treeselect/style/TreeSelectStyle.js
View File

@ -1,180 +1,6 @@
import { theme } from '@primeuix/styles/treeselect';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-treeselect {
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
background: ${dt('treeselect.background')};
border: 1px solid ${dt('treeselect.border.color')};
transition: background ${dt('treeselect.transition.duration')}, color ${dt('treeselect.transition.duration')}, border-color ${dt('treeselect.transition.duration')}, outline-color ${dt('treeselect.transition.duration')}, box-shadow ${dt(
'treeselect.transition.duration'
)};
border-radius: ${dt('treeselect.border.radius')};
outline-color: transparent;
box-shadow: ${dt('treeselect.shadow')};
}
.p-treeselect:not(.p-disabled):hover {
border-color: ${dt('treeselect.hover.border.color')};
}
.p-treeselect:not(.p-disabled).p-focus {
border-color: ${dt('treeselect.focus.border.color')};
box-shadow: ${dt('treeselect.focus.ring.shadow')};
outline: ${dt('treeselect.focus.ring.width')} ${dt('treeselect.focus.ring.style')} ${dt('treeselect.focus.ring.color')};
outline-offset: ${dt('treeselect.focus.ring.offset')};
}
.p-treeselect.p-variant-filled {
background: ${dt('treeselect.filled.background')};
}
.p-treeselect.p-variant-filled:not(.p-disabled):hover {
background: ${dt('treeselect.filled.hover.background')};
}
.p-treeselect.p-variant-filled.p-focus {
background: ${dt('treeselect.filled.focus.background')};
}
.p-treeselect.p-invalid {
border-color: ${dt('treeselect.invalid.border.color')};
}
.p-treeselect.p-disabled {
opacity: 1;
background: ${dt('treeselect.disabled.background')};
}
.p-treeselect-clear-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
color: ${dt('treeselect.clear.icon.color')};
inset-inline-end: ${dt('treeselect.dropdown.width')};
}
.p-treeselect-dropdown {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: transparent;
color: ${dt('treeselect.dropdown.color')};
width: ${dt('treeselect.dropdown.width')};
border-start-end-radius: ${dt('border.radius.md')};
border-end-end-radius: ${dt('border.radius.md')};
}
.p-treeselect-label-container {
overflow: hidden;
flex: 1 1 auto;
cursor: pointer;
}
.p-treeselect-label {
display: flex;
align-items: center;
gap: calc(${dt('treeselect.padding.y')} / 2);
white-space: nowrap;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
padding: ${dt('treeselect.padding.y')} ${dt('treeselect.padding.x')};
color: ${dt('treeselect.color')};
}
.p-treeselect-label.p-placeholder {
color: ${dt('treeselect.placeholder.color')};
}
.p-treeselect.p-invalid .p-treeselect-label.p-placeholder {
color: ${dt('treeselect.invalid.placeholder.color')};
}
.p-treeselect.p-disabled .p-treeselect-label {
color: ${dt('treeselect.disabled.color')};
}
.p-treeselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-treeselect .p-treeselect-overlay {
min-width: 100%;
}
.p-treeselect-overlay {
position: absolute;
top: 0;
left: 0;
background: ${dt('treeselect.overlay.background')};
color: ${dt('treeselect.overlay.color')};
border: 1px solid ${dt('treeselect.overlay.border.color')};
border-radius: ${dt('treeselect.overlay.border.radius')};
box-shadow: ${dt('treeselect.overlay.shadow')};
overflow: hidden;
}
.p-treeselect-tree-container {
overflow: auto;
}
.p-treeselect-empty-message {
padding: ${dt('treeselect.empty.message.padding')};
background: transparent;
}
.p-treeselect-fluid {
display: flex;
}
.p-treeselect-overlay .p-tree {
padding: ${dt('treeselect.tree.padding')};
}
.p-treeselect-overlay .p-tree-loading {
min-height: 3rem;
}
.p-treeselect-label .p-chip {
padding-block-start: calc(${dt('treeselect.padding.y')} / 2);
padding-block-end: calc(${dt('treeselect.padding.y')} / 2);
border-radius: ${dt('treeselect.chip.border.radius')};
}
.p-treeselect-label:has(.p-chip) {
padding: calc(${dt('treeselect.padding.y')} / 2) calc(${dt('treeselect.padding.x')} / 2);
}
.p-treeselect-sm .p-treeselect-label {
font-size: ${dt('treeselect.sm.font.size')};
padding-block: ${dt('treeselect.sm.padding.y')};
padding-inline: ${dt('treeselect.sm.padding.x')};
}
.p-treeselect-sm .p-treeselect-dropdown .p-icon {
font-size: ${dt('treeselect.sm.font.size')};
width: ${dt('treeselect.sm.font.size')};
height: ${dt('treeselect.sm.font.size')};
}
.p-treeselect-lg .p-treeselect-label {
font-size: ${dt('treeselect.lg.font.size')};
padding-block: ${dt('treeselect.lg.padding.y')};
padding-inline: ${dt('treeselect.lg.padding.x')};
}
.p-treeselect-lg .p-treeselect-dropdown .p-icon {
font-size: ${dt('treeselect.lg.font.size')};
width: ${dt('treeselect.lg.font.size')};
height: ${dt('treeselect.lg.font.size')};
}
`;
const inlineStyles = {
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
};

435
packages/primevue/src/treetable/style/TreeTableStyle.js
View File

@ -1,439 +1,6 @@
import { theme } from '@primeuix/styles/treetable';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-treetable {
position: relative;
}
.p-treetable-table {
border-spacing: 0;
border-collapse: separate;
width: 100%;
}
.p-treetable-scrollable > .p-treetable-table-container {
position: relative;
}
.p-treetable-scrollable-table > .p-treetable-thead {
inset-block-start: 0;
z-index: 1;
}
.p-treetable-scrollable-table > .p-treetable-frozen-tbody {
position: sticky;
z-index: 1;
}
.p-treetable-scrollable-table > .p-treetable-tfoot {
inset-block-end: 0;
z-index: 1;
}
.p-treetable-scrollable .p-treetable-frozen-column {
position: sticky;
background: ${dt('treetable.header.cell.background')};
}
.p-treetable-scrollable th.p-treetable-frozen-column {
z-index: 1;
}
.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead {
background: ${dt('treetable.header.cell.background')};
}
.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot {
background: ${dt('treetable.footer.cell.background')};
}
.p-treetable-flex-scrollable {
display: flex;
flex-direction: column;
height: 100%;
}
.p-treetable-flex-scrollable > .p-treetable-table-container {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header {
position: sticky;
z-index: 1;
}
.p-treetable-resizable-table > .p-treetable-thead > tr > th,
.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,
.p-treetable-resizable-table > .p-treetable-tbody > tr > td {
overflow: hidden;
white-space: nowrap;
}
.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {
background-clip: padding-box;
position: relative;
}
.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer {
display: none;
}
.p-treetable-column-resizer {
display: block;
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
margin: 0;
width: ${dt('treetable.column.resizer.width')};
height: 100%;
padding: 0;
cursor: col-resize;
border: 1px solid transparent;
}
.p-treetable-column-header-content {
display: flex;
align-items: center;
gap: ${dt('treetable.header.cell.gap')};
}
.p-treetable-column-resize-indicator {
width: ${dt('treetable.resize.indicator.width')};
position: absolute;
z-index: 10;
display: none;
background: ${dt('treetable.resize.indicator.color')};
}
.p-treetable-mask {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.p-treetable-paginator-top {
border-color: ${dt('treetable.paginator.top.border.color')};
border-style: solid;
border-width: ${dt('treetable.paginator.top.border.width')};
}
.p-treetable-paginator-bottom {
border-color: ${dt('treetable.paginator.bottom.border.color')};
border-style: solid;
border-width: ${dt('treetable.paginator.bottom.border.width')};
}
.p-treetable-header {
background: ${dt('treetable.header.background')};
color: ${dt('treetable.header.color')};
border-color: ${dt('treetable.header.border.color')};
border-style: solid;
border-width: ${dt('treetable.header.border.width')};
padding: ${dt('treetable.header.padding')};
}
.p-treetable-footer {
background: ${dt('treetable.footer.background')};
color: ${dt('treetable.footer.color')};
border-color: ${dt('treetable.footer.border.color')};
border-style: solid;
border-width: ${dt('treetable.footer.border.width')};
padding: ${dt('treetable.footer.padding')};
}
.p-treetable-header-cell {
padding: ${dt('treetable.header.cell.padding')};
background: ${dt('treetable.header.cell.background')};
border-color: ${dt('treetable.header.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0;
color: ${dt('treetable.header.cell.color')};
font-weight: normal;
text-align: start;
transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')},
outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
}
.p-treetable-column-title {
font-weight: ${dt('treetable.column.title.font.weight')};
}
.p-treetable-tbody > tr {
outline-color: transparent;
background: ${dt('treetable.row.background')};
color: ${dt('treetable.row.color')};
transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')},
outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
}
.p-treetable-tbody > tr > td {
text-align: start;
border-color: ${dt('treetable.body.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0;
padding: ${dt('treetable.body.cell.padding')};
}
.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover {
background: ${dt('treetable.row.hover.background')};
color: ${dt('treetable.row.hover.color')};
}
.p-treetable-tbody > tr.p-treetable-row-selected {
background: ${dt('treetable.row.selected.background')};
color: ${dt('treetable.row.selected.color')};
}
.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {
border-block-end-color: ${dt('treetable.body.cell.selected.border.color')};
}
.p-treetable-tbody > tr.p-treetable-row-selected > td {
border-block-end-color: ${dt('treetable.body.cell.selected.border.color')};
}
.p-treetable-tbody > tr:focus-visible,
.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {
box-shadow: ${dt('treetable.row.focus.ring.shadow')};
outline: ${dt('treetable.row.focus.ring.width')} ${dt('treetable.row.focus.ring.style')} ${dt('treetable.row.focus.ring.color')};
outline-offset: ${dt('treetable.row.focus.ring.offset')};
}
.p-treetable-tfoot > tr > td {
text-align: start;
padding: ${dt('treetable.footer.cell.padding')};
border-color: ${dt('treetable.footer.cell.border.color')};
border-style: solid;
border-width: 0 0 1px 0;
color: ${dt('treetable.footer.cell.color')};
background: ${dt('treetable.footer.cell.background')};
}
.p-treetable-column-footer {
font-weight: ${dt('treetable.column.footer.font.weight')};
}
.p-treetable-sortable-column {
cursor: pointer;
user-select: none;
outline-color: transparent;
}
.p-treetable-column-title,
.p-treetable-sort-icon,
.p-treetable-sort-badge {
vertical-align: middle;
}
.p-treetable-sort-icon {
color: ${dt('treetable.sort.icon.color')};
font-size: ${dt('treetable.sort.icon.size')};
width: ${dt('treetable.sort.icon.size')};
height: ${dt('treetable.sort.icon.size')};
transition: color ${dt('treetable.transition.duration')};
}
.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
background: ${dt('treetable.header.cell.hover.background')};
color: ${dt('treetable.header.cell.hover.color')};
}
.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
color: ${dt('treetable.sort.icon.hover.color')};
}
.p-treetable-column-sorted {
background: ${dt('treetable.header.cell.selected.background')};
color: ${dt('treetable.header.cell.selected.color')};
}
.p-treetable-column-sorted .p-treetable-sort-icon {
color: ${dt('treetable.header.cell.selected.color')};
}
.p-treetable-sortable-column:focus-visible {
box-shadow: ${dt('treetable.header.cell.focus.ring.shadow')};
outline: ${dt('treetable.header.cell.focus.ring.width')} ${dt('treetable.header.cell.focus.ring.style')} ${dt('treetable.header.cell.focus.ring.color')};
outline-offset: ${dt('treetable.header.cell.focus.ring.offset')};
}
.p-treetable-hoverable .p-treetable-selectable-row {
cursor: pointer;
}
.p-treetable-loading-icon {
font-size: ${dt('treetable.loading.icon.size')};
width: ${dt('treetable.loading.icon.size')};
height: ${dt('treetable.loading.icon.size')};
}
.p-treetable-gridlines .p-treetable-header {
border-width: 1px 1px 0 1px;
}
.p-treetable-gridlines .p-treetable-footer {
border-width: 0 1px 1px 1px;
}
.p-treetable-gridlines .p-treetable-paginator-top {
border-width: 1px 1px 0 1px;
}
.p-treetable-gridlines .p-treetable-paginator-bottom {
border-width: 0 1px 1px 1px;
}
.p-treetable-gridlines .p-treetable-thead > tr > th {
border-width: 1px 0 1px 1px;
}
.p-treetable-gridlines .p-treetable-thead > tr > th:last-child {
border-width: 1px;
}
.p-treetable-gridlines .p-treetable-tbody > tr > td {
border-width: 1px 0 0 1px;
}
.p-treetable-gridlines .p-treetable-tbody > tr > td:last-child {
border-width: 1px 1px 0 1px;
}
.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
border-width: 1px 0 1px 1px;
}
.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td:last-child {
border-width: 1px;
}
.p-treetable-gridlines .p-treetable-tfoot > tr > td {
border-width: 1px 0 1px 1px;
}
.p-treetable-gridlines .p-treetable-tfoot > tr > td:last-child {
border-width: 1px 1px 1px 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {
border-width: 0 0 1px 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td:last-child {
border-width: 0 1px 1px 1px;
}
.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {
border-width: 0 0 1px 1px;
}
.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td:last-child {
border-width: 0 1px 1px 1px;
}
.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {
border-width: 0 0 0 1px;
}
.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td:last-child {
border-width: 0 1px 0 1px;
}
.p-treetable.p-treetable-sm .p-treetable-header {
padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-footer {
padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-lg .p-treetable-header {
padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-footer {
padding: 0.9375rem 1.25rem;
}
.p-treetable-body-cell-content {
display: flex;
align-items: center;
gap: ${dt('treetable.body.cell.gap')};
}
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button {
color: inherit;
}
.p-treetable-node-toggle-button {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: ${dt('treetable.node.toggle.button.size')};
height: ${dt('treetable.node.toggle.button.size')};
color: ${dt('treetable.node.toggle.button.color')};
border: 0 none;
background: transparent;
cursor: pointer;
border-radius: ${dt('treetable.node.toggle.button.border.radius')};
transition: background ${dt('treetable.transition.duration')}, color ${dt('treetable.transition.duration')}, border-color ${dt('treetable.transition.duration')},
outline-color ${dt('treetable.transition.duration')}, box-shadow ${dt('treetable.transition.duration')};
outline-color: transparent;
user-select: none;
}
.p-treetable-node-toggle-button:enabled:hover {
color: ${dt('treetable.node.toggle.button.hover.color')};
background: ${dt('treetable.node.toggle.button.hover.background')};
}
.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover {
background: ${dt('treetable.node.toggle.button.selected.hover.background')};
color: ${dt('treetable.node.toggle.button.selected.hover.color')};
}
.p-treetable-node-toggle-button:focus-visible {
box-shadow: ${dt('treetable.node.toggle.button.focus.ring.shadow')};
outline: ${dt('treetable.node.toggle.button.focus.ring.width')} ${dt('treetable.node.toggle.button.focus.ring.style')} ${dt('treetable.node.toggle.button.focus.ring.color')};
outline-offset: ${dt('treetable.node.toggle.button.focus.ring.offset')};
}
.p-treetable-node-toggle-icon:dir(rtl) {
transform: rotate(180deg);
}
`;
const classes = {
root: ({ instance, props }) => [
'p-treetable p-component',

14
packages/primevue/src/virtualscroller/style/VirtualScrollerStyle.js
View File

@ -1,18 +1,6 @@
import { theme } from '@primeuix/styles/virtualscroller';
import BaseStyle from '@primevue/core/base/style';
const theme = ({ dt }) => `
.p-virtualscroller-loader {
background: ${dt('virtualscroller.loader.mask.background')};
color: ${dt('virtualscroller.loader.mask.color')};
}
.p-virtualscroller-loading-icon {
font-size: ${dt('virtualscroller.loader.icon.size')};
width: ${dt('virtualscroller.loader.icon.size')};
height: ${dt('virtualscroller.loader.icon.size')};
}
`;
const css = `
.p-virtualscroller {
position: relative;