diff --git a/components/lib/accordion/BaseAccordion.vue b/components/lib/accordion/BaseAccordion.vue index 5abaa3557..1e52f77cc 100644 --- a/components/lib/accordion/BaseAccordion.vue +++ b/components/lib/accordion/BaseAccordion.vue @@ -3,21 +3,23 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-accordion-header-action { - cursor: pointer; - display: flex; - align-items: center; - user-select: none; - position: relative; - text-decoration: none; -} - -.p-accordion-header-action:focus { - z-index: 1; -} - -.p-accordion-header-text { - line-height: 1; +@layer primevue { + .p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-action:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } } `; diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue index 9ab13b40d..d846d13e9 100644 --- a/components/lib/autocomplete/BaseAutoComplete.vue +++ b/components/lib/autocomplete/BaseAutoComplete.vue @@ -4,100 +4,102 @@ import { useStyle } from 'primevue/usestyle'; import { ObjectUtils } from 'primevue/utils'; const styles = ` -.p-autocomplete { - display: inline-flex; -} +@layer primevue { + .p-autocomplete { + display: inline-flex; + } -.p-autocomplete-loader { - position: absolute; - top: 50%; - margin-top: -0.5rem; -} + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } -.p-autocomplete-dd .p-autocomplete-input { - flex: 1 1 auto; - width: 1%; -} + .p-autocomplete-dd .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; + } -.p-autocomplete-dd .p-autocomplete-input, -.p-autocomplete-dd .p-autocomplete-multiple-container { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} + .p-autocomplete-dd .p-autocomplete-input, + .p-autocomplete-dd .p-autocomplete-multiple-container { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } -.p-autocomplete-dd .p-autocomplete-dropdown { - border-top-left-radius: 0; - border-bottom-left-radius: 0px; -} + .p-autocomplete-dd .p-autocomplete-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } -.p-autocomplete .p-autocomplete-panel { - min-width: 100%; -} + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } -.p-autocomplete-panel { - position: absolute; - overflow: auto; - top: 0; - left: 0; -} + .p-autocomplete-panel { + position: absolute; + overflow: auto; + top: 0; + left: 0; + } -.p-autocomplete-items { - margin: 0; - padding: 0; - list-style-type: none; -} + .p-autocomplete-items { + margin: 0; + padding: 0; + list-style-type: none; + } -.p-autocomplete-item { - cursor: pointer; - white-space: nowrap; - position: relative; - overflow: hidden; -} + .p-autocomplete-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } -.p-autocomplete-multiple-container { - margin: 0; - padding: 0; - list-style-type: none; - cursor: text; - overflow: hidden; - display: flex; - align-items: center; - flex-wrap: wrap; -} + .p-autocomplete-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } -.p-autocomplete-token { - cursor: default; - display: inline-flex; - align-items: center; - flex: 0 0 auto; -} + .p-autocomplete-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } -.p-autocomplete-token-icon { - cursor: pointer; -} + .p-autocomplete-token-icon { + cursor: pointer; + } -.p-autocomplete-input-token { - flex: 1 1 auto; - display: inline-flex; -} + .p-autocomplete-input-token { + flex: 1 1 auto; + display: inline-flex; + } -.p-autocomplete-input-token input { - border: 0 none; - outline: 0 none; - background-color: transparent; - margin: 0; - padding: 0; - box-shadow: none; - border-radius: 0; - width: 100%; -} + .p-autocomplete-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } -.p-fluid .p-autocomplete { - display: flex; -} + .p-fluid .p-autocomplete { + display: flex; + } -.p-fluid .p-autocomplete-dd .p-autocomplete-input { - width: 1%; + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } } `; diff --git a/components/lib/avatar/BaseAvatar.vue b/components/lib/avatar/BaseAvatar.vue index c613ce767..ab244e831 100644 --- a/components/lib/avatar/BaseAvatar.vue +++ b/components/lib/avatar/BaseAvatar.vue @@ -3,34 +3,36 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-avatar { - display: inline-flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - font-size: 1rem; -} - -.p-avatar.p-avatar-image { - background-color: transparent; -} - -.p-avatar.p-avatar-circle { - border-radius: 50%; -} - -.p-avatar-circle img { - border-radius: 50%; -} - -.p-avatar .p-avatar-icon { - font-size: 1rem; -} - -.p-avatar img { - width: 100%; - height: 100%; +@layer primevue { + .p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + } + + .p-avatar.p-avatar-image { + background-color: transparent; + } + + .p-avatar.p-avatar-circle { + border-radius: 50%; + } + + .p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } } `; diff --git a/components/lib/avatargroup/BaseAvatarGroup.vue b/components/lib/avatargroup/BaseAvatarGroup.vue index fc134bcde..1b92e6f1f 100644 --- a/components/lib/avatargroup/BaseAvatarGroup.vue +++ b/components/lib/avatargroup/BaseAvatarGroup.vue @@ -3,13 +3,15 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-avatar-group .p-avatar + .p-avatar { - margin-left: -1rem; -} - -.p-avatar-group { - display: flex; - align-items: center; +@layer primevue { + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } } `; diff --git a/components/lib/badge/BaseBadge.vue b/components/lib/badge/BaseBadge.vue index e91903624..fdd607f40 100644 --- a/components/lib/badge/BaseBadge.vue +++ b/components/lib/badge/BaseBadge.vue @@ -4,37 +4,39 @@ import { useStyle } from 'primevue/usestyle'; import { ObjectUtils } from 'primevue/utils'; const styles = ` -.p-badge { - display: inline-block; - border-radius: 10px; - text-align: center; - padding: 0 .5rem; -} - -.p-overlay-badge { - position: relative; -} - -.p-overlay-badge .p-badge { - position: absolute; - top: 0; - right: 0; - transform: translate(50%,-50%); - transform-origin: 100% 0; - margin: 0; -} - -.p-badge-dot { - width: .5rem; - min-width: .5rem; - height: .5rem; - border-radius: 50%; - padding: 0; -} - -.p-badge-no-gutter { - padding: 0; - border-radius: 50%; +@layer primevue { + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 .5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%,-50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: .5rem; + min-width: .5rem; + height: .5rem; + border-radius: 50%; + padding: 0; + } + + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } } `; diff --git a/components/lib/badgedirective/BaseBadgeDirective.js b/components/lib/badgedirective/BaseBadgeDirective.js index 384b9e8cc..df3a40c78 100644 --- a/components/lib/badgedirective/BaseBadgeDirective.js +++ b/components/lib/badgedirective/BaseBadgeDirective.js @@ -2,37 +2,39 @@ import BaseDirective from 'primevue/basedirective'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-badge { - display: inline-block; - border-radius: 10px; - text-align: center; - padding: 0 .5rem; -} +@layer primevue { + .p-badge { + display: inline-block; + border-radius: 10px; + text-align: center; + padding: 0 .5rem; + } + + .p-overlay-badge { + position: relative; + } + + .p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%,-50%); + transform-origin: 100% 0; + margin: 0; + } + + .p-badge-dot { + width: .5rem; + min-width: .5rem; + height: .5rem; + border-radius: 50%; + padding: 0; + } -.p-overlay-badge { - position: relative; -} - -.p-overlay-badge .p-badge { - position: absolute; - top: 0; - right: 0; - transform: translate(50%,-50%); - transform-origin: 100% 0; - margin: 0; -} - -.p-badge-dot { - width: .5rem; - min-width: .5rem; - height: .5rem; - border-radius: 50%; - padding: 0; -} - -.p-badge-no-gutter { - padding: 0; - border-radius: 50%; + .p-badge-no-gutter { + padding: 0; + border-radius: 50%; + } } `; diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue index d1c70289f..f93a99ac1 100644 --- a/components/lib/basecomponent/BaseComponent.vue +++ b/components/lib/basecomponent/BaseComponent.vue @@ -231,6 +231,7 @@ const radioButtonStyles = ` } `; const styles = ` +@layer primevue { .p-component, .p-component * { box-sizing: border-box; } @@ -354,6 +355,7 @@ ${buttonStyles} ${checkboxStyles} ${inputTextStyles} ${radioButtonStyles} +} `; const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true }); diff --git a/components/lib/blockui/BaseBlockUI.vue b/components/lib/blockui/BaseBlockUI.vue index 248251f8d..9ff0c0dc8 100644 --- a/components/lib/blockui/BaseBlockUI.vue +++ b/components/lib/blockui/BaseBlockUI.vue @@ -3,16 +3,18 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-blockui-container { - position: relative; -} - -.p-blockui.p-component-overlay { - position: absolute; -} - -.p-blockui-document.p-component-overlay { - position: fixed; +@layer primevue { + .p-blockui-container { + position: relative; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } } `; diff --git a/components/lib/breadcrumb/BaseBreadcrumb.vue b/components/lib/breadcrumb/BaseBreadcrumb.vue index 7ed1554c1..f779f3925 100644 --- a/components/lib/breadcrumb/BaseBreadcrumb.vue +++ b/components/lib/breadcrumb/BaseBreadcrumb.vue @@ -3,36 +3,38 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-breadcrumb { - overflow-x: auto; -} - -.p-breadcrumb .p-breadcrumb-list { - margin: 0; - padding: 0; - list-style-type: none; - display: flex; - align-items: center; - flex-wrap: nowrap; -} - -.p-breadcrumb .p-menuitem-text { - line-height: 1; -} - -.p-breadcrumb .p-menuitem-link { - text-decoration: none; - display: flex; - align-items: center; -} - -.p-breadcrumb .p-menuitem-separator { - display: flex; - align-items: center; -} - -.p-breadcrumb::-webkit-scrollbar { - display: none; +@layer primevue { + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb .p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; + } + + .p-breadcrumb .p-menuitem-text { + line-height: 1; + } + + .p-breadcrumb .p-menuitem-link { + text-decoration: none; + display: flex; + align-items: center; + } + + .p-breadcrumb .p-menuitem-separator { + display: flex; + align-items: center; + } + + .p-breadcrumb::-webkit-scrollbar { + display: none; + } } `; diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue index 60a7ac053..c9c8b26d4 100644 --- a/components/lib/calendar/BaseCalendar.vue +++ b/components/lib/calendar/BaseCalendar.vue @@ -3,150 +3,152 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-calendar { - display: inline-flex; - max-width: 100%; -} - -.p-calendar .p-inputtext { - flex: 1 1 auto; - width: 1%; -} - -.p-calendar-w-btn .p-inputtext { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.p-calendar-w-btn .p-datepicker-trigger { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -/* Fluid */ -.p-fluid .p-calendar { - display: flex; -} - -.p-fluid .p-calendar .p-inputtext { - width: 1%; -} - -/* Datepicker */ -.p-calendar .p-datepicker { - min-width: 100%; -} - -.p-datepicker { - width: auto; -} - -.p-datepicker-inline { - display: inline-block; - overflow-x: auto; -} - -/* Header */ -.p-datepicker-header { - display: flex; - align-items: center; - justify-content: space-between; -} - -.p-datepicker-header .p-datepicker-title { - margin: 0 auto; -} - -.p-datepicker-prev, -.p-datepicker-next { - cursor: pointer; - display: inline-flex; - justify-content: center; - align-items: center; - overflow: hidden; - position: relative; -} - -/* Multiple Month DatePicker */ -.p-datepicker-multiple-month .p-datepicker-group-container { - display: flex; -} - -.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { - flex: 1 1 auto; -} - -/* DatePicker Table */ -.p-datepicker table { - width: 100%; - border-collapse: collapse; -} - -.p-datepicker td > span { - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - margin: 0 auto; - overflow: hidden; - position: relative; -} - -/* Month Picker */ -.p-monthpicker-month { - width: 33.3%; - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; - overflow: hidden; - position: relative; -} - -/* Year Picker */ -.p-yearpicker-year { - width: 50%; - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; - overflow: hidden; - position: relative; -} - -/* Button Bar */ -.p-datepicker-buttonbar { - display: flex; - justify-content: space-between; - align-items: center; -} - -/* Time Picker */ -.p-timepicker { - display: flex; - justify-content: center; - align-items: center; -} - -.p-timepicker button { - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - overflow: hidden; - position: relative; -} - -.p-timepicker > div { - display: flex; - align-items: center; - flex-direction: column; -} - -/* Touch UI */ -.p-datepicker-touch-ui, -.p-calendar .p-datepicker-touch-ui { - min-width: 80vw; +@layer primevue { + .p-calendar { + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + /* Fluid */ + .p-fluid .p-calendar { + display: flex; + } + + .p-fluid .p-calendar .p-inputtext { + width: 1%; + } + + /* Datepicker */ + .p-calendar .p-datepicker { + min-width: 100%; + } + + .p-datepicker { + width: auto; + } + + .p-datepicker-inline { + display: inline-block; + overflow-x: auto; + } + + /* Header */ + .p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-datepicker-header .p-datepicker-title { + margin: 0 auto; + } + + .p-datepicker-prev, + .p-datepicker-next { + cursor: pointer; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group { + flex: 1 1 auto; + } + + /* DatePicker Table */ + .p-datepicker table { + width: 100%; + border-collapse: collapse; + } + + .p-datepicker td > span { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + } + + /* Month Picker */ + .p-monthpicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + /* Button Bar */ + .p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + } + + /* Time Picker */ + .p-timepicker { + display: flex; + justify-content: center; + align-items: center; + } + + .p-timepicker button { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-timepicker > div { + display: flex; + align-items: center; + flex-direction: column; + } + + /* Touch UI */ + .p-datepicker-touch-ui, + .p-calendar .p-datepicker-touch-ui { + min-width: 80vw; + } } `; diff --git a/components/lib/carousel/BaseCarousel.vue b/components/lib/carousel/BaseCarousel.vue index c96bfc2fc..192f6ea63 100644 --- a/components/lib/carousel/BaseCarousel.vue +++ b/components/lib/carousel/BaseCarousel.vue @@ -3,74 +3,76 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-carousel { - display: flex; - flex-direction: column; -} - -.p-carousel-content { - display: flex; - flex-direction: column; - overflow: auto; -} - -.p-carousel-prev, -.p-carousel-next { - align-self: center; - flex-grow: 0; - flex-shrink: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - position: relative; -} - -.p-carousel-container { - display: flex; - flex-direction: row; -} - -.p-carousel-items-content { - overflow: hidden; - width: 100%; -} - -.p-carousel-items-container { - display: flex; - flex-direction: row; -} - -.p-carousel-indicators { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; -} - -.p-carousel-indicator > button { - display: flex; - align-items: center; - justify-content: center; -} - -/* Vertical */ -.p-carousel-vertical .p-carousel-container { - flex-direction: column; -} - -.p-carousel-vertical .p-carousel-items-container { - flex-direction: column; - height: 100%; -} - -/* Keyboard Support */ -.p-items-hidden .p-carousel-item { - visibility: hidden; -} - -.p-items-hidden .p-carousel-item.p-carousel-item-active { - visibility: visible; +@layer primevue { + .p-carousel { + display: flex; + flex-direction: column; + } + + .p-carousel-content { + display: flex; + flex-direction: column; + overflow: auto; + } + + .p-carousel-prev, + .p-carousel-next { + align-self: center; + flex-grow: 0; + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-carousel-container { + display: flex; + flex-direction: row; + } + + .p-carousel-items-content { + overflow: hidden; + width: 100%; + } + + .p-carousel-items-container { + display: flex; + flex-direction: row; + } + + .p-carousel-indicators { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + } + + .p-carousel-indicator > button { + display: flex; + align-items: center; + justify-content: center; + } + + /* Vertical */ + .p-carousel-vertical .p-carousel-container { + flex-direction: column; + } + + .p-carousel-vertical .p-carousel-items-container { + flex-direction: column; + height: 100%; + } + + /* Keyboard Support */ + .p-items-hidden .p-carousel-item { + visibility: hidden; + } + + .p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; + } } `; diff --git a/components/lib/cascadeselect/BaseCascadeSelect.vue b/components/lib/cascadeselect/BaseCascadeSelect.vue index e16fd3f02..d1d91057f 100644 --- a/components/lib/cascadeselect/BaseCascadeSelect.vue +++ b/components/lib/cascadeselect/BaseCascadeSelect.vue @@ -3,85 +3,87 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-cascadeselect { - display: inline-flex; - cursor: pointer; - user-select: none; -} - -.p-cascadeselect-trigger { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.p-cascadeselect-label { - display: block; - white-space: nowrap; - overflow: hidden; - flex: 1 1 auto; - width: 1%; - text-overflow: ellipsis; - cursor: pointer; -} - -.p-cascadeselect-label-empty { - overflow: hidden; - visibility: hidden; -} - -.p-cascadeselect .p-cascadeselect-panel { - min-width: 100%; -} - -.p-cascadeselect-item { - cursor: pointer; - font-weight: normal; - white-space: nowrap; -} - -.p-cascadeselect-item-content { - display: flex; - align-items: center; - overflow: hidden; - position: relative; -} - -.p-cascadeselect-group-icon { - margin-left: auto; -} - -.p-cascadeselect-items { - margin: 0; - padding: 0; - list-style-type: none; - min-width: 100%; -} - -.p-fluid .p-cascadeselect { - display: flex; -} - -.p-fluid .p-cascadeselect .p-cascadeselect-label { - width: 1%; -} - -.p-cascadeselect-sublist { - position: absolute; - min-width: 100%; - z-index: 1; - display: none; -} - -.p-cascadeselect-item-active { - overflow: visible !important; -} - -.p-cascadeselect-item-active > .p-cascadeselect-sublist { - display: block; - left: 100%; - top: 0; +@layer primevue { + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-cascadeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-cascadeselect .p-cascadeselect-panel { + min-width: 100%; + } + + .p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + } + + .p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-cascadeselect-group-icon { + margin-left: auto; + } + + .p-cascadeselect-items { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + } + + .p-fluid .p-cascadeselect { + display: flex; + } + + .p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; + } + + .p-cascadeselect-sublist { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-cascadeselect-item-active { + overflow: visible !important; + } + + .p-cascadeselect-item-active > .p-cascadeselect-sublist { + display: block; + left: 100%; + top: 0; + } } `; diff --git a/components/lib/chart/BaseChart.vue b/components/lib/chart/BaseChart.vue index 48ba5444f..ce3f58bed 100644 --- a/components/lib/chart/BaseChart.vue +++ b/components/lib/chart/BaseChart.vue @@ -3,8 +3,10 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-chart { - position: relative; +@layer primevue { + .p-chart { + position: relative; + } } `; diff --git a/components/lib/chip/BaseChip.vue b/components/lib/chip/BaseChip.vue index 8b57eec43..87e88bb37 100644 --- a/components/lib/chip/BaseChip.vue +++ b/components/lib/chip/BaseChip.vue @@ -3,26 +3,28 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-chip { - display: inline-flex; - align-items: center; -} - -.p-chip-text { - line-height: 1.5; -} - -.p-chip-icon.pi { - line-height: 1.5; -} - -.p-chip-remove-icon { - line-height: 1.5; - cursor: pointer; -} - -.p-chip img { - border-radius: 50%; +@layer primevue { + .p-chip { + display: inline-flex; + align-items: center; + } + + .p-chip-text { + line-height: 1.5; + } + + .p-chip-icon.pi { + line-height: 1.5; + } + + .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } } `; diff --git a/components/lib/chips/BaseChips.vue b/components/lib/chips/BaseChips.vue index 4c2ef4581..9acb6a8c5 100644 --- a/components/lib/chips/BaseChips.vue +++ b/components/lib/chips/BaseChips.vue @@ -3,50 +3,52 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-chips { - display: inline-flex; -} - -.p-chips-multiple-container { - margin: 0; - padding: 0; - list-style-type: none; - cursor: text; - overflow: hidden; - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.p-chips-token { - cursor: default; - display: inline-flex; - align-items: center; - flex: 0 0 auto; -} - -.p-chips-input-token { - flex: 1 1 auto; - display: inline-flex; -} - -.p-chips-token-icon { - cursor: pointer; -} - -.p-chips-input-token input { - border: 0 none; - outline: 0 none; - background-color: transparent; - margin: 0; - padding: 0; - box-shadow: none; - border-radius: 0; - width: 100%; -} - -.p-fluid .p-chips { - display: flex; +@layer primevue { + .p-chips { + display: inline-flex; + } + + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + + .p-chips-token-icon { + cursor: pointer; + } + + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + + .p-fluid .p-chips { + display: flex; + } } `; diff --git a/components/lib/colorpicker/BaseColorPicker.vue b/components/lib/colorpicker/BaseColorPicker.vue index ddcd130e5..1b8c4a857 100644 --- a/components/lib/colorpicker/BaseColorPicker.vue +++ b/components/lib/colorpicker/BaseColorPicker.vue @@ -3,12 +3,14 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-colorpicker-panel .p-colorpicker-color { - background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%) -} - -.p-colorpicker-panel .p-colorpicker-hue { - background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red) +@layer primevue { + .p-colorpicker-panel .p-colorpicker-color { + background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%) + } + + .p-colorpicker-panel .p-colorpicker-hue { + background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red) + } } `; diff --git a/components/lib/confirmpopup/BaseConfirmPopup.vue b/components/lib/confirmpopup/BaseConfirmPopup.vue index fd8f9e477..0b00c897f 100644 --- a/components/lib/confirmpopup/BaseConfirmPopup.vue +++ b/components/lib/confirmpopup/BaseConfirmPopup.vue @@ -3,74 +3,76 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-confirm-popup { - position: absolute; - margin-top: 10px; - top: 0; - left: 0; -} - -.p-confirm-popup-flipped { - margin-top: 0; - margin-bottom: 10px; -} - -/* Animation */ -.p-confirm-popup-enter-from { - opacity: 0; - transform: scaleY(0.8); -} - -.p-confirm-popup-leave-to { - opacity: 0; -} - -.p-confirm-popup-enter-active { - transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); -} - -.p-confirm-popup-leave-active { - transition: opacity 0.1s linear; -} - -.p-confirm-popup:after, -.p-confirm-popup:before { - bottom: 100%; - left: calc(var(--overlayArrowLeft, 0) + 1.25rem); - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -.p-confirm-popup:after { - border-width: 8px; - margin-left: -8px; -} - -.p-confirm-popup:before { - border-width: 10px; - margin-left: -10px; -} - -.p-confirm-popup-flipped:after, -.p-confirm-popup-flipped:before { - bottom: auto; - top: 100%; -} - -.p-confirm-popup.p-confirm-popup-flipped:after { - border-bottom-color: transparent; -} - -.p-confirm-popup.p-confirm-popup-flipped:before { - border-bottom-color: transparent; -} - -.p-confirm-popup .p-confirm-popup-content { - display: flex; - align-items: center; +@layer primevue { + .p-confirm-popup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + } + + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + /* Animation */ + .p-confirm-popup-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-confirm-popup-leave-to { + opacity: 0; + } + + .p-confirm-popup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-confirm-popup-leave-active { + transition: opacity 0.1s linear; + } + + .p-confirm-popup:after, + .p-confirm-popup:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-confirm-popup:after { + border-width: 8px; + margin-left: -8px; + } + + .p-confirm-popup:before { + border-width: 10px; + margin-left: -10px; + } + + .p-confirm-popup-flipped:after, + .p-confirm-popup-flipped:before { + bottom: auto; + top: 100%; + } + + .p-confirm-popup.p-confirm-popup-flipped:after { + border-bottom-color: transparent; + } + + .p-confirm-popup.p-confirm-popup-flipped:before { + border-bottom-color: transparent; + } + + .p-confirm-popup .p-confirm-popup-content { + display: flex; + align-items: center; + } } `; diff --git a/components/lib/contextmenu/BaseContextMenu.vue b/components/lib/contextmenu/BaseContextMenu.vue index 27eaea7b1..2da54c6e3 100644 --- a/components/lib/contextmenu/BaseContextMenu.vue +++ b/components/lib/contextmenu/BaseContextMenu.vue @@ -3,45 +3,47 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-contextmenu ul { - margin: 0; - padding: 0; - list-style: none; -} - -.p-contextmenu .p-submenu-list { - position: absolute; - min-width: 100%; - z-index: 1; -} - -.p-contextmenu .p-menuitem-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; -} - -.p-contextmenu .p-menuitem-text { - line-height: 1; -} - -.p-contextmenu .p-menuitem { - position: relative; -} - -.p-contextmenu .p-menuitem-link .p-submenu-icon { - margin-left: auto; -} - -.p-contextmenu-enter-from { - opacity: 0; -} - -.p-contextmenu-enter-active { - transition: opacity 250ms; +@layer primevue { + .p-contextmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-contextmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + } + + .p-contextmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-contextmenu .p-menuitem-text { + line-height: 1; + } + + .p-contextmenu .p-menuitem { + position: relative; + } + + .p-contextmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-contextmenu-enter-from { + opacity: 0; + } + + .p-contextmenu-enter-active { + transition: opacity 250ms; + } } `; diff --git a/components/lib/datatable/BaseDataTable.vue b/components/lib/datatable/BaseDataTable.vue index 736e41078..c24f05d56 100644 --- a/components/lib/datatable/BaseDataTable.vue +++ b/components/lib/datatable/BaseDataTable.vue @@ -3,239 +3,241 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-datatable { - position: relative; -} - -.p-datatable-table { - border-spacing: 0px; - width: 100%; -} - -.p-datatable .p-sortable-column { - cursor: pointer; - user-select: none; -} - -.p-datatable .p-sortable-column .p-column-title, -.p-datatable .p-sortable-column .p-sortable-column-icon, -.p-datatable .p-sortable-column .p-sortable-column-badge { - vertical-align: middle; -} - -.p-datatable .p-sortable-column .p-sortable-column-badge { - display: inline-flex; - align-items: center; - justify-content: center; -} - -.p-datatable-hoverable-rows .p-selectable-row { - cursor: pointer; -} - -/* Scrollable */ -.p-datatable-scrollable > .p-datatable-wrapper { - position: relative; -} - -.p-datatable-scrollable-table > .p-datatable-thead { - top: 0; - z-index: 1; -} - -.p-datatable-scrollable-table > .p-datatable-frozen-tbody { - position: sticky; - z-index: 1; -} - -.p-datatable-scrollable-table > .p-datatable-tfoot { - bottom: 0; - z-index: 1; -} - -.p-datatable-scrollable .p-frozen-column { - position: sticky; - background: inherit; -} - -.p-datatable-scrollable th.p-frozen-column { - z-index: 1; -} - -.p-datatable-flex-scrollable { - display: flex; - flex-direction: column; - height: 100%; -} - -.p-datatable-flex-scrollable > .p-datatable-wrapper { - display: flex; - flex-direction: column; - flex: 1; - height: 100%; -} - -.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { - position: sticky; - z-index: 1; -} - -/* Resizable */ -.p-datatable-resizable-table > .p-datatable-thead > tr > th, -.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, -.p-datatable-resizable-table > .p-datatable-tbody > tr > td { - overflow: hidden; - white-space: nowrap; -} - -.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { - background-clip: padding-box; - position: relative; -} - -.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { - display: none; -} - -.p-datatable .p-column-resizer { - display: block; - position: absolute !important; - top: 0; - right: 0; - margin: 0; - width: 0.5rem; - height: 100%; - padding: 0px; - cursor: col-resize; - border: 1px solid transparent; -} - -.p-datatable .p-column-header-content { - display: flex; - align-items: center; -} - -.p-datatable .p-column-resizer-helper { - width: 1px; - position: absolute; - z-index: 10; - display: none; -} - -.p-datatable .p-row-editor-init, -.p-datatable .p-row-editor-save, -.p-datatable .p-row-editor-cancel { - display: inline-flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; -} - -/* Expand */ -.p-datatable .p-row-toggler { - display: inline-flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; -} - -/* Reorder */ -.p-datatable-reorder-indicator-up, -.p-datatable-reorder-indicator-down { - position: absolute; - display: none; -} - -.p-reorderable-column, -.p-datatable-reorderablerow-handle { - cursor: move; -} - -/* Loader */ -.p-datatable .p-datatable-loading-overlay { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - z-index: 2; -} - -/* Filter */ -.p-column-filter-row { - display: flex; - align-items: center; - width: 100%; -} - -.p-column-filter-menu { - display: inline-flex; - margin-left: auto; -} - -.p-column-filter-row .p-column-filter-element { - flex: 1 1 auto; - width: 1%; -} - -.p-column-filter-menu-button, -.p-column-filter-clear-button { - display: inline-flex; - justify-content: center; - align-items: center; - cursor: pointer; - text-decoration: none; - overflow: hidden; - position: relative; -} - -.p-column-filter-row-items { - margin: 0; - padding: 0; - list-style: none; -} - -.p-column-filter-row-item { - cursor: pointer; -} - -.p-column-filter-add-button, -.p-column-filter-remove-button { - justify-content: center; -} - -.p-column-filter-add-button .p-button-label, -.p-column-filter-remove-button .p-button-label { - flex-grow: 0; -} - -.p-column-filter-buttonbar { - display: flex; - align-items: center; - justify-content: space-between; -} - -.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { - width: auto; -} - -/* Responsive */ -.p-datatable .p-datatable-tbody > tr > td > .p-column-title { - display: none; -} - -/* VirtualScroller */ -.p-datatable-virtualscroller-spacer { - display: flex; -} - -.p-datatable .p-virtualscroller .p-virtualscroller-loading { - transform: none !important; - min-height: 0; - position: sticky; - top: 0; - left: 0; +@layer primevue { + .p-datatable { + position: relative; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-datatable .p-sortable-column .p-column-title, + .p-datatable .p-sortable-column .p-sortable-column-icon, + .p-datatable .p-sortable-column .p-sortable-column-badge { + vertical-align: middle; + } + + .p-datatable .p-sortable-column .p-sortable-column-badge { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-datatable-hoverable-rows .p-selectable-row { + cursor: pointer; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; + } + + .p-datatable-scrollable-table > .p-datatable-tfoot { + bottom: 0; + z-index: 1; + } + + .p-datatable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-datatable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-datatable-flex-scrollable > .p-datatable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } + + .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header { + position: sticky; + z-index: 1; + } + + /* Resizable */ + .p-datatable-resizable-table > .p-datatable-thead > tr > th, + .p-datatable-resizable-table > .p-datatable-tfoot > tr > td, + .p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; + } + + .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-datatable .p-column-resizer { + display: block; + position: absolute !important; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-datatable .p-column-header-content { + display: flex; + align-items: center; + } + + .p-datatable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-datatable .p-row-editor-init, + .p-datatable .p-row-editor-save, + .p-datatable .p-row-editor-cancel { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Expand */ + .p-datatable .p-row-toggler { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Reorder */ + .p-datatable-reorder-indicator-up, + .p-datatable-reorder-indicator-down { + position: absolute; + display: none; + } + + .p-reorderable-column, + .p-datatable-reorderablerow-handle { + cursor: move; + } + + /* Loader */ + .p-datatable .p-datatable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Filter */ + .p-column-filter-row { + display: flex; + align-items: center; + width: 100%; + } + + .p-column-filter-menu { + display: inline-flex; + margin-left: auto; + } + + .p-column-filter-row .p-column-filter-element { + flex: 1 1 auto; + width: 1%; + } + + .p-column-filter-menu-button, + .p-column-filter-clear-button { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-column-filter-row-items { + margin: 0; + padding: 0; + list-style: none; + } + + .p-column-filter-row-item { + cursor: pointer; + } + + .p-column-filter-add-button, + .p-column-filter-remove-button { + justify-content: center; + } + + .p-column-filter-add-button .p-button-label, + .p-column-filter-remove-button .p-button-label { + flex-grow: 0; + } + + .p-column-filter-buttonbar { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) { + width: auto; + } + + /* Responsive */ + .p-datatable .p-datatable-tbody > tr > td > .p-column-title { + display: none; + } + + /* VirtualScroller */ + .p-datatable-virtualscroller-spacer { + display: flex; + } + + .p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; + } } `; diff --git a/components/lib/dialog/BaseDialog.vue b/components/lib/dialog/BaseDialog.vue index 706b126f3..e59f37382 100644 --- a/components/lib/dialog/BaseDialog.vue +++ b/components/lib/dialog/BaseDialog.vue @@ -3,136 +3,138 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-dialog-mask.p-component-overlay { - pointer-events: auto; -} - -.p-dialog { - max-height: 90%; - transform: scale(1); -} - -.p-dialog-content { - overflow-y: auto; -} - -.p-dialog-header { - display: flex; - align-items: center; - justify-content: space-between; - flex-shrink: 0; -} - -.p-dialog-footer { - flex-shrink: 0; -} - -.p-dialog .p-dialog-header-icons { - display: flex; - align-items: center; -} - -.p-dialog .p-dialog-header-icon { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; -} - -/* Fluid */ -.p-fluid .p-dialog-footer .p-button { - width: auto; -} - -/* Animation */ -/* Center */ -.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); -} - -/* Top, Bottom, Left, Right, Top* and Bottom* */ -.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); -} - -/* Maximize */ -.p-dialog-maximized { - -webkit-transition: none; - transition: none; - transform: none; - width: 100vw !important; - height: 100vh !important; - top: 0px !important; - left: 0px !important; - max-height: 100%; - height: 100%; -} -.p-dialog-maximized .p-dialog-content { - flex-grow: 1; -} - -.p-confirm-dialog .p-dialog-content { - display: flex; - align-items: center; +@layer primevue { + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + max-height: 90%; + transform: scale(1); + } + + .p-dialog-content { + overflow-y: auto; + } + + .p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .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); + } + + /* Top, Bottom, Left, Right, Top* and Bottom* */ + .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); + } + + /* Maximize */ + .p-dialog-maximized { + -webkit-transition: none; + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + } + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } } `; diff --git a/components/lib/divider/BaseDivider.vue b/components/lib/divider/BaseDivider.vue index 0c82e754b..736d311ed 100644 --- a/components/lib/divider/BaseDivider.vue +++ b/components/lib/divider/BaseDivider.vue @@ -3,65 +3,67 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-divider-horizontal { - display: flex; - width: 100%; - position: relative; - align-items: center; -} - -.p-divider-horizontal:before { - position: absolute; - display: block; - top: 50%; - left: 0; - width: 100%; - content: ''; -} - -.p-divider-content { - z-index: 1; -} - -.p-divider-vertical { - min-height: 100%; - margin: 0 1rem; - display: flex; - position: relative; - justify-content: center; -} - -.p-divider-vertical:before { - position: absolute; - display: block; - top: 0; - left: 50%; - height: 100%; - content: ''; -} - -.p-divider-solid.p-divider-horizontal:before { - border-top-style: solid; -} - -.p-divider-solid.p-divider-vertical:before { - border-left-style: solid; -} - -.p-divider-dashed.p-divider-horizontal:before { - border-top-style: dashed; -} - -.p-divider-dashed.p-divider-vertical:before { - border-left-style: dashed; -} - -.p-divider-dotted.p-divider-horizontal:before { - border-top-style: dotted; -} - -.p-divider-dotted.p-divider-vertical:before { - border-left-style: dotted; +@layer primevue { + .p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + } + + .p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ''; + } + + .p-divider-content { + z-index: 1; + } + + .p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + } + + .p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ''; + } + + .p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; + } + + .p-divider-solid.p-divider-vertical:before { + border-left-style: solid; + } + + .p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; + } + + .p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; + } + + .p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; + } + + .p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; + } } `; diff --git a/components/lib/dock/BaseDock.vue b/components/lib/dock/BaseDock.vue index ae34d5460..d6c16c5c9 100644 --- a/components/lib/dock/BaseDock.vue +++ b/components/lib/dock/BaseDock.vue @@ -3,110 +3,112 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.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; -} - -.p-dock-list { - margin: 0; - padding: 0; - list-style: none; - display: flex; - align-items: center; - justify-content: center; -} - -.p-dock-item { - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - will-change: transform; -} - -.p-dock-link { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - cursor: default; -} - -.p-dock-item-second-prev, -.p-dock-item-second-next { - transform: scale(1.2); -} - -.p-dock-item-prev, -.p-dock-item-next { - transform: scale(1.4); -} - -.p-dock-item-current { - transform: scale(1.6); - z-index: 1; -} - -/* Position */ -/* top */ -.p-dock-top { - left: 0; - top: 0; - width: 100%; -} - -.p-dock-top .p-dock-item { - transform-origin: center top; -} - -/* bottom */ -.p-dock-bottom { - left: 0; - bottom: 0; - width: 100%; -} - -.p-dock-bottom .p-dock-item { - transform-origin: center bottom; -} - -/* right */ -.p-dock-right { - right: 0; - top: 0; - height: 100%; -} - -.p-dock-right .p-dock-item { - transform-origin: center right; -} - -.p-dock-right .p-dock-list { - flex-direction: column; -} - -/* left */ -.p-dock-left { - left: 0; - top: 0; - height: 100%; -} - -.p-dock-left .p-dock-item { - transform-origin: center left; -} - -.p-dock-left .p-dock-list { - flex-direction: column; +@layer primevue { + .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; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + } + + .p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-item-second-prev, + .p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-item-prev, + .p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-item-current { + transform: scale(1.6); + z-index: 1; + } + + /* Position */ + /* top */ + .p-dock-top { + left: 0; + top: 0; + width: 100%; + } + + .p-dock-top .p-dock-item { + transform-origin: center top; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom .p-dock-item { + transform-origin: center bottom; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right .p-dock-item { + transform-origin: center right; + } + + .p-dock-right .p-dock-list { + flex-direction: column; + } + + /* left */ + .p-dock-left { + left: 0; + top: 0; + height: 100%; + } + + .p-dock-left .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } } `; diff --git a/components/lib/dropdown/BaseDropdown.vue b/components/lib/dropdown/BaseDropdown.vue index ceecc6cc1..57e68d744 100644 --- a/components/lib/dropdown/BaseDropdown.vue +++ b/components/lib/dropdown/BaseDropdown.vue @@ -3,97 +3,99 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-dropdown { - display: inline-flex; - cursor: pointer; - position: relative; - user-select: none; -} - -.p-dropdown-clear-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; -} - -.p-dropdown-trigger { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.p-dropdown-label { - display: block; - white-space: nowrap; - overflow: hidden; - flex: 1 1 auto; - width: 1%; - text-overflow: ellipsis; - cursor: pointer; -} - -.p-dropdown-label-empty { - overflow: hidden; - opacity: 0; -} - -input.p-dropdown-label { - cursor: default; -} - -.p-dropdown .p-dropdown-panel { - min-width: 100%; -} - -.p-dropdown-panel { - position: absolute; - top: 0; - left: 0; -} - -.p-dropdown-items-wrapper { - overflow: auto; -} - -.p-dropdown-item { - cursor: pointer; - font-weight: normal; - white-space: nowrap; - position: relative; - overflow: hidden; -} - -.p-dropdown-item-group { - cursor: auto; -} - -.p-dropdown-items { - margin: 0; - padding: 0; - list-style-type: none; -} - -.p-dropdown-filter { - width: 100%; -} - -.p-dropdown-filter-container { - position: relative; -} - -.p-dropdown-filter-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; -} - -.p-fluid .p-dropdown { - display: flex; -} - -.p-fluid .p-dropdown .p-dropdown-label { - width: 1%; +@layer primevue { + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + + input.p-dropdown-label { + cursor: default; + } + + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + + .p-dropdown-items-wrapper { + overflow: auto; + } + + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-dropdown-item-group { + cursor: auto; + } + + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } } `; diff --git a/components/lib/fieldset/BaseFieldset.vue b/components/lib/fieldset/BaseFieldset.vue index 2ff880b68..d5203616c 100644 --- a/components/lib/fieldset/BaseFieldset.vue +++ b/components/lib/fieldset/BaseFieldset.vue @@ -3,23 +3,25 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-fieldset-legend > a, -.p-fieldset-legend > span { - display: flex; - align-items: center; - justify-content: center; -} - -.p-fieldset-toggleable .p-fieldset-legend a { - cursor: pointer; - user-select: none; - overflow: hidden; - position: relative; - text-decoration: none; -} - -.p-fieldset-legend-text { - line-height: 1; +@layer primevue { + .p-fieldset-legend > a, + .p-fieldset-legend > span { + display: flex; + align-items: center; + justify-content: center; + } + + .p-fieldset-toggleable .p-fieldset-legend a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + } + + .p-fieldset-legend-text { + line-height: 1; + } } `; diff --git a/components/lib/fileupload/BaseFileUpload.vue b/components/lib/fileupload/BaseFileUpload.vue index 503747619..015f7b579 100644 --- a/components/lib/fileupload/BaseFileUpload.vue +++ b/components/lib/fileupload/BaseFileUpload.vue @@ -3,48 +3,50 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-fileupload-content { - position: relative; -} - -.p-fileupload-content .p-progressbar { - width: 100%; - position: absolute; - top: 0; - left: 0; -} - -.p-button.p-fileupload-choose { - position: relative; - overflow: hidden; -} - -.p-fileupload-buttonbar { - display: flex; - flex-wrap: wrap; -} - -.p-fileupload > input[type='file'], -.p-fileupload-basic input[type='file'] { - display: none; -} - -.p-fluid .p-fileupload .p-button { - width: auto; -} - -.p-fileupload-file { - display: flex; - flex-wrap: wrap; - align-items: center; -} - -.p-fileupload-file-thumbnail { - flex-shrink: 0; -} - -.p-fileupload-file-actions { - margin-left: auto; +@layer primevue { + .p-fileupload-content { + position: relative; + } + + .p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + } + + .p-button.p-fileupload-choose { + position: relative; + overflow: hidden; + } + + .p-fileupload-buttonbar { + display: flex; + flex-wrap: wrap; + } + + .p-fileupload > input[type='file'], + .p-fileupload-basic input[type='file'] { + display: none; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } + + .p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-actions { + margin-left: auto; + } } `; diff --git a/components/lib/galleria/BaseGalleria.vue b/components/lib/galleria/BaseGalleria.vue index e88884274..6f3ddebda 100644 --- a/components/lib/galleria/BaseGalleria.vue +++ b/components/lib/galleria/BaseGalleria.vue @@ -3,287 +3,289 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-galleria-content { - display: flex; - flex-direction: column; -} - -.p-galleria-item-wrapper { - display: flex; - flex-direction: column; - position: relative; -} - -.p-galleria-item-container { - position: relative; - display: flex; - height: 100%; -} - -.p-galleria-item-nav { - position: absolute; - top: 50%; - margin-top: -0.5rem; - display: inline-flex; - justify-content: center; - align-items: center; - overflow: hidden; -} - -.p-galleria-item-prev { - left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.p-galleria-item-next { - right: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.p-galleria-item { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; -} - -.p-galleria-item-nav-onhover .p-galleria-item-nav { - pointer-events: none; - opacity: 0; - transition: opacity 0.2s ease-in-out; -} - -.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { - pointer-events: all; - opacity: 1; -} - -.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { - pointer-events: none; -} - -.p-galleria-caption { - position: absolute; - bottom: 0; - left: 0; - width: 100%; -} - -/* Thumbnails */ -.p-galleria-thumbnail-wrapper { - display: flex; - flex-direction: column; - overflow: auto; - flex-shrink: 0; -} - -.p-galleria-thumbnail-prev, -.p-galleria-thumbnail-next { - align-self: center; - flex: 0 0 auto; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - position: relative; -} - -.p-galleria-thumbnail-prev span, -.p-galleria-thumbnail-next span { - display: flex; - justify-content: center; - align-items: center; -} - -.p-galleria-thumbnail-container { - display: flex; - flex-direction: row; -} - -.p-galleria-thumbnail-items-container { - overflow: hidden; - width: 100%; -} - -.p-galleria-thumbnail-items { - display: flex; -} - -.p-galleria-thumbnail-item { - overflow: auto; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: 0.5; -} - -.p-galleria-thumbnail-item:hover { - opacity: 1; - transition: opacity 0.3s; -} - -.p-galleria-thumbnail-item-current { - opacity: 1; -} - -/* Positions */ -/* Thumbnails */ -.p-galleria-thumbnails-left .p-galleria-content, -.p-galleria-thumbnails-right .p-galleria-content { - flex-direction: row; -} - -.p-galleria-thumbnails-left .p-galleria-item-wrapper, -.p-galleria-thumbnails-right .p-galleria-item-wrapper { - flex-direction: row; -} - -.p-galleria-thumbnails-left .p-galleria-item-wrapper, -.p-galleria-thumbnails-top .p-galleria-item-wrapper { - order: 2; -} - -.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, -.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { - order: 1; -} - -.p-galleria-thumbnails-left .p-galleria-thumbnail-container, -.p-galleria-thumbnails-right .p-galleria-thumbnail-container { - 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%; -} - -/* Indicators */ -.p-galleria-indicators { - display: flex; - align-items: center; - justify-content: center; -} - -.p-galleria-indicator > button { - display: inline-flex; - align-items: center; -} - -.p-galleria-indicators-left .p-galleria-item-wrapper, -.p-galleria-indicators-right .p-galleria-item-wrapper { - flex-direction: row; - align-items: center; -} - -.p-galleria-indicators-left .p-galleria-item-container, -.p-galleria-indicators-top .p-galleria-item-container { - order: 2; -} - -.p-galleria-indicators-left .p-galleria-indicators, -.p-galleria-indicators-top .p-galleria-indicators { - order: 1; -} - -.p-galleria-indicators-left .p-galleria-indicators, -.p-galleria-indicators-right .p-galleria-indicators { - flex-direction: column; -} - -.p-galleria-indicator-onitem .p-galleria-indicators { - position: absolute; - display: flex; -} - -.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { - top: 0; - left: 0; - width: 100%; - align-items: flex-start; -} - -.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { - right: 0; - top: 0; - height: 100%; - align-items: flex-end; -} - -.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { - bottom: 0; - left: 0; - width: 100%; - align-items: flex-end; -} - -.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { - left: 0; - top: 0; - height: 100%; - align-items: flex-start; -} - -/* FullScreen */ -.p-galleria-mask { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; -} - -.p-galleria-close { - position: absolute; - top: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; -} - -.p-galleria-mask .p-galleria-item-nav { - position: fixed; - top: 50%; - margin-top: -0.5rem; -} - -/* Animation */ -.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-item-nav { - opacity: 0; -} - -/* Keyboard Support */ -.p-items-hidden .p-galleria-thumbnail-item { - visibility: hidden; -} - -.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { - visibility: visible; +@layer primevue { + .p-galleria-content { + display: flex; + flex-direction: column; + } + + .p-galleria-item-wrapper { + display: flex; + flex-direction: column; + position: relative; + } + + .p-galleria-item-container { + position: relative; + display: flex; + height: 100%; + } + + .p-galleria-item-nav { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-item-prev { + left: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-galleria-item-next { + right: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + } + + .p-galleria-item-nav-onhover .p-galleria-item-nav { + pointer-events: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { + pointer-events: all; + opacity: 1; + } + + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { + pointer-events: none; + } + + .p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + /* Thumbnails */ + .p-galleria-thumbnail-wrapper { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; + } + + .p-galleria-thumbnail-prev, + .p-galleria-thumbnail-next { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + .p-galleria-thumbnail-prev span, + .p-galleria-thumbnail-next span { + display: flex; + justify-content: center; + align-items: center; + } + + .p-galleria-thumbnail-container { + display: flex; + flex-direction: row; + } + + .p-galleria-thumbnail-items-container { + overflow: hidden; + width: 100%; + } + + .p-galleria-thumbnail-items { + display: flex; + } + + .p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; + } + + .p-galleria-thumbnail-item-current { + opacity: 1; + } + + /* Positions */ + /* Thumbnails */ + .p-galleria-thumbnails-left .p-galleria-content, + .p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, + .p-galleria-thumbnails-right .p-galleria-item-wrapper { + flex-direction: row; + } + + .p-galleria-thumbnails-left .p-galleria-item-wrapper, + .p-galleria-thumbnails-top .p-galleria-item-wrapper { + order: 2; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, + .p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { + order: 1; + } + + .p-galleria-thumbnails-left .p-galleria-thumbnail-container, + .p-galleria-thumbnails-right .p-galleria-thumbnail-container { + 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%; + } + + /* Indicators */ + .p-galleria-indicators { + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-indicator > button { + display: inline-flex; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-wrapper, + .p-galleria-indicators-right .p-galleria-item-wrapper { + flex-direction: row; + align-items: center; + } + + .p-galleria-indicators-left .p-galleria-item-container, + .p-galleria-indicators-top .p-galleria-item-container { + order: 2; + } + + .p-galleria-indicators-left .p-galleria-indicators, + .p-galleria-indicators-top .p-galleria-indicators { + order: 1; + } + + .p-galleria-indicators-left .p-galleria-indicators, + .p-galleria-indicators-right .p-galleria-indicators { + flex-direction: column; + } + + .p-galleria-indicator-onitem .p-galleria-indicators { + position: absolute; + display: flex; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; + } + + .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; + } + + /* FullScreen */ + .p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-galleria-close { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + + .p-galleria-mask .p-galleria-item-nav { + position: fixed; + top: 50%; + margin-top: -0.5rem; + } + + /* Animation */ + .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-item-nav { + opacity: 0; + } + + /* Keyboard Support */ + .p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; + } + + .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; + } } `; diff --git a/components/lib/image/BaseImage.vue b/components/lib/image/BaseImage.vue index d2a09f84f..713795095 100644 --- a/components/lib/image/BaseImage.vue +++ b/components/lib/image/BaseImage.vue @@ -3,68 +3,70 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-image-mask { - display: flex; - align-items: center; - justify-content: center; -} - -.p-image-preview-container { - position: relative; - display: inline-block; -} - -.p-image-preview-indicator { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s; -} - -.p-image-preview-container:hover > .p-image-preview-indicator { - opacity: 1; - cursor: pointer; -} - -.p-image-preview-container > img { - cursor: pointer; -} - -.p-image-toolbar { - position: absolute; - top: 0; - right: 0; - display: flex; -} - -.p-image-action.p-link { - display: flex; - justify-content: center; - align-items: center; -} - -.p-image-preview { - transition: transform 0.15s; - max-width: 100vw; - max-height: 100vh; -} - -.p-image-preview-enter-active { - transition: all 150ms cubic-bezier(0, 0, 0.2, 1); -} -.p-image-preview-leave-active { - transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); -} -.p-image-preview-enter-from, -.p-image-preview-leave-to { - opacity: 0; - transform: scale(0.7); +@layer primevue { + .p-image-mask { + display: flex; + align-items: center; + justify-content: center; + } + + .p-image-preview-container { + position: relative; + display: inline-block; + } + + .p-image-preview-indicator { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + } + + .p-image-preview-container:hover > .p-image-preview-indicator { + opacity: 1; + cursor: pointer; + } + + .p-image-preview-container > img { + cursor: pointer; + } + + .p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-preview { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; + } + + .p-image-preview-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + .p-image-preview-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + .p-image-preview-enter-from, + .p-image-preview-leave-to { + opacity: 0; + transform: scale(0.7); + } } `; diff --git a/components/lib/inlinemessage/BaseInlineMessage.vue b/components/lib/inlinemessage/BaseInlineMessage.vue index 8d71635a8..bd70d6436 100644 --- a/components/lib/inlinemessage/BaseInlineMessage.vue +++ b/components/lib/inlinemessage/BaseInlineMessage.vue @@ -3,20 +3,22 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-inline-message { - display: inline-flex; - align-items: center; - justify-content: center; - vertical-align: top; -} - -.p-inline-message-icon-only .p-inline-message-text { - visibility: hidden; - width: 0; -} - -.p-fluid .p-inline-message { - display: flex; +@layer primevue { + .p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: top; + } + + .p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; + } + + .p-fluid .p-inline-message { + display: flex; + } } `; diff --git a/components/lib/inplace/BaseInplace.vue b/components/lib/inplace/BaseInplace.vue index 6b8da5e11..36e3503b9 100644 --- a/components/lib/inplace/BaseInplace.vue +++ b/components/lib/inplace/BaseInplace.vue @@ -3,22 +3,24 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-inplace .p-inplace-display { - display: inline; - cursor: pointer; -} - -.p-inplace .p-inplace-content { - display: inline; -} - -.p-fluid .p-inplace.p-inplace-closable .p-inplace-content { - display: flex; -} - -.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { - flex: 1 1 auto; - width: 1%; +@layer primevue { + .p-inplace .p-inplace-display { + display: inline; + cursor: pointer; + } + + .p-inplace .p-inplace-content { + display: inline; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content { + display: flex; + } + + .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext { + flex: 1 1 auto; + width: 1%; + } } `; diff --git a/components/lib/inputnumber/BaseInputNumber.vue b/components/lib/inputnumber/BaseInputNumber.vue index 66daa2eb3..866d66cf5 100644 --- a/components/lib/inputnumber/BaseInputNumber.vue +++ b/components/lib/inputnumber/BaseInputNumber.vue @@ -3,105 +3,107 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-inputnumber { - display: inline-flex; -} - -.p-inputnumber-button { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; -} - -.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, -.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { - display: none; -} - -.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - padding: 0; -} - -.p-inputnumber-buttons-stacked .p-inputnumber-input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: 0; - padding: 0; -} - -.p-inputnumber-buttons-stacked .p-inputnumber-button-group { - display: flex; - flex-direction: column; -} - -.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { - flex: 1 1 auto; -} - -.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { - order: 3; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.p-inputnumber-buttons-horizontal .p-inputnumber-input { - order: 2; - border-radius: 0; -} - -.p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { - order: 1; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.p-inputnumber-buttons-vertical { - flex-direction: column; -} - -.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { - order: 1; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - width: 100%; -} - -.p-inputnumber-buttons-vertical .p-inputnumber-input { - order: 2; - border-radius: 0; - text-align: center; -} - -.p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { - order: 3; - border-top-left-radius: 0; - border-top-right-radius: 0; - width: 100%; -} - -.p-inputnumber-input { - flex: 1 1 auto; -} - -.p-fluid .p-inputnumber { - width: 100%; -} - -.p-fluid .p-inputnumber .p-inputnumber-input { - width: 1%; -} - -.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { - width: 100%; +@layer primevue { + .p-inputnumber { + display: inline-flex; + } + + .p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label, + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label { + display: none; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down { + border-top-left-radius: 0; + border-top-right-radius: 0; + border-bottom-left-radius: 0; + padding: 0; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + } + + .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button { + flex: 1 1 auto; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up { + order: 3; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; + } + + .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down { + order: 1; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-inputnumber-buttons-vertical { + flex-direction: column; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up { + order: 1; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + width: 100%; + } + + .p-inputnumber-buttons-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; + } + + .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down { + order: 3; + border-top-left-radius: 0; + border-top-right-radius: 0; + width: 100%; + } + + .p-inputnumber-input { + flex: 1 1 auto; + } + + .p-fluid .p-inputnumber { + width: 100%; + } + + .p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; + } + + .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input { + width: 100%; + } } `; diff --git a/components/lib/inputswitch/BaseInputSwitch.vue b/components/lib/inputswitch/BaseInputSwitch.vue index 2c6db8a19..f55a49ac4 100644 --- a/components/lib/inputswitch/BaseInputSwitch.vue +++ b/components/lib/inputswitch/BaseInputSwitch.vue @@ -3,24 +3,26 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-inputswitch { - display: inline-block; -} - -.p-inputswitch-slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 1px solid transparent; -} - -.p-inputswitch-slider:before { - position: absolute; - content: ''; - top: 50%; +@layer primevue { + .p-inputswitch { + display: inline-block; + } + + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + + .p-inputswitch-slider:before { + position: absolute; + content: ''; + top: 50%; + } } `; diff --git a/components/lib/knob/BaseKnob.vue b/components/lib/knob/BaseKnob.vue index 6e99a9e30..9cab31dd9 100644 --- a/components/lib/knob/BaseKnob.vue +++ b/components/lib/knob/BaseKnob.vue @@ -8,18 +8,20 @@ const styles = ` stroke-dashoffset: 0; } } -.p-knob-range { - fill: none; - transition: stroke 0.1s ease-in; -} -.p-knob-value { - animation-name: dash-frame; - animation-fill-mode: forwards; - fill: none; -} -.p-knob-text { - font-size: 1.3rem; - text-align: center; +@layer primevue { + .p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; + } + .p-knob-value { + animation-name: dash-frame; + animation-fill-mode: forwards; + fill: none; + } + .p-knob-text { + font-size: 1.3rem; + text-align: center; + } } `; diff --git a/components/lib/listbox/BaseListbox.vue b/components/lib/listbox/BaseListbox.vue index 65bf45d00..8badb6748 100644 --- a/components/lib/listbox/BaseListbox.vue +++ b/components/lib/listbox/BaseListbox.vue @@ -3,38 +3,40 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-listbox-list-wrapper { - overflow: auto; -} - -.p-listbox-list { - list-style-type: none; - margin: 0; - padding: 0; -} - -.p-listbox-item { - cursor: pointer; - position: relative; - overflow: hidden; -} - -.p-listbox-item-group { - cursor: auto; -} - -.p-listbox-filter-container { - position: relative; -} - -.p-listbox-filter-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; -} - -.p-listbox-filter { - width: 100%; +@layer primevue { + .p-listbox-list-wrapper { + overflow: auto; + } + + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + + .p-listbox-item-group { + cursor: auto; + } + + .p-listbox-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-listbox-filter { + width: 100%; + } } `; diff --git a/components/lib/megamenu/BaseMegaMenu.vue b/components/lib/megamenu/BaseMegaMenu.vue index a290d1a06..22d9eb7dd 100644 --- a/components/lib/megamenu/BaseMegaMenu.vue +++ b/components/lib/megamenu/BaseMegaMenu.vue @@ -3,115 +3,117 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-megamenu { - display: flex; -} - -.p-megamenu-root-list { - margin: 0; - padding: 0; - list-style: none; -} - -.p-megamenu-root-list > .p-menuitem { - position: relative; -} - -.p-megamenu .p-menuitem-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; -} - -.p-megamenu .p-menuitem-text { - line-height: 1; -} - -.p-megamenu-panel { - display: none; - position: absolute; - width: auto; - z-index: 1; -} - -.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { - display: block; -} - -.p-megamenu-submenu { - margin: 0; - padding: 0; - list-style: none; -} - -/* Horizontal */ -.p-megamenu-horizontal { - align-items: center; -} - -.p-megamenu-horizontal .p-megamenu-root-list { - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.p-megamenu-horizontal .p-megamenu-end { - margin-left: auto; - align-self: center; -} - -/* Vertical */ -.p-megamenu-vertical { - flex-direction: column; -} - -.p-megamenu-vertical .p-megamenu-root-list { - flex-direction: column; -} - -.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { - left: 100%; - top: 0; -} - -.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { - margin-left: auto; -} - -.p-megamenu-grid { - display: flex; -} - -.p-megamenu-col-2, -.p-megamenu-col-3, -.p-megamenu-col-4, -.p-megamenu-col-6, -.p-megamenu-col-12 { - flex: 0 0 auto; - padding: 0.5rem; -} - -.p-megamenu-col-2 { - width: 16.6667%; -} - -.p-megamenu-col-3 { - width: 25%; -} - -.p-megamenu-col-4 { - width: 33.3333%; -} - -.p-megamenu-col-6 { - width: 50%; -} - -.p-megamenu-col-12 { - width: 100%; +@layer primevue { + .p-megamenu { + display: flex; + } + + .p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-megamenu-root-list > .p-menuitem { + position: relative; + } + + .p-megamenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-megamenu .p-menuitem-text { + line-height: 1; + } + + .p-megamenu-panel { + display: none; + position: absolute; + width: auto; + z-index: 1; + } + + .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + display: block; + } + + .p-megamenu-submenu { + margin: 0; + padding: 0; + list-style: none; + } + + /* Horizontal */ + .p-megamenu-horizontal { + align-items: center; + } + + .p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; + } + + /* Vertical */ + .p-megamenu-vertical { + flex-direction: column; + } + + .p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel { + left: 100%; + top: 0; + } + + .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon { + margin-left: auto; + } + + .p-megamenu-grid { + display: flex; + } + + .p-megamenu-col-2, + .p-megamenu-col-3, + .p-megamenu-col-4, + .p-megamenu-col-6, + .p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; + } + + .p-megamenu-col-2 { + width: 16.6667%; + } + + .p-megamenu-col-3 { + width: 25%; + } + + .p-megamenu-col-4 { + width: 33.3333%; + } + + .p-megamenu-col-6 { + width: 50%; + } + + .p-megamenu-col-12 { + width: 100%; + } } `; diff --git a/components/lib/menu/BaseMenu.vue b/components/lib/menu/BaseMenu.vue index 23e99a324..8f556ab52 100644 --- a/components/lib/menu/BaseMenu.vue +++ b/components/lib/menu/BaseMenu.vue @@ -3,23 +3,25 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-menu ul { - margin: 0; - padding: 0; - list-style: none; -} - -.p-menu .p-menuitem-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; -} - -.p-menu .p-menuitem-text { - line-height: 1; +@layer primevue { + .p-menu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menu .p-menuitem-text { + line-height: 1; + } } `; diff --git a/components/lib/menubar/BaseMenubar.vue b/components/lib/menubar/BaseMenubar.vue index 92a7e80a9..ae164a153 100644 --- a/components/lib/menubar/BaseMenubar.vue +++ b/components/lib/menubar/BaseMenubar.vue @@ -3,76 +3,78 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-menubar { - display: flex; - align-items: center; -} - -.p-menubar ul { - margin: 0; - padding: 0; - list-style: none; -} - -.p-menubar .p-menuitem-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; -} - -.p-menubar .p-menuitem-text { - line-height: 1; -} - -.p-menubar .p-menuitem { - position: relative; -} - -.p-menubar-root-list { - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.p-menubar-root-list > li ul { - display: none; - z-index: 1; -} - -.p-menubar-root-list > .p-menuitem-active > .p-submenu-list { - display: block; -} - -.p-menubar .p-submenu-list { - display: none; - position: absolute; - z-index: 1; -} - -.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { - display: block; - left: 100%; - top: 0; -} - -.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { - margin-left: auto; -} - -.p-menubar .p-menubar-end { - margin-left: auto; - align-self: center; -} - -.p-menubar-button { - display: none; - cursor: pointer; - align-items: center; - justify-content: center; - text-decoration: none; +@layer primevue { + .p-menubar { + display: flex; + align-items: center; + } + + .p-menubar ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-menubar .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-menubar .p-menuitem-text { + line-height: 1; + } + + .p-menubar .p-menuitem { + position: relative; + } + + .p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; + } + + .p-menubar-root-list > li ul { + display: none; + z-index: 1; + } + + .p-menubar-root-list > .p-menuitem-active > .p-submenu-list { + display: block; + } + + .p-menubar .p-submenu-list { + display: none; + position: absolute; + z-index: 1; + } + + .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } + + .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-end { + margin-left: auto; + align-self: center; + } + + .p-menubar-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } } `; diff --git a/components/lib/message/BaseMessage.vue b/components/lib/message/BaseMessage.vue index 13b145cf1..f11279a2a 100644 --- a/components/lib/message/BaseMessage.vue +++ b/components/lib/message/BaseMessage.vue @@ -3,53 +3,55 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-message-wrapper { - display: flex; - align-items: center; -} - -.p-message-icon { - flex-shrink: 0; -} - -.p-message-close { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.p-message-close.p-link { - margin-left: auto; - overflow: hidden; - position: relative; -} - -.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 !important; -} - -.p-message-leave-active { - overflow: hidden; - transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; -} - -.p-message-leave-active .p-message-close { - display: none; +@layer primevue { + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-icon { + flex-shrink: 0; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .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 !important; + } + + .p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; + } + + .p-message-leave-active .p-message-close { + display: none; + } } `; diff --git a/components/lib/multiselect/BaseMultiSelect.vue b/components/lib/multiselect/BaseMultiSelect.vue index 9b681e1a1..5f88eb37d 100644 --- a/components/lib/multiselect/BaseMultiSelect.vue +++ b/components/lib/multiselect/BaseMultiSelect.vue @@ -3,110 +3,112 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-multiselect { - display: inline-flex; - cursor: pointer; - user-select: none; -} - -.p-multiselect-trigger { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.p-multiselect-label-container { - overflow: hidden; - flex: 1 1 auto; - cursor: pointer; -} - -.p-multiselect-label { - display: block; - white-space: nowrap; - cursor: pointer; - overflow: hidden; - text-overflow: ellipsis; -} - -.p-multiselect-label-empty { - overflow: hidden; - visibility: hidden; -} - -.p-multiselect-token { - cursor: default; - display: inline-flex; - align-items: center; - flex: 0 0 auto; -} - -.p-multiselect-token-icon { - cursor: pointer; -} - -.p-multiselect .p-multiselect-panel { - min-width: 100%; -} - -.p-multiselect-items-wrapper { - overflow: auto; -} - -.p-multiselect-items { - margin: 0; - padding: 0; - list-style-type: none; -} - -.p-multiselect-item { - cursor: pointer; - display: flex; - align-items: center; - font-weight: normal; - white-space: nowrap; - position: relative; - overflow: hidden; -} - -.p-multiselect-item-group { - cursor: auto; -} - -.p-multiselect-header { - display: flex; - align-items: center; - justify-content: space-between; -} - -.p-multiselect-filter-container { - position: relative; - flex: 1 1 auto; -} - -.p-multiselect-filter-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; -} - -.p-multiselect-filter-container .p-inputtext { - width: 100%; -} - -.p-multiselect-close { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - overflow: hidden; - position: relative; - margin-left: auto; -} - -.p-fluid .p-multiselect { - display: flex; +@layer primevue { + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-multiselect-token-icon { + cursor: pointer; + } + + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + + .p-multiselect-items-wrapper { + overflow: auto; + } + + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-multiselect-item-group { + cursor: auto; + } + + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-fluid .p-multiselect { + display: flex; + } } `; diff --git a/components/lib/orderlist/BaseOrderList.vue b/components/lib/orderlist/BaseOrderList.vue index a78d55eb0..36950f340 100644 --- a/components/lib/orderlist/BaseOrderList.vue +++ b/components/lib/orderlist/BaseOrderList.vue @@ -3,42 +3,44 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-orderlist { - display: flex; -} - -.p-orderlist-controls { - display: flex; - flex-direction: column; - justify-content: center; -} - -.p-orderlist-list-container { - flex: 1 1 auto; -} - -.p-orderlist-list { - list-style-type: none; - margin: 0; - padding: 0; - overflow: auto; - min-height: 12rem; - max-height: 24rem; -} - -.p-orderlist-item { - cursor: pointer; - overflow: hidden; - position: relative; -} - -.p-orderlist.p-state-disabled .p-orderlist-item, -.p-orderlist.p-state-disabled .p-button { - cursor: default; -} - -.p-orderlist.p-state-disabled .p-orderlist-list { - overflow: hidden; +@layer primevue { + .p-orderlist { + display: flex; + } + + .p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-orderlist-list-container { + flex: 1 1 auto; + } + + .p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-orderlist.p-state-disabled .p-orderlist-item, + .p-orderlist.p-state-disabled .p-button { + cursor: default; + } + + .p-orderlist.p-state-disabled .p-orderlist-list { + overflow: hidden; + } } `; diff --git a/components/lib/organizationchart/BaseOrganizationChart.vue b/components/lib/organizationchart/BaseOrganizationChart.vue index cb77fccf1..9cad4b9c8 100644 --- a/components/lib/organizationchart/BaseOrganizationChart.vue +++ b/components/lib/organizationchart/BaseOrganizationChart.vue @@ -3,57 +3,59 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-organizationchart-table { - border-spacing: 0; - border-collapse: separate; - margin: 0 auto; -} - -.p-organizationchart-table > tbody > tr > td { - text-align: center; - vertical-align: top; - padding: 0 0.75rem; -} - -.p-organizationchart-node-content { - display: inline-block; - position: relative; -} - -.p-organizationchart-node-content .p-node-toggler { - position: absolute; - bottom: -0.75rem; - margin-left: -0.75rem; - z-index: 2; - left: 50%; - user-select: none; - cursor: pointer; - width: 1.5rem; - height: 1.5rem; - text-decoration: none; -} - -.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { - position: relative; - top: 0.25rem; -} - -.p-organizationchart-line-down { - margin: 0 auto; - height: 20px; - width: 1px; -} - -.p-organizationchart-line-right { - border-radius: 0px; -} - -.p-organizationchart-line-left { - border-radius: 0; -} - -.p-organizationchart-selectable-node { - cursor: pointer; +@layer primevue { + .p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; + } + + .p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + } + + .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon { + position: relative; + top: 0.25rem; + } + + .p-organizationchart-line-down { + margin: 0 auto; + height: 20px; + width: 1px; + } + + .p-organizationchart-line-right { + border-radius: 0px; + } + + .p-organizationchart-line-left { + border-radius: 0; + } + + .p-organizationchart-selectable-node { + cursor: pointer; + } } `; diff --git a/components/lib/overlaypanel/BaseOverlayPanel.vue b/components/lib/overlaypanel/BaseOverlayPanel.vue index 109d05336..d50c7a2b2 100644 --- a/components/lib/overlaypanel/BaseOverlayPanel.vue +++ b/components/lib/overlaypanel/BaseOverlayPanel.vue @@ -3,74 +3,76 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-overlaypanel { - margin-top: 10px; -} - -.p-overlaypanel-flipped { - margin-top: 0; - margin-bottom: 10px; -} - -.p-overlaypanel-close { - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - position: relative; -} - -/* Animation */ -.p-overlaypanel-enter-from { - opacity: 0; - transform: scaleY(0.8); -} - -.p-overlaypanel-leave-to { - opacity: 0; -} - -.p-overlaypanel-enter-active { - transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); -} - -.p-overlaypanel-leave-active { - transition: opacity 0.1s linear; -} - -.p-overlaypanel:after, -.p-overlaypanel:before { - bottom: 100%; - left: calc(var(--overlayArrowLeft, 0) + 1.25rem); - content: ' '; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -.p-overlaypanel:after { - border-width: 8px; - margin-left: -8px; -} - -.p-overlaypanel:before { - border-width: 10px; - margin-left: -10px; -} - -.p-overlaypanel-flipped:after, -.p-overlaypanel-flipped:before { - bottom: auto; - top: 100%; -} - -.p-overlaypanel.p-overlaypanel-flipped:after { - border-bottom-color: transparent; -} - -.p-overlaypanel.p-overlaypanel-flipped:before { - border-bottom-color: transparent; +@layer primevue { + .p-overlaypanel { + margin-top: 10px; + } + + .p-overlaypanel-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .p-overlaypanel-close { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + } + + /* Animation */ + .p-overlaypanel-enter-from { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-leave-to { + opacity: 0; + } + + .p-overlaypanel-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-leave-active { + transition: opacity 0.1s linear; + } + + .p-overlaypanel:after, + .p-overlaypanel:before { + bottom: 100%; + left: calc(var(--overlayArrowLeft, 0) + 1.25rem); + content: ' '; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + .p-overlaypanel:after { + border-width: 8px; + margin-left: -8px; + } + + .p-overlaypanel:before { + border-width: 10px; + margin-left: -10px; + } + + .p-overlaypanel-flipped:after, + .p-overlaypanel-flipped:before { + bottom: auto; + top: 100%; + } + + .p-overlaypanel.p-overlaypanel-flipped:after { + border-bottom-color: transparent; + } + + .p-overlaypanel.p-overlaypanel-flipped:before { + border-bottom-color: transparent; + } } `; diff --git a/components/lib/paginator/BasePaginator.vue b/components/lib/paginator/BasePaginator.vue index 2094c624a..8a8b00f81 100644 --- a/components/lib/paginator/BasePaginator.vue +++ b/components/lib/paginator/BasePaginator.vue @@ -3,44 +3,46 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-paginator-default { - display: flex; -} - -.p-paginator { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; -} - -.p-paginator-left-content { - margin-right: auto; -} - -.p-paginator-right-content { - margin-left: auto; -} - -.p-paginator-page, -.p-paginator-next, -.p-paginator-last, -.p-paginator-first, -.p-paginator-prev, -.p-paginator-current { - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - line-height: 1; - user-select: none; - overflow: hidden; - position: relative; -} - -.p-paginator-element:focus { - z-index: 1; - position: relative; +@layer primevue { + .p-paginator-default { + display: flex; + } + + .p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + } + + .p-paginator-left-content { + margin-right: auto; + } + + .p-paginator-right-content { + margin-left: auto; + } + + .p-paginator-page, + .p-paginator-next, + .p-paginator-last, + .p-paginator-first, + .p-paginator-prev, + .p-paginator-current { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + } + + .p-paginator-element:focus { + z-index: 1; + position: relative; + } } `; diff --git a/components/lib/panel/BasePanel.vue b/components/lib/panel/BasePanel.vue index 6ab5a1d9f..37ffee917 100644 --- a/components/lib/panel/BasePanel.vue +++ b/components/lib/panel/BasePanel.vue @@ -3,24 +3,26 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-panel-header { - display: flex; - justify-content: space-between; - align-items: center; -} - -.p-panel-title { - line-height: 1; -} - -.p-panel-header-icon { - display: inline-flex; - justify-content: center; - align-items: center; - cursor: pointer; - text-decoration: none; - overflow: hidden; - position: relative; +@layer primevue { + .p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + } + + .p-panel-title { + line-height: 1; + } + + .p-panel-header-icon { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; + overflow: hidden; + position: relative; + } } `; diff --git a/components/lib/panelmenu/BasePanelMenu.vue b/components/lib/panelmenu/BasePanelMenu.vue index 8a5dc32e2..d0db19ec0 100644 --- a/components/lib/panelmenu/BasePanelMenu.vue +++ b/components/lib/panelmenu/BasePanelMenu.vue @@ -3,37 +3,39 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-panelmenu .p-panelmenu-header-action { - display: flex; - align-items: center; - user-select: none; - cursor: pointer; - position: relative; - text-decoration: none; -} - -.p-panelmenu .p-panelmenu-header-action:focus { - z-index: 1; -} - -.p-panelmenu .p-submenu-list { - margin: 0; - padding: 0; - list-style: none; -} - -.p-panelmenu .p-menuitem-link { - display: flex; - align-items: center; - user-select: none; - cursor: pointer; - text-decoration: none; - position: relative; - overflow: hidden; -} - -.p-panelmenu .p-menuitem-text { - line-height: 1; +@layer primevue { + .p-panelmenu .p-panelmenu-header-action { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-action:focus { + z-index: 1; + } + + .p-panelmenu .p-submenu-list { + margin: 0; + padding: 0; + list-style: none; + } + + .p-panelmenu .p-menuitem-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + position: relative; + overflow: hidden; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } } `; diff --git a/components/lib/password/BasePassword.vue b/components/lib/password/BasePassword.vue index 50ddc09a0..6da5987f6 100644 --- a/components/lib/password/BasePassword.vue +++ b/components/lib/password/BasePassword.vue @@ -3,31 +3,33 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-password { - display: inline-flex; -} - -.p-password .p-password-panel { - min-width: 100%; -} - -.p-password-meter { - height: 10px; -} - -.p-password-strength { - height: 100%; - width: 0; - transition: width 1s ease-in-out; -} - -.p-fluid .p-password { - display: flex; -} - -.p-password-input::-ms-reveal, -.p-password-input::-ms-clear { - display: none; +@layer primevue { + .p-password { + display: inline-flex; + } + + .p-password .p-password-panel { + min-width: 100%; + } + + .p-password-meter { + height: 10px; + } + + .p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + } + + .p-fluid .p-password { + display: flex; + } + + .p-password-input::-ms-reveal, + .p-password-input::-ms-clear { + display: none; + } } `; diff --git a/components/lib/picklist/BasePickList.vue b/components/lib/picklist/BasePickList.vue index 7caeaaa4a..8b017f1ac 100644 --- a/components/lib/picklist/BasePickList.vue +++ b/components/lib/picklist/BasePickList.vue @@ -3,38 +3,40 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-picklist { - display: flex; -} - -.p-picklist-buttons { - display: flex; - flex-direction: column; - justify-content: center; -} - -.p-picklist-list-wrapper { - flex: 1 1 50%; -} - -.p-picklist-list { - list-style-type: none; - margin: 0; - padding: 0; - overflow: auto; - min-height: 12rem; - max-height: 24rem; -} - -.p-picklist-item { - cursor: pointer; - overflow: hidden; - position: relative; -} - -.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, -.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { - transition: none !important; +@layer primevue { + .p-picklist { + display: flex; + } + + .p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + } + + .p-picklist-list-wrapper { + flex: 1 1 50%; + } + + .p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + } + + .p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + } + + .p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to, + .p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to { + transition: none !important; + } } `; diff --git a/components/lib/progressbar/BaseProgressBar.vue b/components/lib/progressbar/BaseProgressBar.vue index 65a8e0aab..f731193d3 100644 --- a/components/lib/progressbar/BaseProgressBar.vue +++ b/components/lib/progressbar/BaseProgressBar.vue @@ -3,112 +3,114 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-progressbar { - position: relative; - overflow: hidden; -} - -.p-progressbar-determinate .p-progressbar-value { - height: 100%; - width: 0%; - position: absolute; - display: none; - border: 0 none; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; -} - -.p-progressbar-determinate .p-progressbar-label { - display: inline-flex; -} - -.p-progressbar-determinate .p-progressbar-value-animate { - transition: width 1s ease-in-out; -} - -.p-progressbar-indeterminate .p-progressbar-value::before { - content: ''; - position: absolute; - background-color: inherit; - top: 0; - left: 0; - bottom: 0; - will-change: left, right; - -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; - 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-color: inherit; - top: 0; - left: 0; - bottom: 0; - will-change: left, right; - -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; - animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; - -webkit-animation-delay: 1.15s; - animation-delay: 1.15s; -} - -@-webkit-keyframes p-progressbar-indeterminate-anim { - 0% { - left: -35%; - right: 100%; +@layer primevue { + .p-progressbar { + position: relative; + overflow: hidden; } - 60% { - left: 100%; - right: -90%; + + .p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; } - 100% { - left: 100%; - right: -90%; + + .p-progressbar-determinate .p-progressbar-label { + display: inline-flex; } -} -@keyframes p-progressbar-indeterminate-anim { - 0% { - left: -35%; - right: 100%; + + .p-progressbar-determinate .p-progressbar-value-animate { + transition: width 1s ease-in-out; } - 60% { - left: 100%; - right: -90%; + + .p-progressbar-indeterminate .p-progressbar-value::before { + content: ''; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } - 100% { - left: 100%; - right: -90%; + + .p-progressbar-indeterminate .p-progressbar-value::after { + content: ''; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + -webkit-animation-delay: 1.15s; + animation-delay: 1.15s; } -} - -@-webkit-keyframes p-progressbar-indeterminate-anim-short { - 0% { - left: -200%; - right: 100%; + + @-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } } - 60% { - left: 107%; - right: -8%; + @keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } } - 100% { - left: 107%; - right: -8%; + + @-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } } -} -@keyframes p-progressbar-indeterminate-anim-short { - 0% { - left: -200%; - right: 100%; - } - 60% { - left: 107%; - right: -8%; - } - 100% { - left: 107%; - right: -8%; + @keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } } } `; diff --git a/components/lib/progressspinner/BaseProgressSpinner.vue b/components/lib/progressspinner/BaseProgressSpinner.vue index a0337e7f2..f5227670a 100644 --- a/components/lib/progressspinner/BaseProgressSpinner.vue +++ b/components/lib/progressspinner/BaseProgressSpinner.vue @@ -3,30 +3,32 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-progress-spinner { - position: relative; - margin: 0 auto; - width: 100px; - height: 100px; - display: inline-block; -} - -.p-progress-spinner::before { - content: ''; - display: block; - padding-top: 100%; -} - -.p-progress-spinner-svg { - height: 100%; - transform-origin: center center; - width: 100%; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; +@layer primevue { + .p-progress-spinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; + } + + .p-progress-spinner::before { + content: ''; + display: block; + padding-top: 100%; + } + + .p-progress-spinner-svg { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } } `; diff --git a/components/lib/rating/BaseRating.vue b/components/lib/rating/BaseRating.vue index fc9cd06d4..3bd3582c0 100644 --- a/components/lib/rating/BaseRating.vue +++ b/components/lib/rating/BaseRating.vue @@ -3,20 +3,22 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-rating { - position: relative; - display: flex; - align-items: center; -} - -.p-rating-item { - display: inline-flex; - align-items: center; - cursor: pointer; -} - -.p-rating.p-readonly .p-rating-item { - cursor: default; +@layer primevue { + .p-rating { + position: relative; + display: flex; + align-items: center; + } + + .p-rating-item { + display: inline-flex; + align-items: center; + cursor: pointer; + } + + .p-rating.p-readonly .p-rating-item { + cursor: default; + } } `; diff --git a/components/lib/ripple/BaseRipple.js b/components/lib/ripple/BaseRipple.js index 0b35f3d56..e305e72ef 100644 --- a/components/lib/ripple/BaseRipple.js +++ b/components/lib/ripple/BaseRipple.js @@ -2,34 +2,36 @@ import BaseDirective from 'primevue/basedirective'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-ripple { - overflow: hidden; - position: relative; -} - -.p-ink { - display: block; - position: absolute; - background: rgba(255, 255, 255, 0.5); - border-radius: 100%; - transform: scale(0); - pointer-events: none; -} - -.p-ink-active { - animation: ripple 0.4s linear; -} - -.p-ripple-disabled .p-ink { - display: none !important; -} - @keyframes ripple { 100% { opacity: 0; transform: scale(2.5); } } + +@layer primevue { + .p-ripple { + overflow: hidden; + position: relative; + } + + .p-ink { + display: block; + position: absolute; + background: rgba(255, 255, 255, 0.5); + border-radius: 100%; + transform: scale(0); + pointer-events: none; + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none !important; + } +} `; const classes = { diff --git a/components/lib/scrollpanel/BaseScrollPanel.vue b/components/lib/scrollpanel/BaseScrollPanel.vue index ff1f8c810..699aae84c 100644 --- a/components/lib/scrollpanel/BaseScrollPanel.vue +++ b/components/lib/scrollpanel/BaseScrollPanel.vue @@ -3,60 +3,62 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-scrollpanel-wrapper { - overflow: hidden; - width: 100%; - height: 100%; - position: relative; - z-index: 1; - float: left; -} - -.p-scrollpanel-content { - height: calc(100% + 18px); - width: calc(100% + 18px); - padding: 0 18px 18px 0; - position: relative; - overflow: scroll; - box-sizing: border-box; - scrollbar-width: none; -} - -.p-scrollpanel-content::-webkit-scrollbar { - display: none; -} - -.p-scrollpanel-bar { - position: relative; - background: #c1c1c1; - border-radius: 3px; - z-index: 2; - cursor: pointer; - opacity: 0; - transition: opacity 0.25s linear; -} - -.p-scrollpanel-bar-y { - width: 9px; - top: 0; -} - -.p-scrollpanel-bar-x { - height: 9px; - bottom: 0; -} - -.p-scrollpanel-hidden { - visibility: hidden; -} - -.p-scrollpanel:hover .p-scrollpanel-bar, -.p-scrollpanel:active .p-scrollpanel-bar { - opacity: 1; -} - -.p-scrollpanel-grabbed { - user-select: none; +@layer primevue { + .p-scrollpanel-wrapper { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; + } + + .p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: scroll; + box-sizing: border-box; + scrollbar-width: none; + } + + .p-scrollpanel-content::-webkit-scrollbar { + display: none; + } + + .p-scrollpanel-bar { + position: relative; + background: #c1c1c1; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + transition: opacity 0.25s linear; + } + + .p-scrollpanel-bar-y { + width: 9px; + top: 0; + } + + .p-scrollpanel-bar-x { + height: 9px; + bottom: 0; + } + + .p-scrollpanel-hidden { + visibility: hidden; + } + + .p-scrollpanel:hover .p-scrollpanel-bar, + .p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; + } + + .p-scrollpanel-grabbed { + user-select: none; + } } `; diff --git a/components/lib/scrolltop/BaseScrollTop.vue b/components/lib/scrolltop/BaseScrollTop.vue index 59471bd61..ee52caea4 100644 --- a/components/lib/scrolltop/BaseScrollTop.vue +++ b/components/lib/scrolltop/BaseScrollTop.vue @@ -3,37 +3,39 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-scrolltop { - position: fixed; - bottom: 20px; - right: 20px; - display: flex; - align-items: center; - justify-content: center; -} - -.p-scrolltop-sticky { - position: sticky; -} - -.p-scrolltop-sticky.p-link { - margin-left: auto; -} - -.p-scrolltop-enter-from { - opacity: 0; -} - -.p-scrolltop-enter-active { - transition: opacity 0.15s; -} - -.p-scrolltop.p-scrolltop-leave-to { - opacity: 0; -} - -.p-scrolltop-leave-active { - transition: opacity 0.15s; +@layer primevue { + .p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + } + + .p-scrolltop-sticky { + position: sticky; + } + + .p-scrolltop-sticky.p-link { + margin-left: auto; + } + + .p-scrolltop-enter-from { + opacity: 0; + } + + .p-scrolltop-enter-active { + transition: opacity 0.15s; + } + + .p-scrolltop.p-scrolltop-leave-to { + opacity: 0; + } + + .p-scrolltop-leave-active { + transition: opacity 0.15s; + } } `; diff --git a/components/lib/sidebar/BaseSidebar.vue b/components/lib/sidebar/BaseSidebar.vue index 78c9f6339..a197811e7 100644 --- a/components/lib/sidebar/BaseSidebar.vue +++ b/components/lib/sidebar/BaseSidebar.vue @@ -3,152 +3,154 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-sidebar-mask { - display: none; - pointer-events: none; - background-color: transparent; - transition-property: background-color; -} - -.p-sidebar-mask.p-component-overlay { - pointer-events: auto; -} - -.p-sidebar-visible { - display: flex; -} - -.p-sidebar { - display: flex; - flex-direction: column; - pointer-events: auto; - transform: translate3d(0px, 0px, 0px); - position: relative; - transition: transform 0.3s; -} - -.p-sidebar-content { - overflow-y: auto; - flex-grow: 1; -} - -.p-sidebar-header { - display: flex; - align-items: center; - justify-content: flex-end; - flex-shrink: 0; -} - -.p-sidebar-icon { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; -} - -.p-sidebar-full .p-sidebar { - transition: none; - transform: none; - width: 100vw !important; - height: 100vh !important; - max-height: 100%; - top: 0px !important; - left: 0px !important; -} - -/* Animation */ -/* Center */ -.p-sidebar-left .p-sidebar-enter-from, -.p-sidebar-left .p-sidebar-leave-to { - transform: translateX(-100%); -} -.p-sidebar-right .p-sidebar-enter-from, -.p-sidebar-right .p-sidebar-leave-to { - transform: translateX(100%); -} -.p-sidebar-top .p-sidebar-enter-from, -.p-sidebar-top .p-sidebar-leave-to { - transform: translateY(-100%); -} -.p-sidebar-bottom .p-sidebar-enter-from, -.p-sidebar-bottom .p-sidebar-leave-to { - transform: translateY(100%); -} -.p-sidebar-full .p-sidebar-enter-from, -.p-sidebar-full .p-sidebar-leave-to { - opacity: 0; -} -.p-sidebar-full .p-sidebar-enter-active, -.p-sidebar-full .p-sidebar-leave-active { - transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); -} - -/* Size */ -.p-sidebar-left .p-sidebar { - width: 20rem; - height: 100%; -} - -.p-sidebar-right .p-sidebar { - width: 20rem; - height: 100%; -} - -.p-sidebar-top .p-sidebar { - height: 10rem; - width: 100%; -} - -.p-sidebar-bottom .p-sidebar { - height: 10rem; - width: 100%; -} - -.p-sidebar-left .p-sidebar-sm, -.p-sidebar-right .p-sidebar-sm { - width: 20rem; -} - -.p-sidebar-left .p-sidebar-md, -.p-sidebar-right .p-sidebar-md { - width: 40rem; -} - -.p-sidebar-left .p-sidebar-lg, -.p-sidebar-right .p-sidebar-lg { - width: 60rem; -} - -.p-sidebar-top .p-sidebar-sm, -.p-sidebar-bottom .p-sidebar-sm { - height: 10rem; -} - -.p-sidebar-top .p-sidebar-md, -.p-sidebar-bottom .p-sidebar-md { - height: 20rem; -} - -.p-sidebar-top .p-sidebar-lg, -.p-sidebar-bottom .p-sidebar-lg { - height: 30rem; -} - -.p-sidebar-left .p-sidebar-content, -.p-sidebar-right .p-sidebar-content, -.p-sidebar-top .p-sidebar-content, -.p-sidebar-bottom .p-sidebar-content { - width: 100%; - height: 100%; -} - -@media screen and (max-width: 64em) { - .p-sidebar-left .p-sidebar-lg, - .p-sidebar-left .p-sidebar-md, - .p-sidebar-right .p-sidebar-lg, - .p-sidebar-right .p-sidebar-md { +@layer primevue { + .p-sidebar-mask { + display: none; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: flex-end; + flex-shrink: 0; + } + + .p-sidebar-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-sidebar-full .p-sidebar { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + /* Animation */ + /* Center */ + .p-sidebar-left .p-sidebar-enter-from, + .p-sidebar-left .p-sidebar-leave-to { + transform: translateX(-100%); + } + .p-sidebar-right .p-sidebar-enter-from, + .p-sidebar-right .p-sidebar-leave-to { + transform: translateX(100%); + } + .p-sidebar-top .p-sidebar-enter-from, + .p-sidebar-top .p-sidebar-leave-to { + transform: translateY(-100%); + } + .p-sidebar-bottom .p-sidebar-enter-from, + .p-sidebar-bottom .p-sidebar-leave-to { + transform: translateY(100%); + } + .p-sidebar-full .p-sidebar-enter-from, + .p-sidebar-full .p-sidebar-leave-to { + opacity: 0; + } + .p-sidebar-full .p-sidebar-enter-active, + .p-sidebar-full .p-sidebar-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + /* Size */ + .p-sidebar-left .p-sidebar { width: 20rem; + height: 100%; + } + + .p-sidebar-right .p-sidebar { + width: 20rem; + height: 100%; + } + + .p-sidebar-top .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-bottom .p-sidebar { + height: 10rem; + width: 100%; + } + + .p-sidebar-left .p-sidebar-sm, + .p-sidebar-right .p-sidebar-sm { + width: 20rem; + } + + .p-sidebar-left .p-sidebar-md, + .p-sidebar-right .p-sidebar-md { + width: 40rem; + } + + .p-sidebar-left .p-sidebar-lg, + .p-sidebar-right .p-sidebar-lg { + width: 60rem; + } + + .p-sidebar-top .p-sidebar-sm, + .p-sidebar-bottom .p-sidebar-sm { + height: 10rem; + } + + .p-sidebar-top .p-sidebar-md, + .p-sidebar-bottom .p-sidebar-md { + height: 20rem; + } + + .p-sidebar-top .p-sidebar-lg, + .p-sidebar-bottom .p-sidebar-lg { + height: 30rem; + } + + .p-sidebar-left .p-sidebar-content, + .p-sidebar-right .p-sidebar-content, + .p-sidebar-top .p-sidebar-content, + .p-sidebar-bottom .p-sidebar-content { + width: 100%; + height: 100%; + } + + @media screen and (max-width: 64em) { + .p-sidebar-left .p-sidebar-lg, + .p-sidebar-left .p-sidebar-md, + .p-sidebar-right .p-sidebar-lg, + .p-sidebar-right .p-sidebar-md { + width: 20rem; + } } } `; diff --git a/components/lib/skeleton/BaseSkeleton.vue b/components/lib/skeleton/BaseSkeleton.vue index ee8bb7e0f..c371de668 100644 --- a/components/lib/skeleton/BaseSkeleton.vue +++ b/components/lib/skeleton/BaseSkeleton.vue @@ -3,36 +3,38 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-skeleton { - overflow: hidden; -} - -.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; -} - -.p-skeleton.p-skeleton-circle { - border-radius: 50%; -} - -.p-skeleton-none::after { - animation: none; -} - -@keyframes p-skeleton-animation { - from { - transform: translateX(-100%); +@layer primevue { + .p-skeleton { + overflow: hidden; } - to { - transform: translateX(100%); + + .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; + } + + .p-skeleton.p-skeleton-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } + + @keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } } } `; diff --git a/components/lib/slider/BaseSlider.vue b/components/lib/slider/BaseSlider.vue index b47bf591b..6c0a188da 100644 --- a/components/lib/slider/BaseSlider.vue +++ b/components/lib/slider/BaseSlider.vue @@ -3,42 +3,44 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-slider { - position: relative; -} - -.p-slider .p-slider-handle { - cursor: grab; - touch-action: none; - display: block; -} - -.p-slider-range { - display: block; -} - -.p-slider-horizontal .p-slider-range { - top: 0; - left: 0; - height: 100%; -} - -.p-slider-horizontal .p-slider-handle { - top: 50%; -} - -.p-slider-vertical { - height: 100px; -} - -.p-slider-vertical .p-slider-handle { - left: 50%; -} - -.p-slider-vertical .p-slider-range { - bottom: 0; - left: 0; - width: 100%; +@layer primevue { + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + cursor: grab; + touch-action: none; + display: block; + } + + .p-slider-range { + display: block; + } + + .p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; + } + + .p-slider-horizontal .p-slider-handle { + top: 50%; + } + + .p-slider-vertical { + height: 100px; + } + + .p-slider-vertical .p-slider-handle { + left: 50%; + } + + .p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; + } } `; diff --git a/components/lib/speeddial/BaseSpeedDial.vue b/components/lib/speeddial/BaseSpeedDial.vue index dad488019..40e073895 100644 --- a/components/lib/speeddial/BaseSpeedDial.vue +++ b/components/lib/speeddial/BaseSpeedDial.vue @@ -3,81 +3,83 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-speeddial { - position: absolute; - display: flex; -} - -.p-speeddial-button { - z-index: 1; -} - -.p-speeddial-list { - margin: 0; - padding: 0; - list-style: none; - display: flex; - align-items: center; - justify-content: center; - transition: top 0s linear 0.2s; - pointer-events: none; - z-index: 2; -} - -.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-action { - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - position: relative; - overflow: hidden; -} - -.p-speeddial-circle .p-speeddial-item, -.p-speeddial-semi-circle .p-speeddial-item, -.p-speeddial-quarter-circle .p-speeddial-item { - position: absolute; -} - -.p-speeddial-rotate { - transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - will-change: transform; -} - -.p-speeddial-mask { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - opacity: 0; - transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.p-speeddial-mask-visible { - pointer-events: none; - opacity: 1; - transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.p-speeddial-opened .p-speeddial-list { - pointer-events: auto; -} - -.p-speeddial-opened .p-speeddial-item { - transform: scale(1); - opacity: 1; -} - -.p-speeddial-opened .p-speeddial-rotate { - transform: rotate(45deg); +@layer primevue { + .p-speeddial { + position: absolute; + display: flex; + } + + .p-speeddial-button { + z-index: 1; + } + + .p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear 0.2s; + pointer-events: none; + z-index: 2; + } + + .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-action { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + overflow: hidden; + } + + .p-speeddial-circle .p-speeddial-item, + .p-speeddial-semi-circle .p-speeddial-item, + .p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; + } + + .p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + will-change: transform; + } + + .p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); + } + + .p-speeddial-opened .p-speeddial-list { + pointer-events: auto; + } + + .p-speeddial-opened .p-speeddial-item { + transform: scale(1); + opacity: 1; + } + + .p-speeddial-opened .p-speeddial-rotate { + transform: rotate(45deg); + } } `; diff --git a/components/lib/splitbutton/BaseSplitButton.vue b/components/lib/splitbutton/BaseSplitButton.vue index 44e140158..eb78bc338 100644 --- a/components/lib/splitbutton/BaseSplitButton.vue +++ b/components/lib/splitbutton/BaseSplitButton.vue @@ -3,36 +3,38 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-splitbutton { - display: inline-flex; - position: relative; -} - -.p-splitbutton .p-splitbutton-defaultbutton, -.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, -.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button { - flex: 1 1 auto; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: 0 none; -} - -.p-splitbutton-menubutton, -.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, -.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { - display: flex; - align-items: center; - justify-content: center; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.p-splitbutton .p-menu { - min-width: 100%; -} - -.p-fluid .p-splitbutton { - display: flex; +@layer primevue { + .p-splitbutton { + display: inline-flex; + position: relative; + } + + .p-splitbutton .p-splitbutton-defaultbutton, + .p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button, + .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; + } + + .p-splitbutton-menubutton, + .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button, + .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-splitbutton .p-menu { + min-width: 100%; + } + + .p-fluid .p-splitbutton { + display: flex; + } } `; diff --git a/components/lib/splitter/BaseSplitter.vue b/components/lib/splitter/BaseSplitter.vue index 5dfcbbd3f..a74426526 100644 --- a/components/lib/splitter/BaseSplitter.vue +++ b/components/lib/splitter/BaseSplitter.vue @@ -3,50 +3,52 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-splitter { - display: flex; - flex-wrap: nowrap; -} - -.p-splitter-vertical { - flex-direction: column; -} - -.p-splitter-gutter { - flex-grow: 0; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - cursor: col-resize; -} - -.p-splitter-horizontal.p-splitter-resizing { - cursor: col-resize; - user-select: none; -} - -.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { - height: 24px; - width: 100%; -} - -.p-splitter-horizontal > .p-splitter-gutter { - cursor: col-resize; -} - -.p-splitter-vertical.p-splitter-resizing { - cursor: row-resize; - user-select: none; -} - -.p-splitter-vertical > .p-splitter-gutter { - cursor: row-resize; -} - -.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { - width: 24px; - height: 100%; +@layer primevue { + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: col-resize; + } + + .p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; + } + + .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; + } + + .p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; + } + + .p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; + } + + .p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; + } + + .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; + } } `; diff --git a/components/lib/splitterpanel/BaseSplitterPanel.vue b/components/lib/splitterpanel/BaseSplitterPanel.vue index 79ec30933..3def7935d 100644 --- a/components/lib/splitterpanel/BaseSplitterPanel.vue +++ b/components/lib/splitterpanel/BaseSplitterPanel.vue @@ -3,17 +3,19 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-splitter-panel { - flex-grow: 1; -} - -.p-splitter-panel-nested { - display: flex; -} - -.p-splitter-panel .p-splitter { - flex-grow: 1; - border: 0 none; +@layer primevue { + .p-splitter-panel { + flex-grow: 1; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } } `; diff --git a/components/lib/steps/BaseSteps.vue b/components/lib/steps/BaseSteps.vue index e90d58ebc..de70e8506 100644 --- a/components/lib/steps/BaseSteps.vue +++ b/components/lib/steps/BaseSteps.vue @@ -3,56 +3,58 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-steps { - position: relative; -} - -.p-steps .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; - overflow: hidden; -} - -.p-steps-item .p-menuitem-link { - display: inline-flex; - flex-direction: column; - align-items: center; - overflow: hidden; - text-decoration: none; -} - -.p-steps.p-steps-readonly .p-steps-item { - cursor: auto; -} - -.p-steps-item.p-steps-current .p-menuitem-link { - cursor: default; -} - -.p-steps-title { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; -} - -.p-steps-number { - display: flex; - align-items: center; - justify-content: center; -} - -.p-steps-title { - display: block; +@layer primevue { + .p-steps { + position: relative; + } + + .p-steps .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; + overflow: hidden; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + } + + .p-steps.p-steps-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } } `; diff --git a/components/lib/tabmenu/BaseTabMenu.vue b/components/lib/tabmenu/BaseTabMenu.vue index 9d75493ec..946f46129 100644 --- a/components/lib/tabmenu/BaseTabMenu.vue +++ b/components/lib/tabmenu/BaseTabMenu.vue @@ -3,44 +3,46 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-tabmenu { - overflow-x: auto; -} - -.p-tabmenu-nav { - display: flex; - margin: 0; - padding: 0; - list-style-type: none; - flex-wrap: nowrap; -} - -.p-tabmenu-nav a { - cursor: pointer; - user-select: none; - display: flex; - align-items: center; - position: relative; - text-decoration: none; - text-decoration: none; - overflow: hidden; -} - -.p-tabmenu-nav a:focus { - z-index: 1; -} - -.p-tabmenu-nav .p-menuitem-text { - line-height: 1; -} - -.p-tabmenu-ink-bar { - display: none; - z-index: 1; -} - -.p-tabmenu::-webkit-scrollbar { - display: none; +@layer primevue { + .p-tabmenu { + overflow-x: auto; + } + + .p-tabmenu-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex-wrap: nowrap; + } + + .p-tabmenu-nav a { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + text-decoration: none; + overflow: hidden; + } + + .p-tabmenu-nav a:focus { + z-index: 1; + } + + .p-tabmenu-nav .p-menuitem-text { + line-height: 1; + } + + .p-tabmenu-ink-bar { + display: none; + z-index: 1; + } + + .p-tabmenu::-webkit-scrollbar { + display: none; + } } `; diff --git a/components/lib/tabview/BaseTabView.vue b/components/lib/tabview/BaseTabView.vue index 805bb3b6e..0c53a228f 100644 --- a/components/lib/tabview/BaseTabView.vue +++ b/components/lib/tabview/BaseTabView.vue @@ -3,74 +3,76 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-tabview-nav-container { - position: relative; -} - -.p-tabview-scrollable .p-tabview-nav-container { - overflow: hidden; -} - -.p-tabview-nav-content { - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - scrollbar-width: none; - overscroll-behavior: contain auto; -} - -.p-tabview-nav { - display: flex; - margin: 0; - padding: 0; - list-style-type: none; - flex: 1 1 auto; -} - -.p-tabview-header-action { - cursor: pointer; - user-select: none; - display: flex; - align-items: center; - position: relative; - text-decoration: none; - overflow: hidden; -} - -.p-tabview-ink-bar { - display: none; - z-index: 1; -} - -.p-tabview-header-action:focus { - z-index: 1; -} - -.p-tabview-title { - line-height: 1; - white-space: nowrap; -} - -.p-tabview-nav-btn { - position: absolute; - top: 0; - z-index: 2; - height: 100%; - display: flex; - align-items: center; - justify-content: center; -} - -.p-tabview-nav-prev { - left: 0; -} - -.p-tabview-nav-next { - right: 0; -} - -.p-tabview-nav-content::-webkit-scrollbar { - display: none; +@layer primevue { + .p-tabview-nav-container { + position: relative; + } + + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-header-action { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + + .p-tabview-header-action:focus { + z-index: 1; + } + + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .p-tabview-nav-prev { + left: 0; + } + + .p-tabview-nav-next { + right: 0; + } + + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } } `; diff --git a/components/lib/tag/BaseTag.vue b/components/lib/tag/BaseTag.vue index c4eca577b..5e794f945 100644 --- a/components/lib/tag/BaseTag.vue +++ b/components/lib/tag/BaseTag.vue @@ -3,20 +3,22 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-tag { - display: inline-flex; - align-items: center; - justify-content: center; -} - -.p-tag-icon, -.p-tag-value, -.p-tag-icon.pi { - line-height: 1.5; -} - -.p-tag.p-tag-rounded { - border-radius: 10rem; +@layer primevue { + .p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .p-tag-icon, + .p-tag-value, + .p-tag-icon.pi { + line-height: 1.5; + } + + .p-tag.p-tag-rounded { + border-radius: 10rem; + } } `; diff --git a/components/lib/terminal/BaseTerminal.vue b/components/lib/terminal/BaseTerminal.vue index bb6347387..2ab598401 100644 --- a/components/lib/terminal/BaseTerminal.vue +++ b/components/lib/terminal/BaseTerminal.vue @@ -3,27 +3,29 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-terminal { - height: 18rem; - overflow: auto; -} - -.p-terminal-prompt-container { - display: flex; - align-items: center; -} - -.p-terminal-input { - flex: 1 1 auto; - border: 0 none; - background-color: transparent; - color: inherit; - padding: 0; - outline: 0 none; -} - -.p-terminal-input::-ms-clear { - display: none; +@layer primevue { + .p-terminal { + height: 18rem; + overflow: auto; + } + + .p-terminal-prompt-container { + display: flex; + align-items: center; + } + + .p-terminal-input { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + } + + .p-terminal-input::-ms-clear { + display: none; + } } `; diff --git a/components/lib/textarea/BaseTextarea.vue b/components/lib/textarea/BaseTextarea.vue index 849970700..7866307f8 100644 --- a/components/lib/textarea/BaseTextarea.vue +++ b/components/lib/textarea/BaseTextarea.vue @@ -3,13 +3,15 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-inputtextarea-resizable { - overflow: hidden; - resize: none; -} - -.p-fluid .p-inputtextarea { - width: 100%; +@layer primevue { + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } } `; diff --git a/components/lib/tieredmenu/BaseTieredMenu.vue b/components/lib/tieredmenu/BaseTieredMenu.vue index d5ae5a406..da2f00c79 100644 --- a/components/lib/tieredmenu/BaseTieredMenu.vue +++ b/components/lib/tieredmenu/BaseTieredMenu.vue @@ -3,44 +3,46 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-tieredmenu ul { - margin: 0; - padding: 0; - list-style: none; -} - -.p-tieredmenu .p-submenu-list { - position: absolute; - min-width: 100%; - z-index: 1; - display: none; -} - -.p-tieredmenu .p-menuitem-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; -} - -.p-tieredmenu .p-menuitem-text { - line-height: 1; -} - -.p-tieredmenu .p-menuitem { - position: relative; -} - -.p-tieredmenu .p-menuitem-link .p-submenu-icon { - margin-left: auto; -} - -.p-tieredmenu .p-menuitem-active > .p-submenu-list { - display: block; - left: 100%; - top: 0; +@layer primevue { + .p-tieredmenu ul { + margin: 0; + padding: 0; + list-style: none; + } + + .p-tieredmenu .p-submenu-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; + } + + .p-tieredmenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + .p-tieredmenu .p-menuitem-text { + line-height: 1; + } + + .p-tieredmenu .p-menuitem { + position: relative; + } + + .p-tieredmenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list { + display: block; + left: 100%; + top: 0; + } } `; diff --git a/components/lib/timeline/BaseTimeline.vue b/components/lib/timeline/BaseTimeline.vue index 7f98df008..78a512a49 100644 --- a/components/lib/timeline/BaseTimeline.vue +++ b/components/lib/timeline/BaseTimeline.vue @@ -3,115 +3,117 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-timeline { - display: flex; - flex-grow: 1; - flex-direction: column; -} - -.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-event { - display: flex; - position: relative; - min-height: 70px; -} - -.p-timeline-event:last-child { - min-height: 0; -} - -.p-timeline-event-opposite { - flex: 1; - padding: 0 1rem; -} - -.p-timeline-event-content { - flex: 1; - padding: 0 1rem; -} - -.p-timeline-event-separator { - flex: 0; - display: flex; - align-items: center; - flex-direction: column; -} - -.p-timeline-event-marker { - display: flex; - align-self: baseline; -} - -.p-timeline-event-connector { - flex-grow: 1; -} - -.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%; -} - -.p-timeline-bottom .p-timeline-event { - flex-direction: column-reverse; -} - -.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { - flex-direction: column-reverse; +@layer primevue { + .p-timeline { + display: flex; + flex-grow: 1; + flex-direction: column; + } + + .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-event { + display: flex; + position: relative; + min-height: 70px; + } + + .p-timeline-event:last-child { + min-height: 0; + } + + .p-timeline-event-opposite { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-content { + flex: 1; + padding: 0 1rem; + } + + .p-timeline-event-separator { + flex: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .p-timeline-event-marker { + display: flex; + align-self: baseline; + } + + .p-timeline-event-connector { + flex-grow: 1; + } + + .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%; + } + + .p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; + } + + .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; + } } `; diff --git a/components/lib/toast/BaseToast.vue b/components/lib/toast/BaseToast.vue index 9c10c1426..87150bcca 100644 --- a/components/lib/toast/BaseToast.vue +++ b/components/lib/toast/BaseToast.vue @@ -3,77 +3,79 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-toast { - width: 25rem; - white-space: pre-line; - word-break: break-word; -} - -.p-toast-message-icon { - flex-shrink: 0; -} - -.p-toast-message-content { - display: flex; - align-items: flex-start; -} - -.p-toast-message-text { - flex: 1 1 auto; -} - -.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-icon-close { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; -} - -.p-toast-icon-close.p-link { - cursor: pointer; -} - -/* Animations */ -.p-toast-message-enter-from { - opacity: 0; - -webkit-transform: translateY(50%); - -ms-transform: translateY(50%); - 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 { - -webkit-transition: transform 0.3s, opacity 0.3s; - transition: transform 0.3s, opacity 0.3s; -} - -.p-toast-message-leave-active { - -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; - transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; +@layer primevue { + .p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; + } + + .p-toast-message-icon { + flex-shrink: 0; + } + + .p-toast-message-content { + display: flex; + align-items: flex-start; + } + + .p-toast-message-text { + flex: 1 1 auto; + } + + .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-icon-close { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-toast-icon-close.p-link { + cursor: pointer; + } + + /* Animations */ + .p-toast-message-enter-from { + opacity: 0; + -webkit-transform: translateY(50%); + -ms-transform: translateY(50%); + 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 { + -webkit-transition: transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-leave-active { + -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } } `; diff --git a/components/lib/toolbar/BaseToolbar.vue b/components/lib/toolbar/BaseToolbar.vue index 506173309..60c6d5fd6 100644 --- a/components/lib/toolbar/BaseToolbar.vue +++ b/components/lib/toolbar/BaseToolbar.vue @@ -3,24 +3,26 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-toolbar { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; -} - -.p-toolbar-group-start, -.p-toolbar-group-center, -.p-toolbar-group-end { - display: flex; - align-items: center; -} - -.p-toolbar-group-left, -.p-toolbar-group-right { - display: flex; - align-items: center; +@layer primevue { + .p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + .p-toolbar-group-start, + .p-toolbar-group-center, + .p-toolbar-group-end { + display: flex; + align-items: center; + } + + .p-toolbar-group-left, + .p-toolbar-group-right { + display: flex; + align-items: center; + } } `; diff --git a/components/lib/tooltip/BaseTooltip.js b/components/lib/tooltip/BaseTooltip.js index a4a65120c..b1366568f 100644 --- a/components/lib/tooltip/BaseTooltip.js +++ b/components/lib/tooltip/BaseTooltip.js @@ -2,59 +2,61 @@ import BaseDirective from 'primevue/basedirective'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-tooltip { - position:absolute; - display:none; - pointer-events:none; - padding: .25em .5rem; - max-width: 12.5rem; -} - -.p-tooltip.p-tooltip-right, -.p-tooltip.p-tooltip-left { - padding: 0 .25rem; -} - -.p-tooltip.p-tooltip-top, -.p-tooltip.p-tooltip-bottom { - padding:.25em 0; -} - -.p-tooltip .p-tooltip-text { - white-space: pre-line; - word-break: break-word; -} - -.p-tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.p-tooltip-right .p-tooltip-arrow { - margin-top: -.25rem; - border-width: .25em .25em .25em 0; -} - -.p-tooltip-left .p-tooltip-arrow { - margin-top: -.25rem; - border-width: .25em 0 .25em .25rem; -} - -.p-tooltip.p-tooltip-top { - padding: .25em 0; -} - -.p-tooltip-top .p-tooltip-arrow { - margin-left: -.25rem; - border-width: .25em .25em 0; -} - -.p-tooltip-bottom .p-tooltip-arrow { - margin-left: -.25rem; - border-width: 0 .25em .25rem; +@layer primevue { + .p-tooltip { + position:absolute; + display:none; + pointer-events:none; + padding: .25em .5rem; + max-width: 12.5rem; + } + + .p-tooltip.p-tooltip-right, + .p-tooltip.p-tooltip-left { + padding: 0 .25rem; + } + + .p-tooltip.p-tooltip-top, + .p-tooltip.p-tooltip-bottom { + padding:.25em 0; + } + + .p-tooltip .p-tooltip-text { + white-space: pre-line; + word-break: break-word; + } + + .p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } + + .p-tooltip-right .p-tooltip-arrow { + margin-top: -.25rem; + border-width: .25em .25em .25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + margin-top: -.25rem; + border-width: .25em 0 .25em .25rem; + } + + .p-tooltip.p-tooltip-top { + padding: .25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + margin-left: -.25rem; + border-width: .25em .25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + margin-left: -.25rem; + border-width: 0 .25em .25rem; + } } `; diff --git a/components/lib/tree/BaseTree.vue b/components/lib/tree/BaseTree.vue index 10a66a72c..85d1d75c2 100644 --- a/components/lib/tree/BaseTree.vue +++ b/components/lib/tree/BaseTree.vue @@ -3,86 +3,88 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-tree-container { - margin: 0; - padding: 0; - list-style-type: none; - overflow: auto; -} - -.p-treenode-children { - margin: 0; - padding: 0; - list-style-type: none; -} - -.p-tree-wrapper { - overflow: auto; -} - -.p-treenode-selectable { - cursor: pointer; - user-select: none; -} - -.p-tree-toggler { - cursor: pointer; - user-select: none; - display: inline-flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - flex-shrink: 0; -} - -.p-treenode-leaf > .p-treenode-content .p-tree-toggler { - visibility: hidden; -} - -.p-treenode-content { - display: flex; - align-items: center; -} - -.p-tree-filter { - width: 100%; -} - -.p-tree-filter-container { - position: relative; - display: block; - width: 100%; -} - -.p-tree-filter-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; -} - -.p-tree-loading { - position: relative; - min-height: 4rem; -} - -.p-tree .p-tree-loading-overlay { - 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-wrapper { - flex: 1; +@layer primevue { + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-tree-wrapper { + overflow: auto; + } + + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + + .p-treenode-content { + display: flex; + align-items: center; + } + + .p-tree-filter { + width: 100%; + } + + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-tree-loading { + position: relative; + min-height: 4rem; + } + + .p-tree .p-tree-loading-overlay { + 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-wrapper { + flex: 1; + } } `; diff --git a/components/lib/treeselect/BaseTreeSelect.vue b/components/lib/treeselect/BaseTreeSelect.vue index 699bece16..49fc00227 100644 --- a/components/lib/treeselect/BaseTreeSelect.vue +++ b/components/lib/treeselect/BaseTreeSelect.vue @@ -3,55 +3,57 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-treeselect { - display: inline-flex; - cursor: pointer; - user-select: none; -} - -.p-treeselect-trigger { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.p-treeselect-label-container { - overflow: hidden; - flex: 1 1 auto; - cursor: pointer; -} - -.p-treeselect-label { - display: block; - white-space: nowrap; - cursor: pointer; - overflow: hidden; - text-overflow: ellipsis; -} - -.p-treeselect-label-empty { - overflow: hidden; - visibility: hidden; -} - -.p-treeselect-token { - cursor: default; - display: inline-flex; - align-items: center; - flex: 0 0 auto; -} - -.p-treeselect .p-treeselect-panel { - min-width: 100%; -} - -.p-treeselect-items-wrapper { - overflow: auto; -} - -.p-fluid .p-treeselect { - display: flex; +@layer primevue { + .p-treeselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + + .p-treeselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .p-treeselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + + .p-treeselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + + .p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; + } + + .p-treeselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + + .p-treeselect .p-treeselect-panel { + min-width: 100%; + } + + .p-treeselect-items-wrapper { + overflow: auto; + } + + .p-fluid .p-treeselect { + display: flex; + } } `; diff --git a/components/lib/treetable/BaseTreeTable.vue b/components/lib/treetable/BaseTreeTable.vue index edb34e3ad..7c81453b8 100644 --- a/components/lib/treetable/BaseTreeTable.vue +++ b/components/lib/treetable/BaseTreeTable.vue @@ -3,173 +3,175 @@ import BaseComponent from 'primevue/basecomponent'; import { useStyle } from 'primevue/usestyle'; const styles = ` -.p-treetable { - position: relative; -} - -.p-treetable table { - border-collapse: collapse; - width: 100%; - table-layout: fixed; -} - -.p-treetable .p-sortable-column { - cursor: pointer; - user-select: none; -} - -.p-treetable-responsive-scroll > .p-treetable-wrapper { - overflow-x: auto; -} - -.p-treetable-responsive-scroll > .p-treetable-wrapper > table, -.p-treetable-auto-layout > .p-treetable-wrapper > table { - table-layout: auto; -} - -.p-treetable-hoverable-rows .p-treetable-tbody > tr { - cursor: pointer; -} - -.p-treetable-toggler { - cursor: pointer; - user-select: none; - display: inline-flex; - align-items: center; - justify-content: center; - vertical-align: middle; - overflow: hidden; - position: relative; -} - -.p-treetable-toggler + .p-checkbox { - vertical-align: middle; -} - -.p-treetable-toggler + .p-checkbox + span { - vertical-align: middle; -} - -/* Resizable */ -.p-treetable-resizable > .p-treetable-wrapper { - overflow-x: auto; -} - -.p-treetable-resizable .p-treetable-thead > tr > th, -.p-treetable-resizable .p-treetable-tfoot > tr > td, -.p-treetable-resizable .p-treetable-tbody > tr > td { - overflow: hidden; -} - -.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { - background-clip: padding-box; - position: relative; -} - -.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { - display: none; -} - -.p-treetable .p-column-resizer { - display: block; - position: absolute !important; - top: 0; - right: 0; - margin: 0; - width: 0.5rem; - height: 100%; - padding: 0px; - cursor: col-resize; - border: 1px solid transparent; -} - -.p-treetable .p-column-resizer-helper { - width: 1px; - position: absolute; - z-index: 10; - display: none; -} - -.p-treetable .p-treetable-loading-overlay { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - z-index: 2; -} - -/* Scrollable */ -.p-treetable-scrollable .p-treetable-wrapper { - position: relative; - overflow: auto; -} - -.p-treetable-scrollable .p-treetable-table { - display: block; -} - -.p-treetable-scrollable .p-treetable-thead, -.p-treetable-scrollable .p-treetable-tbody, -.p-treetable-scrollable .p-treetable-tfoot { - display: block; -} - -.p-treetable-scrollable .p-treetable-thead > tr, -.p-treetable-scrollable .p-treetable-tbody > tr, -.p-treetable-scrollable .p-treetable-tfoot > tr { - display: flex; - flex-wrap: nowrap; - width: 100%; -} - -.p-treetable-scrollable .p-treetable-thead > tr > th, -.p-treetable-scrollable .p-treetable-tbody > tr > td, -.p-treetable-scrollable .p-treetable-tfoot > tr > td { - display: flex; - flex: 1 1 0; - align-items: center; -} - -.p-treetable-scrollable .p-treetable-thead { - position: sticky; - top: 0; - z-index: 1; -} - -.p-treetable-scrollable .p-treetable-tfoot { - position: sticky; - bottom: 0; - z-index: 1; -} - -.p-treetable-scrollable .p-frozen-column { - position: sticky; - background: inherit; -} - -.p-treetable-scrollable th.p-frozen-column { - z-index: 1; -} - -.p-treetable-scrollable-both .p-treetable-thead > tr > th, -.p-treetable-scrollable-both .p-treetable-tbody > tr > td, -.p-treetable-scrollable-both .p-treetable-tfoot > tr > td, -.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, -.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { - flex: 0 0 auto; -} - -.p-treetable-flex-scrollable { - display: flex; - flex-direction: column; - height: 100%; -} - -.p-treetable-flex-scrollable .p-treetable-wrapper { - display: flex; - flex-direction: column; - flex: 1; - height: 100%; +@layer primevue { + .p-treetable { + position: relative; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-responsive-scroll > .p-treetable-wrapper > table, + .p-treetable-auto-layout > .p-treetable-wrapper > table { + table-layout: auto; + } + + .p-treetable-hoverable-rows .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + vertical-align: middle; + overflow: hidden; + position: relative; + } + + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + + .p-treetable-resizable .p-treetable-thead > tr > th, + .p-treetable-resizable .p-treetable-tfoot > tr > td, + .p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + + .p-treetable-resizable .p-resizable-column:not(.p-frozen-column) { + background-clip: padding-box; + position: relative; + } + + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + + .p-treetable .p-column-resizer { + display: block; + position: absolute !important; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + + /* Scrollable */ + .p-treetable-scrollable .p-treetable-wrapper { + position: relative; + overflow: auto; + } + + .p-treetable-scrollable .p-treetable-table { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead, + .p-treetable-scrollable .p-treetable-tbody, + .p-treetable-scrollable .p-treetable-tfoot { + display: block; + } + + .p-treetable-scrollable .p-treetable-thead > tr, + .p-treetable-scrollable .p-treetable-tbody > tr, + .p-treetable-scrollable .p-treetable-tfoot > tr { + display: flex; + flex-wrap: nowrap; + width: 100%; + } + + .p-treetable-scrollable .p-treetable-thead > tr > th, + .p-treetable-scrollable .p-treetable-tbody > tr > td, + .p-treetable-scrollable .p-treetable-tfoot > tr > td { + display: flex; + flex: 1 1 0; + align-items: center; + } + + .p-treetable-scrollable .p-treetable-thead { + position: sticky; + top: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-treetable-tfoot { + position: sticky; + bottom: 0; + z-index: 1; + } + + .p-treetable-scrollable .p-frozen-column { + position: sticky; + background: inherit; + } + + .p-treetable-scrollable th.p-frozen-column { + z-index: 1; + } + + .p-treetable-scrollable-both .p-treetable-thead > tr > th, + .p-treetable-scrollable-both .p-treetable-tbody > tr > td, + .p-treetable-scrollable-both .p-treetable-tfoot > tr > td, + .p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td, + .p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td { + flex: 0 0 auto; + } + + .p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; + } + + .p-treetable-flex-scrollable .p-treetable-wrapper { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + } } `;