From 4852576beb1025c7ac7b70cbecb37ef6ea13feb5 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 27 Jan 2025 14:52:25 +0300 Subject: [PATCH] Fixed #7153 - Port all styles to @primeuix/styles --- .../src/accordion/style/AccordionStyle.js | 93 +- .../autocomplete/style/AutoCompleteStyle.js | 267 +---- .../primevue/src/avatar/style/AvatarStyle.js | 83 +- .../primevue/src/badge/style/BadgeStyle.js | 78 +- .../src/blockui/style/BlockUIStyle.js | 19 +- .../src/breadcrumb/style/BreadcrumbStyle.js | 67 +- .../primevue/src/button/style/ButtonStyle.js | 643 +----------- .../src/buttongroup/style/ButtonGroupStyle.js | 35 +- packages/primevue/src/card/style/CardStyle.js | 34 +- .../src/carousel/style/CarouselStyle.js | 103 +- .../cascadeselect/style/CascadeSelectStyle.js | 247 +---- .../src/checkbox/style/CheckboxStyle.js | 139 +-- .../checkboxgroup/style/CheckboxGroupStyle.js | 7 +- packages/primevue/src/chip/style/ChipStyle.js | 54 +- .../src/colorpicker/style/ColorPickerStyle.js | 114 +-- .../confirmdialog/style/ConfirmDialogStyle.js | 16 +- .../confirmpopup/style/ConfirmPopupStyle.js | 109 +- .../src/contextmenu/style/ContextMenuStyle.js | 149 +-- .../src/datatable/style/DataTableStyle.js | 591 +---------- .../src/dataview/style/DataViewStyle.js | 53 +- .../src/datepicker/style/DatePickerStyle.js | 403 +------- .../primevue/src/dialog/style/DialogStyle.js | 150 +-- .../src/divider/style/DividerStyle.js | 84 +- packages/primevue/src/dock/style/DockStyle.js | 115 +-- .../primevue/src/drawer/style/DrawerStyle.js | 119 +-- .../primevue/src/editor/style/EditorStyle.js | 967 +----------------- .../src/fieldset/style/FieldsetStyle.js | 72 +- .../src/fileupload/style/FileUploadStyle.js | 86 +- .../src/floatlabel/style/FloatLabelStyle.js | 96 +- .../src/galleria/style/GalleriaStyle.js | 432 +------- .../src/iconfield/style/IconFieldStyle.js | 45 +- .../src/iftalabel/style/IftaLabelStyle.js | 50 +- .../primevue/src/image/style/ImageStyle.js | 123 +-- .../imagecompare/style/ImageCompareStyle.js | 88 +- .../inlinemessage/style/InlineMessageStyle.js | 94 +- .../src/inplace/style/InplaceStyle.js | 28 +- .../src/inputchips/style/InputChipsStyle.js | 101 +- .../src/inputgroup/style/InputGroupStyle.js | 100 +- .../src/inputnumber/style/InputNumberStyle.js | 162 +-- packages/primevue/src/knob/style/KnobStyle.js | 37 +- .../src/listbox/style/ListboxStyle.js | 112 +- .../src/megamenu/style/MegaMenuStyle.js | 338 +----- packages/primevue/src/menu/style/MenuStyle.js | 82 +- .../src/menubar/style/MenubarStyle.js | 268 +---- .../src/message/style/MessageStyle.js | 302 +----- .../src/metergroup/style/MeterGroupStyle.js | 92 +- .../src/multiselect/style/MultiSelectStyle.js | 238 +---- .../src/orderlist/style/OrderListStyle.js | 15 +- .../style/OrganizationChartStyle.js | 117 +-- .../overlaybadge/style/OverlayBadgeStyle.js | 23 +- .../src/paginator/style/PaginatorStyle.js | 100 +- .../primevue/src/panel/style/PanelStyle.js | 40 +- .../src/panelmenu/style/PanelMenuStyle.js | 154 +-- .../src/password/style/PasswordStyle.js | 80 +- .../src/picklist/style/PickListStyle.js | 23 +- .../src/popover/style/PopoverStyle.js | 81 +- .../src/progressbar/style/ProgressBarStyle.js | 119 +-- .../style/ProgressSpinnerStyle.js | 74 +- .../src/radiobutton/style/RadioButtonStyle.js | 144 +-- .../style/RadioButtonGroupStyle.js | 7 +- .../primevue/src/rating/style/RatingStyle.js | 49 +- .../primevue/src/ripple/style/RippleStyle.js | 23 +- .../src/scrollpanel/style/ScrollPanelStyle.js | 68 +- .../src/scrolltop/style/ScrollTopStyle.js | 31 +- .../primevue/src/select/style/SelectStyle.js | 232 +---- .../selectbutton/style/SelectButtonStyle.js | 37 +- .../src/skeleton/style/SkeletonStyle.js | 52 +- .../primevue/src/slider/style/SliderStyle.js | 90 +- .../src/speeddial/style/SpeedDialStyle.js | 77 +- .../src/splitbutton/style/SplitButtonStyle.js | 52 +- .../src/splitter/style/SplitterStyle.js | 81 +- .../src/stepper/style/StepperStyle.js | 185 +--- .../primevue/src/steps/style/StepsStyle.js | 117 +-- .../src/tabmenu/style/TabMenuStyle.js | 94 +- packages/primevue/src/tabs/style/TabsStyle.js | 146 +-- .../src/tabview/style/TabViewStyle.js | 132 +-- packages/primevue/src/tag/style/TagStyle.js | 56 +- .../src/terminal/style/TerminalStyle.js | 42 +- .../src/textarea/style/TextareaStyle.js | 79 +- .../src/tieredmenu/style/TieredMenuStyle.js | 156 +-- .../src/timeline/style/TimelineStyle.js | 156 +-- .../primevue/src/toast/style/ToastStyle.js | 252 +---- .../togglebutton/style/ToggleButtonStyle.js | 110 +- .../toggleswitch/style/ToggleSwitchStyle.js | 110 +- .../src/toolbar/style/ToolbarStyle.js | 23 +- .../src/tooltip/style/TooltipStyle.js | 63 +- packages/primevue/src/tree/style/TreeStyle.js | 159 +-- .../src/treeselect/style/TreeSelectStyle.js | 176 +--- .../src/treetable/style/TreeTableStyle.js | 435 +------- .../style/VirtualScrollerStyle.js | 14 +- 90 files changed, 90 insertions(+), 11869 deletions(-) diff --git a/packages/primevue/src/accordion/style/AccordionStyle.js b/packages/primevue/src/accordion/style/AccordionStyle.js index 21cc999f7..352a0c74a 100644 --- a/packages/primevue/src/accordion/style/AccordionStyle.js +++ b/packages/primevue/src/accordion/style/AccordionStyle.js @@ -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' }; diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js index b64d75eb8..57fbf4428 100644 --- a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js +++ b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js @@ -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' } }; diff --git a/packages/primevue/src/avatar/style/AvatarStyle.js b/packages/primevue/src/avatar/style/AvatarStyle.js index 49018b63b..75cb55b25 100644 --- a/packages/primevue/src/avatar/style/AvatarStyle.js +++ b/packages/primevue/src/avatar/style/AvatarStyle.js @@ -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', diff --git a/packages/primevue/src/badge/style/BadgeStyle.js b/packages/primevue/src/badge/style/BadgeStyle.js index b151333f9..eb0044fc6 100644 --- a/packages/primevue/src/badge/style/BadgeStyle.js +++ b/packages/primevue/src/badge/style/BadgeStyle.js @@ -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', diff --git a/packages/primevue/src/blockui/style/BlockUIStyle.js b/packages/primevue/src/blockui/style/BlockUIStyle.js index b0c535fab..d42bb6edd 100644 --- a/packages/primevue/src/blockui/style/BlockUIStyle.js +++ b/packages/primevue/src/blockui/style/BlockUIStyle.js @@ -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' }; diff --git a/packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js b/packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js index 87237e158..148c2fa68 100644 --- a/packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js +++ b/packages/primevue/src/breadcrumb/style/BreadcrumbStyle.js @@ -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', diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/packages/primevue/src/button/style/ButtonStyle.js index 68394cb32..3dab86f0c 100644 --- a/packages/primevue/src/button/style/ButtonStyle.js +++ b/packages/primevue/src/button/style/ButtonStyle.js @@ -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', diff --git a/packages/primevue/src/buttongroup/style/ButtonGroupStyle.js b/packages/primevue/src/buttongroup/style/ButtonGroupStyle.js index d9ffda08f..7238ce5b7 100644 --- a/packages/primevue/src/buttongroup/style/ButtonGroupStyle.js +++ b/packages/primevue/src/buttongroup/style/ButtonGroupStyle.js @@ -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' }; diff --git a/packages/primevue/src/card/style/CardStyle.js b/packages/primevue/src/card/style/CardStyle.js index 3626da3ac..db0e62bf4 100644 --- a/packages/primevue/src/card/style/CardStyle.js +++ b/packages/primevue/src/card/style/CardStyle.js @@ -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', diff --git a/packages/primevue/src/carousel/style/CarouselStyle.js b/packages/primevue/src/carousel/style/CarouselStyle.js index b376908ce..96a3e26fd 100644 --- a/packages/primevue/src/carousel/style/CarouselStyle.js +++ b/packages/primevue/src/carousel/style/CarouselStyle.js @@ -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', diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js index b3b2e1aa6..e6cd2f16c 100644 --- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js +++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js @@ -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 }) }; diff --git a/packages/primevue/src/checkbox/style/CheckboxStyle.js b/packages/primevue/src/checkbox/style/CheckboxStyle.js index cf9459a01..7b0910da5 100644 --- a/packages/primevue/src/checkbox/style/CheckboxStyle.js +++ b/packages/primevue/src/checkbox/style/CheckboxStyle.js @@ -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', diff --git a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js index 7abe7cf72..26e998831 100644 --- a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js +++ b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js @@ -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' }; diff --git a/packages/primevue/src/chip/style/ChipStyle.js b/packages/primevue/src/chip/style/ChipStyle.js index f431503c0..ce7ca2404 100644 --- a/packages/primevue/src/chip/style/ChipStyle.js +++ b/packages/primevue/src/chip/style/ChipStyle.js @@ -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', diff --git a/packages/primevue/src/colorpicker/style/ColorPickerStyle.js b/packages/primevue/src/colorpicker/style/ColorPickerStyle.js index 345fb7355..1719f7b94 100644 --- a/packages/primevue/src/colorpicker/style/ColorPickerStyle.js +++ b/packages/primevue/src/colorpicker/style/ColorPickerStyle.js @@ -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 }], diff --git a/packages/primevue/src/confirmdialog/style/ConfirmDialogStyle.js b/packages/primevue/src/confirmdialog/style/ConfirmDialogStyle.js index 79267ac2a..a304fb9bc 100644 --- a/packages/primevue/src/confirmdialog/style/ConfirmDialogStyle.js +++ b/packages/primevue/src/confirmdialog/style/ConfirmDialogStyle.js @@ -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', diff --git a/packages/primevue/src/confirmpopup/style/ConfirmPopupStyle.js b/packages/primevue/src/confirmpopup/style/ConfirmPopupStyle.js index ea773b065..deeacd4d1 100644 --- a/packages/primevue/src/confirmpopup/style/ConfirmPopupStyle.js +++ b/packages/primevue/src/confirmpopup/style/ConfirmPopupStyle.js @@ -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', diff --git a/packages/primevue/src/contextmenu/style/ContextMenuStyle.js b/packages/primevue/src/contextmenu/style/ContextMenuStyle.js index dac690607..0a3405150 100644 --- a/packages/primevue/src/contextmenu/style/ContextMenuStyle.js +++ b/packages/primevue/src/contextmenu/style/ContextMenuStyle.js @@ -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', diff --git a/packages/primevue/src/datatable/style/DataTableStyle.js b/packages/primevue/src/datatable/style/DataTableStyle.js index 69e1225ed..34f6a839b 100644 --- a/packages/primevue/src/datatable/style/DataTableStyle.js +++ b/packages/primevue/src/datatable/style/DataTableStyle.js @@ -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', diff --git a/packages/primevue/src/dataview/style/DataViewStyle.js b/packages/primevue/src/dataview/style/DataViewStyle.js index 99d9ebfbe..fd4e77e18 100644 --- a/packages/primevue/src/dataview/style/DataViewStyle.js +++ b/packages/primevue/src/dataview/style/DataViewStyle.js @@ -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', diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js index 2102ac811..5a329dd97 100644 --- a/packages/primevue/src/datepicker/style/DatePickerStyle.js +++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js @@ -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 }) }; diff --git a/packages/primevue/src/dialog/style/DialogStyle.js b/packages/primevue/src/dialog/style/DialogStyle.js index 0b6ce5f9f..3cb3ed063 100644 --- a/packages/primevue/src/dialog/style/DialogStyle.js +++ b/packages/primevue/src/dialog/style/DialogStyle.js @@ -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 }) => ({ diff --git a/packages/primevue/src/divider/style/DividerStyle.js b/packages/primevue/src/divider/style/DividerStyle.js index a095c652d..63824eddb 100644 --- a/packages/primevue/src/divider/style/DividerStyle.js +++ b/packages/primevue/src/divider/style/DividerStyle.js @@ -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 }) => ({ diff --git a/packages/primevue/src/dock/style/DockStyle.js b/packages/primevue/src/dock/style/DockStyle.js index 333510de1..13409af17 100644 --- a/packages/primevue/src/dock/style/DockStyle.js +++ b/packages/primevue/src/dock/style/DockStyle.js @@ -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', diff --git a/packages/primevue/src/drawer/style/DrawerStyle.js b/packages/primevue/src/drawer/style/DrawerStyle.js index 5ed65e026..88f7d7ff7 100644 --- a/packages/primevue/src/drawer/style/DrawerStyle.js +++ b/packages/primevue/src/drawer/style/DrawerStyle.js @@ -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', diff --git a/packages/primevue/src/editor/style/EditorStyle.js b/packages/primevue/src/editor/style/EditorStyle.js index 26f186cfa..86f9d6a53 100644 --- a/packages/primevue/src/editor/style/EditorStyle.js +++ b/packages/primevue/src/editor/style/EditorStyle.js @@ -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', diff --git a/packages/primevue/src/fieldset/style/FieldsetStyle.js b/packages/primevue/src/fieldset/style/FieldsetStyle.js index 3391f4cfb..3dace5a63 100644 --- a/packages/primevue/src/fieldset/style/FieldsetStyle.js +++ b/packages/primevue/src/fieldset/style/FieldsetStyle.js @@ -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', diff --git a/packages/primevue/src/fileupload/style/FileUploadStyle.js b/packages/primevue/src/fileupload/style/FileUploadStyle.js index c742b0465..c28d58462 100644 --- a/packages/primevue/src/fileupload/style/FileUploadStyle.js +++ b/packages/primevue/src/fileupload/style/FileUploadStyle.js @@ -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', diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js index 66288e150..f99f79955 100644 --- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js +++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js @@ -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', diff --git a/packages/primevue/src/galleria/style/GalleriaStyle.js b/packages/primevue/src/galleria/style/GalleriaStyle.js index f29f607e9..47b255035 100644 --- a/packages/primevue/src/galleria/style/GalleriaStyle.js +++ b/packages/primevue/src/galleria/style/GalleriaStyle.js @@ -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 }) => { diff --git a/packages/primevue/src/iconfield/style/IconFieldStyle.js b/packages/primevue/src/iconfield/style/IconFieldStyle.js index 4ecc4ebdf..d2019d339 100644 --- a/packages/primevue/src/iconfield/style/IconFieldStyle.js +++ b/packages/primevue/src/iconfield/style/IconFieldStyle.js @@ -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' }; diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js index 2282ab6f4..0360830d3 100644 --- a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js +++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js @@ -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' }; diff --git a/packages/primevue/src/image/style/ImageStyle.js b/packages/primevue/src/image/style/ImageStyle.js index dc6aeb9e0..909f0a93f 100644 --- a/packages/primevue/src/image/style/ImageStyle.js +++ b/packages/primevue/src/image/style/ImageStyle.js @@ -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', diff --git a/packages/primevue/src/imagecompare/style/ImageCompareStyle.js b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js index 1589b45dc..c99718e0f 100644 --- a/packages/primevue/src/imagecompare/style/ImageCompareStyle.js +++ b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js @@ -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' diff --git a/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js b/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js index dc6e3b6e6..beadfd872 100644 --- a/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js +++ b/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js @@ -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], diff --git a/packages/primevue/src/inplace/style/InplaceStyle.js b/packages/primevue/src/inplace/style/InplaceStyle.js index 53bcb9e02..c78fbb6af 100644 --- a/packages/primevue/src/inplace/style/InplaceStyle.js +++ b/packages/primevue/src/inplace/style/InplaceStyle.js @@ -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 }], diff --git a/packages/primevue/src/inputchips/style/InputChipsStyle.js b/packages/primevue/src/inputchips/style/InputChipsStyle.js index fe393ad45..d7ebee98d 100644 --- a/packages/primevue/src/inputchips/style/InputChipsStyle.js +++ b/packages/primevue/src/inputchips/style/InputChipsStyle.js @@ -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', diff --git a/packages/primevue/src/inputgroup/style/InputGroupStyle.js b/packages/primevue/src/inputgroup/style/InputGroupStyle.js index ebd753d9e..869743bcd 100644 --- a/packages/primevue/src/inputgroup/style/InputGroupStyle.js +++ b/packages/primevue/src/inputgroup/style/InputGroupStyle.js @@ -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' }; diff --git a/packages/primevue/src/inputnumber/style/InputNumberStyle.js b/packages/primevue/src/inputnumber/style/InputNumberStyle.js index 440790d01..2b7af9ccf 100644 --- a/packages/primevue/src/inputnumber/style/InputNumberStyle.js +++ b/packages/primevue/src/inputnumber/style/InputNumberStyle.js @@ -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', diff --git a/packages/primevue/src/knob/style/KnobStyle.js b/packages/primevue/src/knob/style/KnobStyle.js index 8263ef839..21d9c47b0 100644 --- a/packages/primevue/src/knob/style/KnobStyle.js +++ b/packages/primevue/src/knob/style/KnobStyle.js @@ -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', diff --git a/packages/primevue/src/listbox/style/ListboxStyle.js b/packages/primevue/src/listbox/style/ListboxStyle.js index 675efbd02..8c9f00e57 100644 --- a/packages/primevue/src/listbox/style/ListboxStyle.js +++ b/packages/primevue/src/listbox/style/ListboxStyle.js @@ -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', diff --git a/packages/primevue/src/megamenu/style/MegaMenuStyle.js b/packages/primevue/src/megamenu/style/MegaMenuStyle.js index 59ff4490f..ccb810f32 100644 --- a/packages/primevue/src/megamenu/style/MegaMenuStyle.js +++ b/packages/primevue/src/megamenu/style/MegaMenuStyle.js @@ -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' }) }; diff --git a/packages/primevue/src/menu/style/MenuStyle.js b/packages/primevue/src/menu/style/MenuStyle.js index 95fa188f2..068a90223 100644 --- a/packages/primevue/src/menu/style/MenuStyle.js +++ b/packages/primevue/src/menu/style/MenuStyle.js @@ -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', diff --git a/packages/primevue/src/menubar/style/MenubarStyle.js b/packages/primevue/src/menubar/style/MenubarStyle.js index 8af7c470e..919c2c624 100644 --- a/packages/primevue/src/menubar/style/MenubarStyle.js +++ b/packages/primevue/src/menubar/style/MenubarStyle.js @@ -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' }) }; diff --git a/packages/primevue/src/message/style/MessageStyle.js b/packages/primevue/src/message/style/MessageStyle.js index 75ffb6bf3..af825131a 100644 --- a/packages/primevue/src/message/style/MessageStyle.js +++ b/packages/primevue/src/message/style/MessageStyle.js @@ -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, diff --git a/packages/primevue/src/metergroup/style/MeterGroupStyle.js b/packages/primevue/src/metergroup/style/MeterGroupStyle.js index 379ceb74b..655722c22 100644 --- a/packages/primevue/src/metergroup/style/MeterGroupStyle.js +++ b/packages/primevue/src/metergroup/style/MeterGroupStyle.js @@ -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', diff --git a/packages/primevue/src/multiselect/style/MultiSelectStyle.js b/packages/primevue/src/multiselect/style/MultiSelectStyle.js index c63701eac..2bcd4f872 100644 --- a/packages/primevue/src/multiselect/style/MultiSelectStyle.js +++ b/packages/primevue/src/multiselect/style/MultiSelectStyle.js @@ -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 }) }; diff --git a/packages/primevue/src/orderlist/style/OrderListStyle.js b/packages/primevue/src/orderlist/style/OrderListStyle.js index e1535a7ff..b595837ef 100644 --- a/packages/primevue/src/orderlist/style/OrderListStyle.js +++ b/packages/primevue/src/orderlist/style/OrderListStyle.js @@ -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' diff --git a/packages/primevue/src/organizationchart/style/OrganizationChartStyle.js b/packages/primevue/src/organizationchart/style/OrganizationChartStyle.js index 30876cbb1..2b2face41 100644 --- a/packages/primevue/src/organizationchart/style/OrganizationChartStyle.js +++ b/packages/primevue/src/organizationchart/style/OrganizationChartStyle.js @@ -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', diff --git a/packages/primevue/src/overlaybadge/style/OverlayBadgeStyle.js b/packages/primevue/src/overlaybadge/style/OverlayBadgeStyle.js index af17d5d28..7727580c9 100644 --- a/packages/primevue/src/overlaybadge/style/OverlayBadgeStyle.js +++ b/packages/primevue/src/overlaybadge/style/OverlayBadgeStyle.js @@ -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' }; diff --git a/packages/primevue/src/paginator/style/PaginatorStyle.js b/packages/primevue/src/paginator/style/PaginatorStyle.js index a35b7a359..05cc4c836 100644 --- a/packages/primevue/src/paginator/style/PaginatorStyle.js +++ b/packages/primevue/src/paginator/style/PaginatorStyle.js @@ -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', diff --git a/packages/primevue/src/panel/style/PanelStyle.js b/packages/primevue/src/panel/style/PanelStyle.js index 902602fde..3ac9e5da6 100644 --- a/packages/primevue/src/panel/style/PanelStyle.js +++ b/packages/primevue/src/panel/style/PanelStyle.js @@ -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', diff --git a/packages/primevue/src/panelmenu/style/PanelMenuStyle.js b/packages/primevue/src/panelmenu/style/PanelMenuStyle.js index 6da157fa3..cc1aa420c 100644 --- a/packages/primevue/src/panelmenu/style/PanelMenuStyle.js +++ b/packages/primevue/src/panelmenu/style/PanelMenuStyle.js @@ -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', diff --git a/packages/primevue/src/password/style/PasswordStyle.js b/packages/primevue/src/password/style/PasswordStyle.js index f9802c401..629ad3b18 100644 --- a/packages/primevue/src/password/style/PasswordStyle.js +++ b/packages/primevue/src/password/style/PasswordStyle.js @@ -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 }) }; diff --git a/packages/primevue/src/picklist/style/PickListStyle.js b/packages/primevue/src/picklist/style/PickListStyle.js index b0ef382fc..ff3d784b7 100644 --- a/packages/primevue/src/picklist/style/PickListStyle.js +++ b/packages/primevue/src/picklist/style/PickListStyle.js @@ -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', diff --git a/packages/primevue/src/popover/style/PopoverStyle.js b/packages/primevue/src/popover/style/PopoverStyle.js index 91cbf89ce..f1ae242f0 100644 --- a/packages/primevue/src/popover/style/PopoverStyle.js +++ b/packages/primevue/src/popover/style/PopoverStyle.js @@ -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' diff --git a/packages/primevue/src/progressbar/style/ProgressBarStyle.js b/packages/primevue/src/progressbar/style/ProgressBarStyle.js index dd0c5a3b8..351ea6072 100644 --- a/packages/primevue/src/progressbar/style/ProgressBarStyle.js +++ b/packages/primevue/src/progressbar/style/ProgressBarStyle.js @@ -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', diff --git a/packages/primevue/src/progressspinner/style/ProgressSpinnerStyle.js b/packages/primevue/src/progressspinner/style/ProgressSpinnerStyle.js index d1ee160ed..72bcb693d 100644 --- a/packages/primevue/src/progressspinner/style/ProgressSpinnerStyle.js +++ b/packages/primevue/src/progressspinner/style/ProgressSpinnerStyle.js @@ -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', diff --git a/packages/primevue/src/radiobutton/style/RadioButtonStyle.js b/packages/primevue/src/radiobutton/style/RadioButtonStyle.js index d073f8f14..e85007c1c 100644 --- a/packages/primevue/src/radiobutton/style/RadioButtonStyle.js +++ b/packages/primevue/src/radiobutton/style/RadioButtonStyle.js @@ -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', diff --git a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js index ef01f4ca6..724d9d53b 100644 --- a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js +++ b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js @@ -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' }; diff --git a/packages/primevue/src/rating/style/RatingStyle.js b/packages/primevue/src/rating/style/RatingStyle.js index c9e30cc9d..c980f7635 100644 --- a/packages/primevue/src/rating/style/RatingStyle.js +++ b/packages/primevue/src/rating/style/RatingStyle.js @@ -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', diff --git a/packages/primevue/src/ripple/style/RippleStyle.js b/packages/primevue/src/ripple/style/RippleStyle.js index 1085d5b33..c7dcd9b68 100644 --- a/packages/primevue/src/ripple/style/RippleStyle.js +++ b/packages/primevue/src/ripple/style/RippleStyle.js @@ -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' }; diff --git a/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js b/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js index 64c6324ee..756e7995d 100644 --- a/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js +++ b/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js @@ -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', diff --git a/packages/primevue/src/scrolltop/style/ScrollTopStyle.js b/packages/primevue/src/scrolltop/style/ScrollTopStyle.js index 39f008eed..73e7bee07 100644 --- a/packages/primevue/src/scrolltop/style/ScrollTopStyle.js +++ b/packages/primevue/src/scrolltop/style/ScrollTopStyle.js @@ -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' diff --git a/packages/primevue/src/select/style/SelectStyle.js b/packages/primevue/src/select/style/SelectStyle.js index 09c93a7d0..a72503c5a 100644 --- a/packages/primevue/src/select/style/SelectStyle.js +++ b/packages/primevue/src/select/style/SelectStyle.js @@ -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 }) => [ diff --git a/packages/primevue/src/selectbutton/style/SelectButtonStyle.js b/packages/primevue/src/selectbutton/style/SelectButtonStyle.js index 72533dc05..821ad40a6 100644 --- a/packages/primevue/src/selectbutton/style/SelectButtonStyle.js +++ b/packages/primevue/src/selectbutton/style/SelectButtonStyle.js @@ -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', diff --git a/packages/primevue/src/skeleton/style/SkeletonStyle.js b/packages/primevue/src/skeleton/style/SkeletonStyle.js index adc4ac582..e20fcfa07 100644 --- a/packages/primevue/src/skeleton/style/SkeletonStyle.js +++ b/packages/primevue/src/skeleton/style/SkeletonStyle.js @@ -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' } }; diff --git a/packages/primevue/src/slider/style/SliderStyle.js b/packages/primevue/src/slider/style/SliderStyle.js index d0defbad1..47668bcbf 100644 --- a/packages/primevue/src/slider/style/SliderStyle.js +++ b/packages/primevue/src/slider/style/SliderStyle.js @@ -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' } diff --git a/packages/primevue/src/speeddial/style/SpeedDialStyle.js b/packages/primevue/src/speeddial/style/SpeedDialStyle.js index 2364bd23d..96d5de354 100644 --- a/packages/primevue/src/speeddial/style/SpeedDialStyle.js +++ b/packages/primevue/src/speeddial/style/SpeedDialStyle.js @@ -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 }) => ({ diff --git a/packages/primevue/src/splitbutton/style/SplitButtonStyle.js b/packages/primevue/src/splitbutton/style/SplitButtonStyle.js index 237d6f8fe..91c7c7ec9 100644 --- a/packages/primevue/src/splitbutton/style/SplitButtonStyle.js +++ b/packages/primevue/src/splitbutton/style/SplitButtonStyle.js @@ -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', diff --git a/packages/primevue/src/splitter/style/SplitterStyle.js b/packages/primevue/src/splitter/style/SplitterStyle.js index 9756163c1..c062d151c 100644 --- a/packages/primevue/src/splitter/style/SplitterStyle.js +++ b/packages/primevue/src/splitter/style/SplitterStyle.js @@ -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', diff --git a/packages/primevue/src/stepper/style/StepperStyle.js b/packages/primevue/src/stepper/style/StepperStyle.js index 473a66c67..33e848bf9 100644 --- a/packages/primevue/src/stepper/style/StepperStyle.js +++ b/packages/primevue/src/stepper/style/StepperStyle.js @@ -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', diff --git a/packages/primevue/src/steps/style/StepsStyle.js b/packages/primevue/src/steps/style/StepsStyle.js index 844f3deca..6275ad942 100644 --- a/packages/primevue/src/steps/style/StepsStyle.js +++ b/packages/primevue/src/steps/style/StepsStyle.js @@ -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', diff --git a/packages/primevue/src/tabmenu/style/TabMenuStyle.js b/packages/primevue/src/tabmenu/style/TabMenuStyle.js index 008ae715f..344a749bf 100644 --- a/packages/primevue/src/tabmenu/style/TabMenuStyle.js +++ b/packages/primevue/src/tabmenu/style/TabMenuStyle.js @@ -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', diff --git a/packages/primevue/src/tabs/style/TabsStyle.js b/packages/primevue/src/tabs/style/TabsStyle.js index e244efa2a..80d0e839b 100644 --- a/packages/primevue/src/tabs/style/TabsStyle.js +++ b/packages/primevue/src/tabs/style/TabsStyle.js @@ -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', diff --git a/packages/primevue/src/tabview/style/TabViewStyle.js b/packages/primevue/src/tabview/style/TabViewStyle.js index 7478bdb0e..4da357295 100644 --- a/packages/primevue/src/tabview/style/TabViewStyle.js +++ b/packages/primevue/src/tabview/style/TabViewStyle.js @@ -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', diff --git a/packages/primevue/src/tag/style/TagStyle.js b/packages/primevue/src/tag/style/TagStyle.js index 019dc5459..cb6ba8d51 100644 --- a/packages/primevue/src/tag/style/TagStyle.js +++ b/packages/primevue/src/tag/style/TagStyle.js @@ -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', diff --git a/packages/primevue/src/terminal/style/TerminalStyle.js b/packages/primevue/src/terminal/style/TerminalStyle.js index 1a533e89d..7353ff7d5 100644 --- a/packages/primevue/src/terminal/style/TerminalStyle.js +++ b/packages/primevue/src/terminal/style/TerminalStyle.js @@ -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', diff --git a/packages/primevue/src/textarea/style/TextareaStyle.js b/packages/primevue/src/textarea/style/TextareaStyle.js index d0ad36abc..c07f2be52 100644 --- a/packages/primevue/src/textarea/style/TextareaStyle.js +++ b/packages/primevue/src/textarea/style/TextareaStyle.js @@ -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', diff --git a/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js b/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js index 64c73e83e..7d6622a9e 100644 --- a/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js +++ b/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js @@ -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' }) }; diff --git a/packages/primevue/src/timeline/style/TimelineStyle.js b/packages/primevue/src/timeline/style/TimelineStyle.js index 50f776627..e6363c598 100644 --- a/packages/primevue/src/timeline/style/TimelineStyle.js +++ b/packages/primevue/src/timeline/style/TimelineStyle.js @@ -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', diff --git a/packages/primevue/src/toast/style/ToastStyle.js b/packages/primevue/src/toast/style/ToastStyle.js index 369f5d666..32f54a17a 100644 --- a/packages/primevue/src/toast/style/ToastStyle.js +++ b/packages/primevue/src/toast/style/ToastStyle.js @@ -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 }) => ({ diff --git a/packages/primevue/src/togglebutton/style/ToggleButtonStyle.js b/packages/primevue/src/togglebutton/style/ToggleButtonStyle.js index 95fe26261..a52b8bc84 100644 --- a/packages/primevue/src/togglebutton/style/ToggleButtonStyle.js +++ b/packages/primevue/src/togglebutton/style/ToggleButtonStyle.js @@ -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', diff --git a/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js b/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js index f68f70931..f7bc33dc7 100644 --- a/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js +++ b/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js @@ -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' } }; diff --git a/packages/primevue/src/toolbar/style/ToolbarStyle.js b/packages/primevue/src/toolbar/style/ToolbarStyle.js index d6ba930c1..8ec47f5f6 100644 --- a/packages/primevue/src/toolbar/style/ToolbarStyle.js +++ b/packages/primevue/src/toolbar/style/ToolbarStyle.js @@ -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', diff --git a/packages/primevue/src/tooltip/style/TooltipStyle.js b/packages/primevue/src/tooltip/style/TooltipStyle.js index b8f40b975..c10369d85 100644 --- a/packages/primevue/src/tooltip/style/TooltipStyle.js +++ b/packages/primevue/src/tooltip/style/TooltipStyle.js @@ -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', diff --git a/packages/primevue/src/tree/style/TreeStyle.js b/packages/primevue/src/tree/style/TreeStyle.js index 61838a6d8..56da0b38c 100644 --- a/packages/primevue/src/tree/style/TreeStyle.js +++ b/packages/primevue/src/tree/style/TreeStyle.js @@ -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', diff --git a/packages/primevue/src/treeselect/style/TreeSelectStyle.js b/packages/primevue/src/treeselect/style/TreeSelectStyle.js index d91d80521..fef8cb316 100644 --- a/packages/primevue/src/treeselect/style/TreeSelectStyle.js +++ b/packages/primevue/src/treeselect/style/TreeSelectStyle.js @@ -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 }) }; diff --git a/packages/primevue/src/treetable/style/TreeTableStyle.js b/packages/primevue/src/treetable/style/TreeTableStyle.js index d56de5724..f25accf90 100644 --- a/packages/primevue/src/treetable/style/TreeTableStyle.js +++ b/packages/primevue/src/treetable/style/TreeTableStyle.js @@ -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', diff --git a/packages/primevue/src/virtualscroller/style/VirtualScrollerStyle.js b/packages/primevue/src/virtualscroller/style/VirtualScrollerStyle.js index aae53c2ab..bf14f0cb2 100644 --- a/packages/primevue/src/virtualscroller/style/VirtualScrollerStyle.js +++ b/packages/primevue/src/virtualscroller/style/VirtualScrollerStyle.js @@ -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;