diff --git a/components/lib/accordion/AccordionBase.js b/components/lib/accordion/AccordionBase.js index 9d832c631f..868a6345e7 100644 --- a/components/lib/accordion/AccordionBase.js +++ b/components/lib/accordion/AccordionBase.js @@ -23,21 +23,23 @@ const classes = { }; const styles = ` -.p-accordion-header-link { - cursor: pointer; - display: flex; - align-items: center; - user-select: none; - position: relative; - text-decoration: none; -} - -.p-accordion-header-link:focus { - z-index: 1; -} - -.p-accordion-header-text { - line-height: 1; +@layer primereact { + .p-accordion-header-link { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + } + + .p-accordion-header-link:focus { + z-index: 1; + } + + .p-accordion-header-text { + line-height: 1; + } } `; diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js index 0ccfd0ee9b..1a47a9d608 100644 --- a/components/lib/autocomplete/AutoCompleteBase.js +++ b/components/lib/autocomplete/AutoCompleteBase.js @@ -39,105 +39,107 @@ const classes = { }; const styles = ` -.p-autocomplete { - display: inline-flex; - position: relative; -} - -.p-autocomplete-loader { - position: absolute; - top: 50%; - margin-top: -.5rem; -} - -.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-dropdown { - border-top-left-radius: 0; - border-bottom-left-radius: 0px; -} - -.p-autocomplete .p-autocomplete-panel { - min-width: 100%; -} - -.p-autocomplete-panel { - position: absolute; - top: 0; - left: 0; -} - -.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-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-icon { - cursor: pointer; -} - -.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-fluid .p-autocomplete { - display: flex; -} - -.p-fluid .p-autocomplete-dd .p-autocomplete-input { - width: 1%; +@layer primereact { + .p-autocomplete { + display: inline-flex; + position: relative; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .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-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0px; + } + + .p-autocomplete .p-autocomplete-panel { + min-width: 100%; + } + + .p-autocomplete-panel { + position: absolute; + top: 0; + left: 0; + } + + .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-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-icon { + cursor: pointer; + } + + .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-fluid .p-autocomplete { + display: flex; + } + + .p-fluid .p-autocomplete-dd .p-autocomplete-input { + width: 1%; + } + + .p-autocomplete-items-wrapper { + overflow: auto; + } } - -.p-autocomplete-items-wrapper { - overflow: auto; -} `; export const AutoCompleteBase = ComponentBase.extend({ diff --git a/components/lib/avatar/AvatarBase.js b/components/lib/avatar/AvatarBase.js index 16acdbfdc5..cc94a6713b 100644 --- a/components/lib/avatar/AvatarBase.js +++ b/components/lib/avatar/AvatarBase.js @@ -15,38 +15,40 @@ const classes = { }; 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.p-avatar-circle img { - border-radius: 50%; -} - -.p-avatar .p-avatar-icon { - font-size: 1rem; -} - -.p-avatar img { - width: 100%; - height: 100%; -} - -.p-avatar-clickable { - cursor: pointer; +@layer primereact { + .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.p-avatar-circle img { + border-radius: 50%; + } + + .p-avatar .p-avatar-icon { + font-size: 1rem; + } + + .p-avatar img { + width: 100%; + height: 100%; + } + + .p-avatar-clickable { + cursor: pointer; + } } `; diff --git a/components/lib/avatargroup/AvatarGroupBase.js b/components/lib/avatargroup/AvatarGroupBase.js index 3f3c6c5f00..7fe48fb774 100644 --- a/components/lib/avatargroup/AvatarGroupBase.js +++ b/components/lib/avatargroup/AvatarGroupBase.js @@ -5,13 +5,15 @@ const classes = { }; const styles = ` -.p-avatar-group .p-avatar + .p-avatar { - margin-left: -1rem; -} - -.p-avatar-group { - display: flex; - align-items: center; +@layer primereact { + .p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; + } + + .p-avatar-group { + display: flex; + align-items: center; + } } `; diff --git a/components/lib/badge/BadgeBase.js b/components/lib/badge/BadgeBase.js index 6060102a82..0c03acb43f 100644 --- a/components/lib/badge/BadgeBase.js +++ b/components/lib/badge/BadgeBase.js @@ -13,37 +13,39 @@ const classes = { }; 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 primereact { + .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/blockui/BlockUIBase.js b/components/lib/blockui/BlockUIBase.js index a66e2d0cd9..fd5e10a005 100644 --- a/components/lib/blockui/BlockUIBase.js +++ b/components/lib/blockui/BlockUIBase.js @@ -10,23 +10,25 @@ const classes = { }; const styles = ` -.p-blockui-container { - position: relative; -} - -.p-blockui { - opacity: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.p-blockui.p-component-overlay { - position: absolute; -} - -.p-blockui-document.p-component-overlay { - position: fixed; +@layer primereact { + .p-blockui-container { + position: relative; + } + + .p-blockui { + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + } + + .p-blockui.p-component-overlay { + position: absolute; + } + + .p-blockui-document.p-component-overlay { + position: fixed; + } } `; diff --git a/components/lib/breadcrumb/BreadCrumbBase.js b/components/lib/breadcrumb/BreadCrumbBase.js index e37e327bfc..084a79dfec 100644 --- a/components/lib/breadcrumb/BreadCrumbBase.js +++ b/components/lib/breadcrumb/BreadCrumbBase.js @@ -14,36 +14,38 @@ const classes = { }; const styles = ` -.p-breadcrumb { - overflow-x: auto; -} - -.p-breadcrumb ul { - 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 primereact { + .p-breadcrumb { + overflow-x: auto; + } + + .p-breadcrumb ul { + 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/CalendarBase.js b/components/lib/calendar/CalendarBase.js index 04c5433bdc..4dbcc117c5 100644 --- a/components/lib/calendar/CalendarBase.js +++ b/components/lib/calendar/CalendarBase.js @@ -2,174 +2,176 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const styles = ` -.p-calendar { - position: relative; - display: inline-flex; - max-width: 100%; -} - -.p-calendar .p-inputtext { - flex: 1 1 auto; - width: 1%; -} - -.p-calendar-w-btn-right .p-inputtext { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.p-calendar-w-btn-right .p-datepicker-trigger { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.p-calendar-w-btn-left .p-inputtext { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.p-calendar-w-btn-left .p-datepicker-trigger { - border-top-right-radius: 0; - border-bottom-right-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; - position: absolute; - top: 0; - left: 0; -} - -.p-datepicker-inline { - display: inline-block; - position: static; - 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; -} - -/* Multiple Month DatePicker */ -.p-datepicker-multiple-month .p-datepicker-group-container { - display: flex; -} - -/* 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; -} - -/* 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 { - position: fixed; - top: 50%; - left: 50%; - min-width: 80vw; - transform: translate(-50%, -50%); -} - -/* Year Picker */ -.p-yearpicker-year { - width: 50%; - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; - overflow: hidden; - position: relative; +@layer primereact { + .p-calendar { + position: relative; + display: inline-flex; + max-width: 100%; + } + + .p-calendar .p-inputtext { + flex: 1 1 auto; + width: 1%; + } + + .p-calendar-w-btn-right .p-inputtext { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + .p-calendar-w-btn-right .p-datepicker-trigger { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar-w-btn-left .p-inputtext { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + .p-calendar-w-btn-left .p-datepicker-trigger { + border-top-right-radius: 0; + border-bottom-right-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; + position: absolute; + top: 0; + left: 0; + } + + .p-datepicker-inline { + display: inline-block; + position: static; + 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; + } + + /* Multiple Month DatePicker */ + .p-datepicker-multiple-month .p-datepicker-group-container { + display: flex; + } + + /* 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; + } + + /* 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 { + position: fixed; + top: 50%; + left: 50%; + min-width: 80vw; + transform: translate(-50%, -50%); + } + + /* Year Picker */ + .p-yearpicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + } } `; diff --git a/components/lib/card/CardBase.js b/components/lib/card/CardBase.js index ae486d51f9..d1ca05c987 100644 --- a/components/lib/card/CardBase.js +++ b/components/lib/card/CardBase.js @@ -12,8 +12,10 @@ const classes = { }; const styles = ` -.p-card-header img { - width: 100%; +@layer primereact { + .p-card-header img { + width: 100%; + } } `; diff --git a/components/lib/carousel/CarouselBase.js b/components/lib/carousel/CarouselBase.js index 5d8f9a2716..a92ea555bf 100644 --- a/components/lib/carousel/CarouselBase.js +++ b/components/lib/carousel/CarouselBase.js @@ -2,74 +2,76 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; 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 primereact { + .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/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js index e114505357..ab8afbe4d5 100644 --- a/components/lib/cascadeselect/CascadeSelectBase.js +++ b/components/lib/cascadeselect/CascadeSelectBase.js @@ -41,92 +41,94 @@ const classes = { }; const styles = ` -.p-cascadeselect { - display: inline-flex; - cursor: pointer; - position: relative; - 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-panel { - position: absolute; - top: 0; - left: 0; -} - -.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 primereact { + .p-cascadeselect { + display: inline-flex; + cursor: pointer; + position: relative; + 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-panel { + position: absolute; + top: 0; + left: 0; + } + + .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/ChartBase.js b/components/lib/chart/ChartBase.js index c701a38cec..575ed666df 100644 --- a/components/lib/chart/ChartBase.js +++ b/components/lib/chart/ChartBase.js @@ -30,8 +30,10 @@ export const ChartBase = ComponentBase.extend({ ) }, styles: ` - .p-chart { - position: relative + @layer primereact { + .p-chart { + position: relative + } } ` } diff --git a/components/lib/chip/ChipBase.js b/components/lib/chip/ChipBase.js index 950aeaef97..b66c442edb 100644 --- a/components/lib/chip/ChipBase.js +++ b/components/lib/chip/ChipBase.js @@ -12,26 +12,28 @@ const classes = { }; 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 .p-chip-remove-icon { - line-height: 1.5; - cursor: pointer; -} - -.p-chip img { - border-radius: 50%; +@layer primereact { + .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 .p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + } + + .p-chip img { + border-radius: 50%; + } } `; diff --git a/components/lib/chips/ChipsBase.js b/components/lib/chips/ChipsBase.js index 39178ff2fd..215cd33868 100644 --- a/components/lib/chips/ChipsBase.js +++ b/components/lib/chips/ChipsBase.js @@ -2,73 +2,75 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; 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; -} - -.p-chips-icon-left, -.p-chips-icon-right { - position: relative; - display: inline-block; -} - -.p-chips-icon-left > i, -.p-chips-icon-right > i, -.p-chips-icon-left > svg, -.p-chips-icon-right > svg, -.p-chips-icon-left > .p-chips-prefix, -.p-chips-icon-right > .p-chips-suffix { - position: absolute; - top: 50%; - margin-top: -0.5rem; -} - -.p-fluid .p-chips-icon-left, -.p-fluid .p-chips-icon-right { - display: block; - width: 100%; +@layer primereact { + .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; + } + + .p-chips-icon-left, + .p-chips-icon-right { + position: relative; + display: inline-block; + } + + .p-chips-icon-left > i, + .p-chips-icon-right > i, + .p-chips-icon-left > svg, + .p-chips-icon-right > svg, + .p-chips-icon-left > .p-chips-prefix, + .p-chips-icon-right > .p-chips-suffix { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + + .p-fluid .p-chips-icon-left, + .p-fluid .p-chips-icon-right { + display: block; + width: 100%; + } } `; diff --git a/components/lib/colorpicker/ColorPickerBase.js b/components/lib/colorpicker/ColorPickerBase.js index 5cad80e9ef..2727b4d710 100644 --- a/components/lib/colorpicker/ColorPickerBase.js +++ b/components/lib/colorpicker/ColorPickerBase.js @@ -32,93 +32,95 @@ const classes = { }; const styles = ` -.p-colorpicker { - display: inline-block; -} - -.p-colorpicker-dragging { - cursor: pointer; -} - -.p-colorpicker-overlay { - position: relative; -} - -.p-colorpicker-panel { - position: relative; - width: 193px; - height: 166px; -} - -.p-colorpicker-overlay-panel { - position: absolute; - top: 0; - left: 0; -} - -.p-colorpicker-preview { - cursor: pointer; -} - -.p-colorpicker-panel .p-colorpicker-content { - position: relative; -} - -.p-colorpicker-panel .p-colorpicker-color-selector { - width: 150px; - height: 150px; - top: 8px; - left: 8px; - position: absolute; -} - -.p-colorpicker-panel .p-colorpicker-color { - width: 150px; - height: 150px; -} - -.p-colorpicker-panel .p-colorpicker-color-handle { - position: absolute; - top: 0px; - left: 150px; - border-radius: 100%; - width: 10px; - height: 10px; - border-width: 1px; - border-style: solid; - margin: -5px 0 0 -5px; - cursor: pointer; - opacity: 0.85; -} - -.p-colorpicker-panel .p-colorpicker-hue { - width: 17px; - height: 150px; - top: 8px; - left: 167px; - position: absolute; - opacity: 0.85; -} - -.p-colorpicker-panel .p-colorpicker-hue-handle { - position: absolute; - top: 150px; - left: 0px; - width: 21px; - margin-left: -2px; - margin-top: -5px; - height: 10px; - border-width: 2px; - border-style: solid; - opacity: 0.85; - cursor: pointer; -} - -.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 primereact { + .p-colorpicker { + display: inline-block; + } + + .p-colorpicker-dragging { + cursor: pointer; + } + + .p-colorpicker-overlay { + position: relative; + } + + .p-colorpicker-panel { + position: relative; + width: 193px; + height: 166px; + } + + .p-colorpicker-overlay-panel { + position: absolute; + top: 0; + left: 0; + } + + .p-colorpicker-preview { + cursor: pointer; + } + + .p-colorpicker-panel .p-colorpicker-content { + position: relative; + } + + .p-colorpicker-panel .p-colorpicker-color-selector { + width: 150px; + height: 150px; + top: 8px; + left: 8px; + position: absolute; + } + + .p-colorpicker-panel .p-colorpicker-color { + width: 150px; + height: 150px; + } + + .p-colorpicker-panel .p-colorpicker-color-handle { + position: absolute; + top: 0px; + left: 150px; + border-radius: 100%; + width: 10px; + height: 10px; + border-width: 1px; + border-style: solid; + margin: -5px 0 0 -5px; + cursor: pointer; + opacity: 0.85; + } + + .p-colorpicker-panel .p-colorpicker-hue { + width: 17px; + height: 150px; + top: 8px; + left: 167px; + position: absolute; + opacity: 0.85; + } + + .p-colorpicker-panel .p-colorpicker-hue-handle { + position: absolute; + top: 150px; + left: 0px; + width: 21px; + margin-left: -2px; + margin-top: -5px; + height: 10px; + border-width: 2px; + border-style: solid; + opacity: 0.85; + cursor: pointer; + } + + .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/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js index 7e25a0d8f5..b427241eaf 100644 --- a/components/lib/componentbase/ComponentBase.js +++ b/components/lib/componentbase/ComponentBase.js @@ -1,7 +1,7 @@ import PrimeReact from '../api/Api'; import { useMountEffect, useStyle, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { ObjectUtils } from '../utils/Utils'; import { mergeProps } from '../utils/MergeProps'; +import { ObjectUtils } from '../utils/Utils'; const buttonStyles = ` .p-button { @@ -269,192 +269,194 @@ svg.p-icon g { } `; const baseStyles = ` -.p-component, .p-component * { - box-sizing: border-box; -} - -.p-hidden { - display: none; -} - -.p-hidden-space { - visibility: hidden; -} - -.p-hidden-accessible { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - -.p-hidden-accessible input, -.p-hidden-accessible select { - transform: scale(0); -} - -.p-reset { - margin: 0; - padding: 0; - border: 0; - outline: 0; - text-decoration: none; - font-size: 100%; - list-style: none; -} - -.p-disabled, .p-disabled * { - cursor: default !important; - pointer-events: none; - user-select: none; -} - -.p-component-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.p-overflow-hidden { - overflow: hidden; -} - -.p-unselectable-text { - user-select: none; -} - -.p-scrollbar-measure { - width: 100px; - height: 100px; - overflow: scroll; - position: absolute; - top: -9999px; -} - -@-webkit-keyframes p-fadein { - 0% { opacity: 0; } - 100% { opacity: 1; } -} -@keyframes p-fadein { - 0% { opacity: 0; } - 100% { opacity: 1; } -} - -.p-link { - text-align: left; - background-color: transparent; - margin: 0; - padding: 0; - border: none; - cursor: pointer; - user-select: none; -} - -.p-link:disabled { - cursor: default; -} - -/* Non react overlay animations */ -.p-connected-overlay { - opacity: 0; - transform: scaleY(0.8); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); -} - -.p-connected-overlay-visible { - opacity: 1; - transform: scaleY(1); -} - -.p-connected-overlay-hidden { - opacity: 0; - transform: scaleY(1); - transition: opacity .1s linear; -} - -/* React based overlay animations */ -.p-connected-overlay-enter { - opacity: 0; - transform: scaleY(0.8); -} - -.p-connected-overlay-enter-active { - opacity: 1; - transform: scaleY(1); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); -} - -.p-connected-overlay-enter-done { - transform: none; -} - -.p-connected-overlay-exit { - opacity: 1; -} - -.p-connected-overlay-exit-active { - opacity: 0; - transition: opacity .1s linear; -} - -/* Toggleable Content */ -.p-toggleable-content-enter { - max-height: 0; -} - -.p-toggleable-content-enter-active { - overflow: hidden; - max-height: 1000px; - transition: max-height 1s ease-in-out; -} - -.p-toggleable-content-enter-done { - transform: none; -} - -.p-toggleable-content-exit { - max-height: 1000px; -} - -.p-toggleable-content-exit-active { - overflow: hidden; - max-height: 0; - transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); -} - -.p-sr-only { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - word-wrap: normal !important; -} - -.p-menu .p-menuitem-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; +@layer primereact { + .p-component, .p-component * { + box-sizing: border-box; + } + + .p-hidden { + display: none; + } + + .p-hidden-space { + visibility: hidden; + } + + .p-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .p-hidden-accessible input, + .p-hidden-accessible select { + transform: scale(0); + } + + .p-reset { + margin: 0; + padding: 0; + border: 0; + outline: 0; + text-decoration: none; + font-size: 100%; + list-style: none; + } + + .p-disabled, .p-disabled * { + cursor: default !important; + pointer-events: none; + user-select: none; + } + + .p-component-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + .p-overflow-hidden { + overflow: hidden; + } + + .p-unselectable-text { + user-select: none; + } + + .p-scrollbar-measure { + width: 100px; + height: 100px; + overflow: scroll; + position: absolute; + top: -9999px; + } + + @-webkit-keyframes p-fadein { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + @keyframes p-fadein { + 0% { opacity: 0; } + 100% { opacity: 1; } + } + + .p-link { + text-align: left; + background-color: transparent; + margin: 0; + padding: 0; + border: none; + cursor: pointer; + user-select: none; + } + + .p-link:disabled { + cursor: default; + } + + /* Non react overlay animations */ + .p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-visible { + opacity: 1; + transform: scaleY(1); + } + + .p-connected-overlay-hidden { + opacity: 0; + transform: scaleY(1); + transition: opacity .1s linear; + } + + /* React based overlay animations */ + .p-connected-overlay-enter { + opacity: 0; + transform: scaleY(0.8); + } + + .p-connected-overlay-enter-active { + opacity: 1; + transform: scaleY(1); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-connected-overlay-enter-done { + transform: none; + } + + .p-connected-overlay-exit { + opacity: 1; + } + + .p-connected-overlay-exit-active { + opacity: 0; + transition: opacity .1s linear; + } + + /* Toggleable Content */ + .p-toggleable-content-enter { + max-height: 0; + } + + .p-toggleable-content-enter-active { + overflow: hidden; + max-height: 1000px; + transition: max-height 1s ease-in-out; + } + + .p-toggleable-content-enter-done { + transform: none; + } + + .p-toggleable-content-exit { + max-height: 1000px; + } + + .p-toggleable-content-exit-active { + overflow: hidden; + max-height: 0; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); + } + + .p-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; + } + + .p-menu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + } + + ${buttonStyles} + ${checkboxStyles} + ${inputTextStyles} + ${radioButtonStyles} + ${iconStyles} } - -${buttonStyles} -${checkboxStyles} -${inputTextStyles} -${radioButtonStyles} -${iconStyles} `; export const ComponentBase = { diff --git a/components/lib/confirmpopup/ConfirmPopupBase.js b/components/lib/confirmpopup/ConfirmPopupBase.js index 2ed7d2c8bc..3eb2e6cc1f 100644 --- a/components/lib/confirmpopup/ConfirmPopupBase.js +++ b/components/lib/confirmpopup/ConfirmPopupBase.js @@ -3,47 +3,49 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const styles = ` -.p-confirm-popup-flipped { - margin-top: 0; - margin-bottom: 10px; -} - -.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 primereact { + .p-confirm-popup-flipped { + margin-top: 0; + margin-bottom: 10px; + } + + .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/ContextMenuBase.js b/components/lib/contextmenu/ContextMenuBase.js index 3f9e9fb419..db35acbd30 100644 --- a/components/lib/contextmenu/ContextMenuBase.js +++ b/components/lib/contextmenu/ContextMenuBase.js @@ -3,46 +3,48 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; 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 { - opacity: 0; -} - -.p-contextmenu-enter-active { - opacity: 1; - transition: opacity 250ms; +@layer primereact { + .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 { + opacity: 0; + } + + .p-contextmenu-enter-active { + opacity: 1; + transition: opacity 250ms; + } } `; diff --git a/components/lib/datascroller/DataScrollerBase.js b/components/lib/datascroller/DataScrollerBase.js index 16be803a25..fc86c50285 100644 --- a/components/lib/datascroller/DataScrollerBase.js +++ b/components/lib/datascroller/DataScrollerBase.js @@ -13,30 +13,32 @@ const classes = { }; const styles = ` -.p-datascroller .p-datascroller-header { - text-align: center; - padding: .5em .75em; - border-bottom: 0 none; -} - -.p-datascroller .p-datascroller-footer { - text-align: center; - padding: .25em .625em; - border-top: 0px none; -} - -.p-datascroller .p-datascroller-content { - padding: .25em .625em; -} - -.p-datascroller-inline .p-datascroller-content { - overflow: auto; -} - -.p-datascroller .p-datascroller-list { - list-style-type: none; - margin: 0; - padding: 0; +@layer primereact { + .p-datascroller .p-datascroller-header { + text-align: center; + padding: .5em .75em; + border-bottom: 0 none; + } + + .p-datascroller .p-datascroller-footer { + text-align: center; + padding: .25em .625em; + border-top: 0px none; + } + + .p-datascroller .p-datascroller-content { + padding: .25em .625em; + } + + .p-datascroller-inline .p-datascroller-content { + overflow: auto; + } + + .p-datascroller .p-datascroller-list { + list-style-type: none; + margin: 0; + padding: 0; + } } `; diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js index cda65fd793..4dd900da39 100644 --- a/components/lib/datatable/DataTableBase.js +++ b/components/lib/datatable/DataTableBase.js @@ -3,283 +3,285 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { ObjectUtils, classNames } from '../utils/Utils'; const styles = ` -.p-datatable { - position: relative; -} - -.p-datatable > .p-datatable-wrapper { - overflow: auto; -} - -.p-datatable-table { - border-spacing: 0px; - width: 100%; -} - -.p-datatable .p-sortable-disabled { - cursor: auto; -} - -.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-selectable .p-selectable-row, -.p-datatable-selectable-cell .p-selectable-cell { - cursor: pointer; -} - -.p-datatable-drag-selection-helper { - position: absolute; - z-index: 99999999; -} - -/* Scrollable */ -.p-datatable-scrollable > .p-datatable-wrapper { - position: relative; -} - -.p-datatable-scrollable-table > .p-datatable-thead { - position: sticky; - 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 { - position: sticky; - 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-overlay { - position: absolute; - top: 0; - left: 0; -} - -.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; -} - -/* Alignment */ -.p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content, -.p-datatable .p-datatable-tbody > tr > td.p-align-left, -.p-datatable .p-datatable-tfoot > tr > td.p-align-left { - text-align: left; - justify-content: flex-start; -} - -.p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content, -.p-datatable .p-datatable-tbody > tr > td.p-align-right, -.p-datatable .p-datatable-tfoot > tr > td.p-align-right { - text-align: right; - justify-content: flex-end; -} - -.p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content, -.p-datatable .p-datatable-tbody > tr > td.p-align-center, -.p-datatable .p-datatable-tfoot > tr > td.p-align-center { - text-align: center; - justify-content: center; +@layer primereact { + .p-datatable { + position: relative; + } + + .p-datatable > .p-datatable-wrapper { + overflow: auto; + } + + .p-datatable-table { + border-spacing: 0px; + width: 100%; + } + + .p-datatable .p-sortable-disabled { + cursor: auto; + } + + .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-selectable .p-selectable-row, + .p-datatable-selectable-cell .p-selectable-cell { + cursor: pointer; + } + + .p-datatable-drag-selection-helper { + position: absolute; + z-index: 99999999; + } + + /* Scrollable */ + .p-datatable-scrollable > .p-datatable-wrapper { + position: relative; + } + + .p-datatable-scrollable-table > .p-datatable-thead { + position: sticky; + 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 { + position: sticky; + 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-overlay { + position: absolute; + top: 0; + left: 0; + } + + .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; + } + + /* Alignment */ + .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content, + .p-datatable .p-datatable-tbody > tr > td.p-align-left, + .p-datatable .p-datatable-tfoot > tr > td.p-align-left { + text-align: left; + justify-content: flex-start; + } + + .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content, + .p-datatable .p-datatable-tbody > tr > td.p-align-right, + .p-datatable .p-datatable-tfoot > tr > td.p-align-right { + text-align: right; + justify-content: flex-end; + } + + .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content, + .p-datatable .p-datatable-tbody > tr > td.p-align-center, + .p-datatable .p-datatable-tfoot > tr > td.p-align-center { + text-align: center; + justify-content: center; + } } `; diff --git a/components/lib/dataview/DataViewBase.js b/components/lib/dataview/DataViewBase.js index 61e1b6aa57..eccf0fb9aa 100644 --- a/components/lib/dataview/DataViewBase.js +++ b/components/lib/dataview/DataViewBase.js @@ -25,17 +25,19 @@ const classes = { }; const styles = ` -.p-dataview-loading { - position: relative; - min-height: 4rem; -} - -.p-dataview .p-dataview-loading-overlay { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; +@layer primereact { + .p-dataview-loading { + position: relative; + min-height: 4rem; + } + + .p-dataview .p-dataview-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } } `; diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js index b4a0324f30..81383a6648 100644 --- a/components/lib/dialog/DialogBase.js +++ b/components/lib/dialog/DialogBase.js @@ -40,189 +40,191 @@ const classes = { }; const styles = ` -.p-dialog-mask { - background-color: transparent; - transition-property: background-color; -} - -.p-dialog-visible { - display: flex; -} - -.p-dialog-mask.p-component-overlay { - pointer-events: auto; -} - -.p-dialog { - display: flex; - flex-direction: column; - pointer-events: auto; - max-height: 90%; - transform: scale(1); - position: relative; -} - -.p-dialog-content { - overflow-y: auto; - flex-grow: 1; -} - -.p-dialog-header { - display: flex; - align-items: center; - flex-shrink: 0; -} - -.p-dialog-footer { - flex-shrink: 0; -} - -.p-dialog .p-dialog-header-icons { - display: flex; - align-items: center; - align-self: flex-start; - flex-shrink: 0; -} - -.p-dialog .p-dialog-header-icon { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; -} - -.p-dialog .p-dialog-title { - flex-grow: 1; -} - -/* Fluid */ -.p-fluid .p-dialog-footer .p-button { - width: auto; -} - -/* Animation */ -/* Center */ -.p-dialog-enter { - opacity: 0; - transform: scale(0.7); -} - -.p-dialog-enter-active { - opacity: 1; - transform: scale(1); - transition: all 150ms cubic-bezier(0, 0, 0.2, 1); -} - -.p-dialog-enter-done { - transform: none; -} - -.p-dialog-exit-active { - opacity: 0; - transform: scale(0.7); - transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); -} - -/* 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-top-left .p-dialog, -.p-dialog-top-right .p-dialog, -.p-dialog-bottom-left .p-dialog, -.p-dialog-bottom-right .p-dialog { - margin: 0.75em; -} - -.p-dialog-top .p-dialog-enter, -.p-dialog-top .p-dialog-exit-active { - transform: translate3d(0px, -100%, 0px); -} - -.p-dialog-bottom .p-dialog-enter, -.p-dialog-bottom .p-dialog-exit-active { - transform: translate3d(0px, 100%, 0px); -} - -.p-dialog-left .p-dialog-enter, -.p-dialog-left .p-dialog-exit-active, -.p-dialog-top-left .p-dialog-enter, -.p-dialog-top-left .p-dialog-exit-active, -.p-dialog-bottom-left .p-dialog-enter, -.p-dialog-bottom-left .p-dialog-exit-active { - transform: translate3d(-100%, 0px, 0px); -} - -.p-dialog-right .p-dialog-enter, -.p-dialog-right .p-dialog-exit-active, -.p-dialog-top-right .p-dialog-enter, -.p-dialog-top-right .p-dialog-exit-active, -.p-dialog-bottom-right .p-dialog-enter, -.p-dialog-bottom-right .p-dialog-exit-active { - transform: translate3d(100%, 0px, 0px); -} - -.p-dialog-top .p-dialog-enter-active, -.p-dialog-bottom .p-dialog-enter-active, -.p-dialog-left .p-dialog-enter-active, -.p-dialog-top-left .p-dialog-enter-active, -.p-dialog-bottom-left .p-dialog-enter-active, -.p-dialog-right .p-dialog-enter-active, -.p-dialog-top-right .p-dialog-enter-active, -.p-dialog-bottom-right .p-dialog-enter-active { - transform: translate3d(0px, 0px, 0px); - transition: all 0.3s ease-out; -} - -.p-dialog-top .p-dialog-exit-active, -.p-dialog-bottom .p-dialog-exit-active, -.p-dialog-left .p-dialog-exit-active, -.p-dialog-top-left .p-dialog-exit-active, -.p-dialog-bottom-left .p-dialog-exit-active, -.p-dialog-right .p-dialog-exit-active, -.p-dialog-top-right .p-dialog-exit-active, -.p-dialog-bottom-right .p-dialog-exit-active { - transition: all 0.3s ease-out; -} - -/* Maximize */ -.p-dialog-maximized { - transition: none; - transform: none; - margin: 0 !important; - width: 100vw !important; - height: 100vh !important; - max-height: 100%; - top: 0px !important; - left: 0px !important; -} - -.p-dialog-maximized .p-dialog-content { - flex-grow: 1; -} - -.p-confirm-dialog .p-dialog-content { - display: flex; - align-items: center; -} - -/* Resizable */ -.p-dialog .p-resizable-handle { - position: absolute; - font-size: 0.1px; - display: block; - cursor: se-resize; - width: 12px; - height: 12px; - right: 1px; - bottom: 1px; +@layer primereact { + .p-dialog-mask { + background-color: transparent; + transition-property: background-color; + } + + .p-dialog-visible { + display: flex; + } + + .p-dialog-mask.p-component-overlay { + pointer-events: auto; + } + + .p-dialog { + display: flex; + flex-direction: column; + pointer-events: auto; + max-height: 90%; + transform: scale(1); + position: relative; + } + + .p-dialog-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-dialog-header { + display: flex; + align-items: center; + flex-shrink: 0; + } + + .p-dialog-footer { + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icons { + display: flex; + align-items: center; + align-self: flex-start; + flex-shrink: 0; + } + + .p-dialog .p-dialog-header-icon { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + } + + .p-dialog .p-dialog-title { + flex-grow: 1; + } + + /* Fluid */ + .p-fluid .p-dialog-footer .p-button { + width: auto; + } + + /* Animation */ + /* Center */ + .p-dialog-enter { + opacity: 0; + transform: scale(0.7); + } + + .p-dialog-enter-active { + opacity: 1; + transform: scale(1); + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-dialog-enter-done { + transform: none; + } + + .p-dialog-exit-active { + opacity: 0; + transform: scale(0.7); + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); + } + + /* 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-top-left .p-dialog, + .p-dialog-top-right .p-dialog, + .p-dialog-bottom-left .p-dialog, + .p-dialog-bottom-right .p-dialog { + margin: 0.75em; + } + + .p-dialog-top .p-dialog-enter, + .p-dialog-top .p-dialog-exit-active { + transform: translate3d(0px, -100%, 0px); + } + + .p-dialog-bottom .p-dialog-enter, + .p-dialog-bottom .p-dialog-exit-active { + transform: translate3d(0px, 100%, 0px); + } + + .p-dialog-left .p-dialog-enter, + .p-dialog-left .p-dialog-exit-active, + .p-dialog-top-left .p-dialog-enter, + .p-dialog-top-left .p-dialog-exit-active, + .p-dialog-bottom-left .p-dialog-enter, + .p-dialog-bottom-left .p-dialog-exit-active { + transform: translate3d(-100%, 0px, 0px); + } + + .p-dialog-right .p-dialog-enter, + .p-dialog-right .p-dialog-exit-active, + .p-dialog-top-right .p-dialog-enter, + .p-dialog-top-right .p-dialog-exit-active, + .p-dialog-bottom-right .p-dialog-enter, + .p-dialog-bottom-right .p-dialog-exit-active { + transform: translate3d(100%, 0px, 0px); + } + + .p-dialog-top .p-dialog-enter-active, + .p-dialog-bottom .p-dialog-enter-active, + .p-dialog-left .p-dialog-enter-active, + .p-dialog-top-left .p-dialog-enter-active, + .p-dialog-bottom-left .p-dialog-enter-active, + .p-dialog-right .p-dialog-enter-active, + .p-dialog-top-right .p-dialog-enter-active, + .p-dialog-bottom-right .p-dialog-enter-active { + transform: translate3d(0px, 0px, 0px); + transition: all 0.3s ease-out; + } + + .p-dialog-top .p-dialog-exit-active, + .p-dialog-bottom .p-dialog-exit-active, + .p-dialog-left .p-dialog-exit-active, + .p-dialog-top-left .p-dialog-exit-active, + .p-dialog-bottom-left .p-dialog-exit-active, + .p-dialog-right .p-dialog-exit-active, + .p-dialog-top-right .p-dialog-exit-active, + .p-dialog-bottom-right .p-dialog-exit-active { + transition: all 0.3s ease-out; + } + + /* Maximize */ + .p-dialog-maximized { + transition: none; + transform: none; + margin: 0 !important; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + } + + .p-dialog-maximized .p-dialog-content { + flex-grow: 1; + } + + .p-confirm-dialog .p-dialog-content { + display: flex; + align-items: center; + } + + /* Resizable */ + .p-dialog .p-resizable-handle { + position: absolute; + font-size: 0.1px; + display: block; + cursor: se-resize; + width: 12px; + height: 12px; + right: 1px; + bottom: 1px; + } + + .p-dialog-draggable .p-dialog-header { + cursor: move; + } } - -.p-dialog-draggable .p-dialog-header { - cursor: move; -} `; const inlineStyles = { diff --git a/components/lib/divider/DividerBase.js b/components/lib/divider/DividerBase.js index 9d4ebb8a64..c78322b02c 100644 --- a/components/lib/divider/DividerBase.js +++ b/components/lib/divider/DividerBase.js @@ -18,89 +18,91 @@ const classes = { }; 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-horizontal.p-divider-left { - justify-content: flex-start; -} - -.p-divider-horizontal.p-divider-right { - justify-content: flex-end; -} - -.p-divider-horizontal.p-divider-center { - justify-content: center; -} - -.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-vertical.p-divider-top { - align-items: flex-start; -} - -.p-divider-vertical.p-divider-center { - align-items: center; -} - -.p-divider-vertical.p-divider-bottom { - align-items: flex-end; -} - -.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-horizontal:before { - border-left-style: dotted; +@layer primereact { + .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-horizontal.p-divider-left { + justify-content: flex-start; + } + + .p-divider-horizontal.p-divider-right { + justify-content: flex-end; + } + + .p-divider-horizontal.p-divider-center { + justify-content: center; + } + + .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-vertical.p-divider-top { + align-items: flex-start; + } + + .p-divider-vertical.p-divider-center { + align-items: center; + } + + .p-divider-vertical.p-divider-bottom { + align-items: flex-end; + } + + .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-horizontal:before { + border-left-style: dotted; + } } `; diff --git a/components/lib/dock/DockBase.js b/components/lib/dock/DockBase.js index 3cc0e3054f..25af6dc1ef 100644 --- a/components/lib/dock/DockBase.js +++ b/components/lib/dock/DockBase.js @@ -23,123 +23,125 @@ const classes = { }; const styles = ` -.p-dock { - position: absolute; - z-index: 1; - display: flex; - justify-content: center; - align-items: center; - pointer-events: none; -} - -.p-dock-container { - display: flex; - pointer-events: auto; -} - -.p-dock-list { - margin: 0; - padding: 0; - list-style: none; - display: flex; - align-items: center; - justify-content: center; - pointer-events: auto; -} - -.p-dock-magnification .p-dock-item { - transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); - will-change: transform; -} - -.p-dock-action { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - cursor: default; -} - -.p-dock-magnification .p-dock-item-second-prev, -.p-dock-magnification .p-dock-item-second-next { - transform: scale(1.2); -} - -.p-dock-magnification .p-dock-item-prev, -.p-dock-magnification .p-dock-item-next { - transform: scale(1.4); -} - -.p-dock-magnification .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-magnification .p-dock-item { - transform-origin: center top; -} - -.p-dock-top .p-dock-container { - flex-direction: column-reverse; -} - -/* bottom */ -.p-dock-bottom { - left: 0; - bottom: 0; - width: 100%; -} - -.p-dock-bottom.p-dock-magnification .p-dock-item { - transform-origin: center bottom; -} - -.p-dock-bottom .p-dock-container { - flex-direction: column; -} - -/* right */ -.p-dock-right { - right: 0; - top: 0; - height: 100%; -} - -.p-dock-right.p-dock-magnification .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-magnification .p-dock-item { - transform-origin: center left; -} - -.p-dock-left .p-dock-list { - flex-direction: column; -} - -.p-dock-left .p-dock-container { - flex-direction: row-reverse; +@layer primereact { + .p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; + } + + .p-dock-container { + display: flex; + pointer-events: auto; + } + + .p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + pointer-events: auto; + } + + .p-dock-magnification .p-dock-item { + transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + } + + .p-dock-action { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + } + + .p-dock-magnification .p-dock-item-second-prev, + .p-dock-magnification .p-dock-item-second-next { + transform: scale(1.2); + } + + .p-dock-magnification .p-dock-item-prev, + .p-dock-magnification .p-dock-item-next { + transform: scale(1.4); + } + + .p-dock-magnification .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-magnification .p-dock-item { + transform-origin: center top; + } + + .p-dock-top .p-dock-container { + flex-direction: column-reverse; + } + + /* bottom */ + .p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; + } + + .p-dock-bottom.p-dock-magnification .p-dock-item { + transform-origin: center bottom; + } + + .p-dock-bottom .p-dock-container { + flex-direction: column; + } + + /* right */ + .p-dock-right { + right: 0; + top: 0; + height: 100%; + } + + .p-dock-right.p-dock-magnification .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-magnification .p-dock-item { + transform-origin: center left; + } + + .p-dock-left .p-dock-list { + flex-direction: column; + } + + .p-dock-left .p-dock-container { + flex-direction: row-reverse; + } } `; diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index 9cae2d79b1..3581003613 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -45,89 +45,91 @@ const classes = { }; const styles = ` -.p-dropdown { - display: inline-flex; - cursor: pointer; - position: relative; - user-select: none; -} - -.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; - visibility: hidden; -} - -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-items { - margin: 0; - padding: 0; - list-style-type: none; -} - -.p-dropdown-filter { - width: 100%; -} - -.p-dropdown-filter-container { - position: relative; -} - -.p-dropdown-clear-icon, -.p-dropdown-filter-icon, -.p-dropdown-filter-clear-icon { - position: absolute; - top: 50%; - margin-top: -.5rem; -} - -.p-fluid .p-dropdown { - display: flex; -} - -.p-fluid .p-dropdown .p-dropdown-label { - width: 1%; +@layer primereact { + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + + .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; + visibility: hidden; + } + + 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-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-dropdown-filter { + width: 100%; + } + + .p-dropdown-filter-container { + position: relative; + } + + .p-dropdown-clear-icon, + .p-dropdown-filter-icon, + .p-dropdown-filter-clear-icon { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .p-fluid .p-dropdown { + display: flex; + } + + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } } `; diff --git a/components/lib/fieldset/FieldsetBase.js b/components/lib/fieldset/FieldsetBase.js index 067a6d5497..112cb30402 100644 --- a/components/lib/fieldset/FieldsetBase.js +++ b/components/lib/fieldset/FieldsetBase.js @@ -33,23 +33,25 @@ export const FieldsetBase = ComponentBase.extend({ transition: 'p-toggleable-content' }, 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 primereact { + .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/FileUploadBase.js b/components/lib/fileupload/FileUploadBase.js index e8e3e2d3fd..65f37ee3ca 100644 --- a/components/lib/fileupload/FileUploadBase.js +++ b/components/lib/fileupload/FileUploadBase.js @@ -23,63 +23,65 @@ const classes = { }; const styles = ` -.p-fileupload-content { - position: relative; -} - -.p-fileupload-row { - display: flex; - align-items: center; -} - -.p-fileupload-row > div { - flex: 1 1 auto; - width: 25%; -} - -.p-fileupload-row > div:last-child { - text-align: right; -} - -.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-button.p-fileupload-choose input[type='file'] { - display: none; -} - -.p-fileupload-choose.p-fileupload-choose-selected input[type='file'] { - display: none; -} - -.p-fileupload-filename { - word-break: break-all; -} - -.p-fileupload-file-thumbnail { - flex-shrink: 0; -} - -.p-fileupload-file-badge { - margin: 0.5rem; -} - -.p-fluid .p-fileupload .p-button { - width: auto; +@layer primereact { + .p-fileupload-content { + position: relative; + } + + .p-fileupload-row { + display: flex; + align-items: center; + } + + .p-fileupload-row > div { + flex: 1 1 auto; + width: 25%; + } + + .p-fileupload-row > div:last-child { + text-align: right; + } + + .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-button.p-fileupload-choose input[type='file'] { + display: none; + } + + .p-fileupload-choose.p-fileupload-choose-selected input[type='file'] { + display: none; + } + + .p-fileupload-filename { + word-break: break-all; + } + + .p-fileupload-file-thumbnail { + flex-shrink: 0; + } + + .p-fileupload-file-badge { + margin: 0.5rem; + } + + .p-fluid .p-fileupload .p-button { + width: auto; + } } `; diff --git a/components/lib/galleria/GalleriaBase.js b/components/lib/galleria/GalleriaBase.js index e4040b5116..826b880a52 100644 --- a/components/lib/galleria/GalleriaBase.js +++ b/components/lib/galleria/GalleriaBase.js @@ -70,303 +70,305 @@ const classes = { }; 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: -.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 .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: .5; -} - -.p-galleria-thumbnail-item:hover { - opacity: 1; - transition: opacity .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; - pointer-events: none; -} - -.p-galleria-mask.p-component-overlay { - pointer-events: auto; -} - -.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: -.5rem; -} - -/* Animation */ -.p-galleria-enter { - opacity: 0; - transform: scale(0.7); -} - -.p-galleria-enter-active { - opacity: 1; - transform: scale(1); - transition: all 150ms cubic-bezier(0, 0, 0.2, 1); -} - -.p-galleria-enter-done { - transform: none; -} - -.p-galleria-exit { - opacity: 1; -} - -.p-galleria-exit-active { - opacity: 0; - transform: scale(0.7); - transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1); -} - -.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 primereact { + .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: -.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 .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: .5; + } + + .p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity .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; + pointer-events: none; + } + + .p-galleria-mask.p-component-overlay { + pointer-events: auto; + } + + .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: -.5rem; + } + + /* Animation */ + .p-galleria-enter { + opacity: 0; + transform: scale(0.7); + } + + .p-galleria-enter-active { + opacity: 1; + transform: scale(1); + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-galleria-enter-done { + transform: none; + } + + .p-galleria-exit { + opacity: 1; + } + + .p-galleria-exit-active { + opacity: 0; + transform: scale(0.7); + transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1); + } + + .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/ImageBase.js b/components/lib/image/ImageBase.js index 8c507cbae9..92e94820ca 100644 --- a/components/lib/image/ImageBase.js +++ b/components/lib/image/ImageBase.js @@ -21,88 +21,90 @@ const classes = { }; 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 .3s; -} - -.p-image-preview-icon { - font-size: 1.5rem; -} - -.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; - z-index: 1; -} - -.p-image-action.p-link { - display: flex; - justify-content: center; - align-items: center; -} - -.p-image-preview { - transition: transform .15s; - max-width: 100vw; - max-height: 100vh; - width: 100%; - height: 100%; -} - -.p-image-preview-enter { - opacity: 0; - transform: scale(0.7); -} - -.p-image-preview-enter-active { - opacity: 1; - transform: scale(1); - transition: all 150ms cubic-bezier(0, 0, 0.2, 1); -} - -.p-image-preview-enter-done { - transform: none; -} - -.p-image-preview-exit { - opacity: 1; -} - -.p-image-preview-exit-active { - opacity: 0; - transform: scale(0.7); - transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1); +@layer primereact { + .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 .3s; + } + + .p-image-preview-icon { + font-size: 1.5rem; + } + + .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; + z-index: 1; + } + + .p-image-action.p-link { + display: flex; + justify-content: center; + align-items: center; + } + + .p-image-preview { + transition: transform .15s; + max-width: 100vw; + max-height: 100vh; + width: 100%; + height: 100%; + } + + .p-image-preview-enter { + opacity: 0; + transform: scale(0.7); + } + + .p-image-preview-enter-active { + opacity: 1; + transform: scale(1); + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); + } + + .p-image-preview-enter-done { + transform: none; + } + + .p-image-preview-exit { + opacity: 1; + } + + .p-image-preview-exit-active { + opacity: 0; + transform: scale(0.7); + transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1); + } } `; diff --git a/components/lib/inplace/InplaceBase.js b/components/lib/inplace/InplaceBase.js index f2d1e7c6f3..f2fd14d83d 100644 --- a/components/lib/inplace/InplaceBase.js +++ b/components/lib/inplace/InplaceBase.js @@ -15,26 +15,28 @@ const classes = { }; 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%; -} - -.p-inplace-content-close { - margin-left: .25rem; +@layer primereact { + .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%; + } + + .p-inplace-content-close { + margin-left: .25rem; + } } `; diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js index 95d74996f1..c4e17d0dbc 100644 --- a/components/lib/inputnumber/InputNumberBase.js +++ b/components/lib/inputnumber/InputNumberBase.js @@ -24,105 +24,107 @@ const classes = { }; 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 primereact { + .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/InputSwitchBase.js b/components/lib/inputswitch/InputSwitchBase.js index 3a8880dd12..8227022d8b 100644 --- a/components/lib/inputswitch/InputSwitchBase.js +++ b/components/lib/inputswitch/InputSwitchBase.js @@ -12,25 +12,27 @@ const classes = { }; const styles = ` -.p-inputswitch { - position: relative; - 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 primereact { + .p-inputswitch { + position: relative; + 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/inputtextarea/InputTextareaBase.js b/components/lib/inputtextarea/InputTextareaBase.js index 6fccf868b9..069353ec54 100644 --- a/components/lib/inputtextarea/InputTextareaBase.js +++ b/components/lib/inputtextarea/InputTextareaBase.js @@ -15,13 +15,15 @@ const classes = { }; const styles = ` -.p-inputtextarea-resizable { - overflow: hidden; - resize: none; -} - -.p-fluid .p-inputtextarea { - width: 100%; +@layer primereact { + .p-inputtextarea-resizable { + overflow: hidden; + resize: none; + } + + .p-fluid .p-inputtextarea { + width: 100%; + } } `; diff --git a/components/lib/knob/KnobBase.js b/components/lib/knob/KnobBase.js index b966f0c717..a898d1d771 100644 --- a/components/lib/knob/KnobBase.js +++ b/components/lib/knob/KnobBase.js @@ -44,18 +44,20 @@ export const KnobBase = ComponentBase.extend({ stroke-dashoffset: 0; } } - .p-knob-range { - fill: none; - transition: stroke .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 primereact { + .p-knob-range { + fill: none; + transition: stroke .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/ListBoxBase.js b/components/lib/listbox/ListBoxBase.js index 98c25666c1..a246c55cca 100644 --- a/components/lib/listbox/ListBoxBase.js +++ b/components/lib/listbox/ListBoxBase.js @@ -30,34 +30,36 @@ const classes = { }; 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-filter-container { - position: relative; -} - -.p-listbox-filter-icon { - position: absolute; - top: 50%; - margin-top: -.5rem; -} - -.p-listbox-filter { - width: 100%; +@layer primereact { + .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-filter-container { + position: relative; + } + + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .p-listbox-filter { + width: 100%; + } } `; diff --git a/components/lib/megamenu/MegaMenuBase.js b/components/lib/megamenu/MegaMenuBase.js index ef5d609c57..712a16fc26 100644 --- a/components/lib/megamenu/MegaMenuBase.js +++ b/components/lib/megamenu/MegaMenuBase.js @@ -59,124 +59,126 @@ const classes = { }; 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-custom, -.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-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%; -} - -.p-megamenu-button { - display: none; - cursor: pointer; - align-items: center; - justify-content: center; - text-decoration: none; +@layer primereact { + .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-custom, + .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-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%; + } + + .p-megamenu-button { + display: none; + cursor: pointer; + align-items: center; + justify-content: center; + text-decoration: none; + } } `; diff --git a/components/lib/mention/MentionBase.js b/components/lib/mention/MentionBase.js index 87be382ddd..f261b7ed95 100644 --- a/components/lib/mention/MentionBase.js +++ b/components/lib/mention/MentionBase.js @@ -19,43 +19,45 @@ const classes = { }; const styles = ` -.p-mention { - display: inline-flex; - position: relative; -} - -.p-autocomplete-loader { - position: absolute; - top: 50%; - margin-top: -.5rem; -} - -.p-mention .p-mention-panel { - min-width: 100%; -} - -.p-mention-panel { - position: absolute; - top: 0; - left: 0; - overflow: auto; -} - -.p-mention-items { - margin: 0; - padding: 0; - list-style-type: none; -} - -.p-mention-item { - cursor: pointer; - white-space: nowrap; - position: relative; - overflow: hidden; -} - -.p-fluid .p-mention { - display: flex; +@layer primereact { + .p-mention { + display: inline-flex; + position: relative; + } + + .p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .p-mention .p-mention-panel { + min-width: 100%; + } + + .p-mention-panel { + position: absolute; + top: 0; + left: 0; + overflow: auto; + } + + .p-mention-items { + margin: 0; + padding: 0; + list-style-type: none; + } + + .p-mention-item { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + } + + .p-fluid .p-mention { + display: flex; + } } `; diff --git a/components/lib/menu/MenuBase.js b/components/lib/menu/MenuBase.js index 50d4da76da..90ab7ff9d8 100644 --- a/components/lib/menu/MenuBase.js +++ b/components/lib/menu/MenuBase.js @@ -3,30 +3,32 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const styles = ` -.p-menu-overlay { - position: absolute; - /* Github #3122: Prevent animation flickering */ - top: -9999px; - left: -9999px; -} - -.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 primereact { + .p-menu-overlay { + position: absolute; + /* Github #3122: Prevent animation flickering */ + top: -9999px; + left: -9999px; + } + + .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/MenubarBase.js b/components/lib/menubar/MenubarBase.js index f2ea931df6..631717a5e9 100644 --- a/components/lib/menubar/MenubarBase.js +++ b/components/lib/menubar/MenubarBase.js @@ -20,77 +20,79 @@ const classes = { }; 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-link .p-submenu-icon { - margin-left: auto; -} - -.p-menubar .p-menubar-custom, -.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 primereact { + .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-link .p-submenu-icon { + margin-left: auto; + } + + .p-menubar .p-menubar-custom, + .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/MessageBase.js b/components/lib/message/MessageBase.js index 7eb6367ff0..c18598f1fd 100644 --- a/components/lib/message/MessageBase.js +++ b/components/lib/message/MessageBase.js @@ -27,21 +27,23 @@ export const MessageBase = ComponentBase.extend({ text: 'p-inline-message-text' }, styles: ` - .p-inline-message { - display: inline-flex; - align-items: center; - justify-content: center; - vertical-align: top; + @layer primereact { + .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; + } } - - .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/messages/MessagesBase.js b/components/lib/messages/MessagesBase.js index fe150273f4..c4cfc51acd 100644 --- a/components/lib/messages/MessagesBase.js +++ b/components/lib/messages/MessagesBase.js @@ -2,47 +2,49 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const styles = ` -.p-message-wrapper { - display: flex; - align-items: center; -} - -.p-message-close { - display: flex; - align-items: center; - justify-content: center; -} - -.p-message-close.p-link { - margin-left: auto; - overflow: hidden; - position: relative; -} - -.p-message-enter { - opacity: 0; -} - -.p-message-enter-active { - opacity: 1; - transition: opacity .3s; -} - -.p-message-exit { - opacity: 1; - max-height: 1000px; -} - -.p-message-exit-active { - opacity: 0; - max-height: 0; - margin: 0; - overflow: hidden; - transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s; -} - -.p-message-exit-active .p-message-close { - display: none; +@layer primereact { + .p-message-wrapper { + display: flex; + align-items: center; + } + + .p-message-close { + display: flex; + align-items: center; + justify-content: center; + } + + .p-message-close.p-link { + margin-left: auto; + overflow: hidden; + position: relative; + } + + .p-message-enter { + opacity: 0; + } + + .p-message-enter-active { + opacity: 1; + transition: opacity .3s; + } + + .p-message-exit { + opacity: 1; + max-height: 1000px; + } + + .p-message-exit-active { + opacity: 0; + max-height: 0; + margin: 0; + overflow: hidden; + transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s; + } + + .p-message-exit-active .p-message-close { + display: none; + } } `; diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js index d432863549..32697a6984 100644 --- a/components/lib/multiselect/MultiSelectBase.js +++ b/components/lib/multiselect/MultiSelectBase.js @@ -60,133 +60,135 @@ const classes = { }; const styles = ` -.p-multiselect { - display: inline-flex; - user-select: none; - cursor: pointer; -} - -.p-multiselect-trigger { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - cursor: pointer; -} - -.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-inline.p-multiselect-panel { - border: none; - position: initial; - background: none; - box-shadow: none; -} - -.p-multiselect-inline.p-multiselect-panel .p-multiselect-items { - padding: 0; -} - -.p-multiselect-flex.p-multiselect-panel .p-multiselect-items { - display: flex; - flex-wrap: wrap; -} - -.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-header { - display: flex; - align-items: center; - justify-content: space-between; -} - -.p-multiselect-select-all-label { - margin-left: 0.5rem; -} - -.p-multiselect-filter-container { - position: relative; - flex: 1 1 auto; -} - -.p-multiselect-filter-icon { - position: absolute; - top: 50%; - margin-top: -.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-multiselect-clear-icon { - position: absolute; - top: 50%; - margin-top: -.5rem; -} - -.p-fluid .p-multiselect { - display: flex; +@layer primereact { + .p-multiselect { + display: inline-flex; + user-select: none; + cursor: pointer; + } + + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + cursor: pointer; + } + + .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-inline.p-multiselect-panel { + border: none; + position: initial; + background: none; + box-shadow: none; + } + + .p-multiselect-inline.p-multiselect-panel .p-multiselect-items { + padding: 0; + } + + .p-multiselect-flex.p-multiselect-panel .p-multiselect-items { + display: flex; + flex-wrap: wrap; + } + + .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-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-multiselect-select-all-label { + margin-left: 0.5rem; + } + + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -.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-multiselect-clear-icon { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .p-fluid .p-multiselect { + display: flex; + } } `; diff --git a/components/lib/orderlist/OrderListBase.js b/components/lib/orderlist/OrderListBase.js index 2ceca44e35..414dd2cbb3 100644 --- a/components/lib/orderlist/OrderListBase.js +++ b/components/lib/orderlist/OrderListBase.js @@ -17,64 +17,66 @@ const classes = { }; 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-filter { - position: relative; -} - -.p-orderlist-filter-icon { - position: absolute; - top: 50%; - margin-top: -.5rem; -} - -.p-orderlist-filter-input { - width: 100%; -} - -.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; -} - -.p-orderlist .p-orderlist-droppoint { - height: 0.5rem; -} - -.p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight { - background: var(--primary-color); +@layer primereact { + .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-filter { + position: relative; + } + + .p-orderlist-filter-icon { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .p-orderlist-filter-input { + width: 100%; + } + + .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; + } + + .p-orderlist .p-orderlist-droppoint { + height: 0.5rem; + } + + .p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight { + background: var(--primary-color); + } } `; diff --git a/components/lib/organizationchart/OrganizationChartBase.js b/components/lib/organizationchart/OrganizationChartBase.js index 81098c79b2..46fb4139b6 100644 --- a/components/lib/organizationchart/OrganizationChartBase.js +++ b/components/lib/organizationchart/OrganizationChartBase.js @@ -2,57 +2,59 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; 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 .75rem; -} - -.p-organizationchart-node-content { - display: inline-block; - position: relative; -} - -.p-organizationchart-node-content .p-node-toggler { - position: absolute; - bottom: -.75rem; - margin-left: -.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: .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 primereact { + .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 .75rem; + } + + .p-organizationchart-node-content { + display: inline-block; + position: relative; + } + + .p-organizationchart-node-content .p-node-toggler { + position: absolute; + bottom: -.75rem; + margin-left: -.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: .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/OverlayPanelBase.js b/components/lib/overlaypanel/OverlayPanelBase.js index 1e99fd94f5..21aedc35cf 100644 --- a/components/lib/overlaypanel/OverlayPanelBase.js +++ b/components/lib/overlaypanel/OverlayPanelBase.js @@ -15,83 +15,85 @@ const classes = { }; const styles = ` -.p-overlaypanel { - position: absolute; - margin-top: 10px; - /* Github #3122: Prevent animation flickering */ - top: -9999px; - left: -9999px; -} - -.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 { - opacity: 0; - transform: scaleY(0.8); -} - -.p-overlaypanel-enter-active { - opacity: 1; - transform: scaleY(1); - transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); -} - -.p-overlaypanel-enter-done { - transform: none; -} - -.p-overlaypanel-exit { - opacity: 1; -} - -.p-overlaypanel-exit-active { - opacity: 0; - transition: opacity .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 primereact { + .p-overlaypanel { + position: absolute; + margin-top: 10px; + /* Github #3122: Prevent animation flickering */ + top: -9999px; + left: -9999px; + } + + .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 { + opacity: 0; + transform: scaleY(0.8); + } + + .p-overlaypanel-enter-active { + opacity: 1; + transform: scaleY(1); + transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1); + } + + .p-overlaypanel-enter-done { + transform: none; + } + + .p-overlaypanel-exit { + opacity: 1; + } + + .p-overlaypanel-exit-active { + opacity: 0; + transition: opacity .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/PaginatorBase.js b/components/lib/paginator/PaginatorBase.js index 659f1f69d8..0dcab36baa 100644 --- a/components/lib/paginator/PaginatorBase.js +++ b/components/lib/paginator/PaginatorBase.js @@ -23,40 +23,42 @@ const classes = { }; const styles = ` -.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 primereact { + .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/PanelBase.js b/components/lib/panel/PanelBase.js index 56dbb58e1d..00366f3dab 100644 --- a/components/lib/panel/PanelBase.js +++ b/components/lib/panel/PanelBase.js @@ -39,24 +39,26 @@ export const PanelBase = ComponentBase.extend({ transition: 'p-toggleable-content' }, 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 primereact { + .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/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js index 5fe830006b..03e9efc983 100644 --- a/components/lib/panelmenu/PanelMenuBase.js +++ b/components/lib/panelmenu/PanelMenuBase.js @@ -26,37 +26,38 @@ const classes = { }; const styles = ` -.p-panelmenu .p-panelmenu-header-link { - display: flex; - align-items: center; - user-select: none; - cursor: pointer; - position: relative; - text-decoration: none; -} - -.p-panelmenu .p-panelmenu-header-link: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; -} - -.p-panelmenu .p-menuitem-text { - line-height: 1; +@layer primereact { + .p-panelmenu .p-panelmenu-header-link { + display: flex; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + } + + .p-panelmenu .p-panelmenu-header-link: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; + } + + .p-panelmenu .p-menuitem-text { + line-height: 1; + } } - `; export const PanelMenuBase = ComponentBase.extend({ diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js index f73443d556..4386ad76e9 100644 --- a/components/lib/password/PasswordBase.js +++ b/components/lib/password/PasswordBase.js @@ -26,38 +26,40 @@ const classes = { }; const styles = ` -.p-password { - position: relative; - display: inline-flex; -} - -.p-password-panel { - position: absolute; - top: 0; - left: 0; -} - -.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 primereact { + .p-password { + position: relative; + display: inline-flex; + } + + .p-password-panel { + position: absolute; + top: 0; + left: 0; + } + + .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/PickListBase.js b/components/lib/picklist/PickListBase.js index 0b56641adc..8f3b52fb5c 100644 --- a/components/lib/picklist/PickListBase.js +++ b/components/lib/picklist/PickListBase.js @@ -19,47 +19,49 @@ const classes = { }; 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-filter { - position: relative; -} - -.p-picklist-filter-icon { - position: absolute; - top: 50%; - margin-top: -.5rem; -} - -.p-picklist-filter-input { - width: 100%; +@layer primereact { + .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-filter { + position: relative; + } + + .p-picklist-filter-icon { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .p-picklist-filter-input { + width: 100%; + } } `; diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js index 09573f3581..cdecbdbaf5 100644 --- a/components/lib/progressbar/ProgressBarBase.js +++ b/components/lib/progressbar/ProgressBarBase.js @@ -9,32 +9,45 @@ const classes = { }; 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 { +@layer primereact { + .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; @@ -42,22 +55,11 @@ const styles = ` 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-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 { diff --git a/components/lib/progressspinner/ProgressSpinnerBase.js b/components/lib/progressspinner/ProgressSpinnerBase.js index 0b7d1601fb..b05adbf559 100644 --- a/components/lib/progressspinner/ProgressSpinnerBase.js +++ b/components/lib/progressspinner/ProgressSpinnerBase.js @@ -6,39 +6,41 @@ const classes = { circle: 'p-progress-spinner-circle' }; 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 { - animation: p-progress-spinner-rotate 2s linear infinite; - height: 100%; - transform-origin: center center; - width: 100%; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; -} - -.p-progress-spinner-circle { - stroke-dasharray: 89, 200; - stroke-dashoffset: 0; - stroke: #d62d20; - animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; - stroke-linecap: round; +@layer primereact { + .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 { + animation: p-progress-spinner-rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + } + + .p-progress-spinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: #d62d20; + animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; + stroke-linecap: round; + } } @keyframes p-progress-spinner-rotate { diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js index 7f030ea535..5704c26fc6 100644 --- a/components/lib/radiobutton/RadioButtonBase.js +++ b/components/lib/radiobutton/RadioButtonBase.js @@ -18,32 +18,33 @@ const classes = { }; const styles = ` -.p-radiobutton { - display: inline-flex; - cursor: pointer; - user-select: none; - vertical-align: bottom; -} - -.p-radiobutton-box { - display: flex; - justify-content: center; - align-items: center; -} - -.p-radiobutton-icon { - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - transform: translateZ(0) scale(.1); - border-radius: 50%; - visibility: hidden; -} - -.p-radiobutton-box.p-highlight .p-radiobutton-icon { - transform: translateZ(0) scale(1.0, 1.0); - visibility: visible; +@layer primereact { + .p-radiobutton { + display: inline-flex; + cursor: pointer; + user-select: none; + vertical-align: bottom; + } + + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(.1); + border-radius: 50%; + visibility: hidden; + } + + .p-radiobutton-box.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1.0, 1.0); + visibility: visible; + } } - `; export const RadioButtonBase = ComponentBase.extend({ diff --git a/components/lib/rating/RatingBase.js b/components/lib/rating/RatingBase.js index a9225219b7..1e6820586e 100644 --- a/components/lib/rating/RatingBase.js +++ b/components/lib/rating/RatingBase.js @@ -18,21 +18,22 @@ const classes = { }; const styles = ` -.p-rating { - 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 primereact { + .p-rating { + 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; + } } - `; export const RatingBase = ComponentBase.extend({ diff --git a/components/lib/ripple/RippleBase.js b/components/lib/ripple/RippleBase.js index 10da749581..8badf3ec15 100644 --- a/components/lib/ripple/RippleBase.js +++ b/components/lib/ripple/RippleBase.js @@ -1,25 +1,27 @@ import { ObjectUtils } from '../utils/Utils'; 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); -} - -.p-ink-active { - animation: ripple 0.4s linear; -} - -.p-ripple-disabled .p-ink { - display: none !important; +@layer primereact { + .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); + } + + .p-ink-active { + animation: ripple 0.4s linear; + } + + .p-ripple-disabled .p-ink { + display: none !important; + } } @keyframes ripple { diff --git a/components/lib/scrollpanel/ScrollPanelBase.js b/components/lib/scrollpanel/ScrollPanelBase.js index 93f2f7a013..e6e086bacf 100644 --- a/components/lib/scrollpanel/ScrollPanelBase.js +++ b/components/lib/scrollpanel/ScrollPanelBase.js @@ -18,57 +18,58 @@ export const ScrollPanelBase = ComponentBase.extend({ bary: 'p-scrollpanel-bar p-scrollpanel-bar-y' }, styles: ` - .p-scrollpanel-wrapper { - overflow: hidden; - width: 100%; - height: 100%; - position: relative; - z-index: 1; - float: left; + @layer primereact { + .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: hidden; + box-sizing: border-box; + } + + .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; + } } - - .p-scrollpanel-content { - height: calc(100% + 18px); - width: calc(100% + 18px); - padding: 0 18px 18px 0; - position: relative; - overflow: hidden; - box-sizing: border-box; - } - - .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/ScrollTopBase.js b/components/lib/scrolltop/ScrollTopBase.js index f8e549ae38..445ebe5382 100644 --- a/components/lib/scrolltop/ScrollTopBase.js +++ b/components/lib/scrolltop/ScrollTopBase.js @@ -11,43 +11,45 @@ const classes = { }; 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-helper { - display: none !important; -} - -.p-scrolltop-enter { - opacity: 0; -} - -.p-scrolltop-enter-active { - opacity: 1; - transition: opacity .15s; -} - -.p-scrolltop-exit { - opacity: 1; -} - -.p-scrolltop-exit-active { - opacity: 0; - transition: opacity .15s; +@layer primereact { + .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-helper { + display: none !important; + } + + .p-scrolltop-enter { + opacity: 0; + } + + .p-scrolltop-enter-active { + opacity: 1; + transition: opacity .15s; + } + + .p-scrolltop-exit { + opacity: 1; + } + + .p-scrolltop-exit-active { + opacity: 0; + transition: opacity .15s; + } } `; diff --git a/components/lib/sidebar/SidebarBase.js b/components/lib/sidebar/SidebarBase.js index adcc728380..008b034e1c 100644 --- a/components/lib/sidebar/SidebarBase.js +++ b/components/lib/sidebar/SidebarBase.js @@ -36,211 +36,213 @@ const classes = { }; const styles = ` -.p-sidebar-mask { - display: none; - justify-content: center; - align-items: center; - pointer-events: none; - background-color: transparent; - transition-property: background-color; -} - -.p-sidebar-visible { - display: flex; -} - -.p-sidebar-mask.p-component-overlay { - pointer-events: auto; -} - -.p-sidebar { - display: flex; - flex-direction: column; - pointer-events: auto; - transform: translate3d(0px, 0px, 0px); - position: relative; -} - -.p-sidebar-content { - overflow-y: auto; - flex-grow: 1; -} - -.p-sidebar-header { - display: flex; - align-items: center; - justify-content: flex-end; -} - -.p-sidebar-custom-header { - justify-content: space-between; -} - -.p-sidebar-icons { - display: flex; - align-items: center; - 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 */ -/* Top, Bottom, Left and Right */ -.p-sidebar-top .p-sidebar-enter, -.p-sidebar-top .p-sidebar-exit-active { - transform: translate3d(0px, -100%, 0px); -} - -.p-sidebar-bottom .p-sidebar-enter, -.p-sidebar-bottom .p-sidebar-exit-active { - transform: translate3d(0px, 100%, 0px); -} - -.p-sidebar-left .p-sidebar-enter, -.p-sidebar-left .p-sidebar-exit-active { - transform: translate3d(-100%, 0px, 0px); -} - -.p-sidebar-right .p-sidebar-enter, -.p-sidebar-right .p-sidebar-exit-active { - transform: translate3d(100%, 0px, 0px); -} - -.p-sidebar-top .p-sidebar-enter-active, -.p-sidebar-bottom .p-sidebar-enter-active, -.p-sidebar-left .p-sidebar-enter-active, -.p-sidebar-right .p-sidebar-enter-active { - transform: translate3d(0px, 0px, 0px); - transition: all 0.3s; -} - -.p-sidebar-top .p-sidebar-enter-done, -.p-sidebar-bottom .p-sidebar-enter-done, -.p-sidebar-left .p-sidebar-enter-done, -.p-sidebar-right .p-sidebar-enter-done { - transform: none; -} - -.p-sidebar-top .p-sidebar-exit-active, -.p-sidebar-bottom .p-sidebar-exit-active, -.p-sidebar-left .p-sidebar-exit-active, -.p-sidebar-right .p-sidebar-exit-active { - transition: all 0.3s; -} - -/* Full */ -.p-sidebar-full .p-sidebar-enter { - opacity: 0; - transform: scale(0.5); -} - -.p-sidebar-full .p-sidebar-enter-active { - opacity: 1; - transform: scale(1); - transition: all 0.15s cubic-bezier(0, 0, 0.2, 1); -} - -.p-sidebar-full .p-sidebar-enter-done { - transform: none; -} - -.p-sidebar-full .p-sidebar-exit-active { - opacity: 0; - transform: scale(0.5); - transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 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-view, -.p-sidebar-right .p-sidebar-view, -.p-sidebar-top .p-sidebar-view, -.p-sidebar-bottom .p-sidebar-view { - width: 100%; - height: 100%; -} - -.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, +@layer primereact { + .p-sidebar-mask { + display: none; + justify-content: center; + align-items: center; + pointer-events: none; + background-color: transparent; + transition-property: background-color; + } + + .p-sidebar-visible { + display: flex; + } + + .p-sidebar-mask.p-component-overlay { + pointer-events: auto; + } + + .p-sidebar { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + } + + .p-sidebar-content { + overflow-y: auto; + flex-grow: 1; + } + + .p-sidebar-header { + display: flex; + align-items: center; + justify-content: flex-end; + } + + .p-sidebar-custom-header { + justify-content: space-between; + } + + .p-sidebar-icons { + display: flex; + align-items: center; + 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 */ + /* Top, Bottom, Left and Right */ + .p-sidebar-top .p-sidebar-enter, + .p-sidebar-top .p-sidebar-exit-active { + transform: translate3d(0px, -100%, 0px); + } + + .p-sidebar-bottom .p-sidebar-enter, + .p-sidebar-bottom .p-sidebar-exit-active { + transform: translate3d(0px, 100%, 0px); + } + + .p-sidebar-left .p-sidebar-enter, + .p-sidebar-left .p-sidebar-exit-active { + transform: translate3d(-100%, 0px, 0px); + } + + .p-sidebar-right .p-sidebar-enter, + .p-sidebar-right .p-sidebar-exit-active { + transform: translate3d(100%, 0px, 0px); + } + + .p-sidebar-top .p-sidebar-enter-active, + .p-sidebar-bottom .p-sidebar-enter-active, + .p-sidebar-left .p-sidebar-enter-active, + .p-sidebar-right .p-sidebar-enter-active { + transform: translate3d(0px, 0px, 0px); + transition: all 0.3s; + } + + .p-sidebar-top .p-sidebar-enter-done, + .p-sidebar-bottom .p-sidebar-enter-done, + .p-sidebar-left .p-sidebar-enter-done, + .p-sidebar-right .p-sidebar-enter-done { + transform: none; + } + + .p-sidebar-top .p-sidebar-exit-active, + .p-sidebar-bottom .p-sidebar-exit-active, + .p-sidebar-left .p-sidebar-exit-active, + .p-sidebar-right .p-sidebar-exit-active { + transition: all 0.3s; + } + + /* Full */ + .p-sidebar-full .p-sidebar-enter { + opacity: 0; + transform: scale(0.5); + } + + .p-sidebar-full .p-sidebar-enter-active { + opacity: 1; + transform: scale(1); + transition: all 0.15s cubic-bezier(0, 0, 0.2, 1); + } + + .p-sidebar-full .p-sidebar-enter-done { + transform: none; + } + + .p-sidebar-full .p-sidebar-exit-active { + opacity: 0; + transform: scale(0.5); + transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 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-lg, .p-sidebar-right .p-sidebar-md { - width: 20rem; + 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-view, + .p-sidebar-right .p-sidebar-view, + .p-sidebar-top .p-sidebar-view, + .p-sidebar-bottom .p-sidebar-view { + width: 100%; + height: 100%; + } + + .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; + } + } +} `; const inlineStyles = { diff --git a/components/lib/skeleton/SkeletonBase.js b/components/lib/skeleton/SkeletonBase.js index 85b73a0c98..d92bee8809 100644 --- a/components/lib/skeleton/SkeletonBase.js +++ b/components/lib/skeleton/SkeletonBase.js @@ -10,29 +10,31 @@ const classes = { }; const styles = ` -.p-skeleton { - position: relative; - 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-circle { - border-radius: 50%; -} - -.p-skeleton-none::after { - animation: none; +@layer primereact { + .p-skeleton { + position: relative; + 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-circle { + border-radius: 50%; + } + + .p-skeleton-none::after { + animation: none; + } } @keyframes p-skeleton-animation { diff --git a/components/lib/slidemenu/SlideMenuBase.js b/components/lib/slidemenu/SlideMenuBase.js index ffa6e97839..c9c19a136e 100644 --- a/components/lib/slidemenu/SlideMenuBase.js +++ b/components/lib/slidemenu/SlideMenuBase.js @@ -34,92 +34,94 @@ const classes = { }; const styles = ` -.p-slidemenu { - width: 12.5em; -} - -.p-slidemenu.p-slidemenu-overlay { - position: absolute; -} - -.p-slidemenu .p-menu-separator { - border-width: 1px 0 0 0; -} - -.p-slidemenu ul { - list-style: none; - margin: 0; - padding: 0; -} - -.p-slidemenu .p-slidemenu-rootlist { - position: absolute; - top: 0; -} - -.p-slidemenu .p-submenu-list { - display: none; - position: absolute; - top: 0; - width: 12.5em; -} - -.p-slidemenu .p-menuitem-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; -} - -.p-slidemenu .p-menuitem-icon { - vertical-align: middle; -} - -.p-slidemenu .p-menuitem-text { - vertical-align: middle; -} - -.p-slidemenu .p-menuitem { - position: relative; -} - -.p-slidemenu .p-menuitem-link .p-submenu-icon { - margin-left: auto; -} - -.p-slidemenu .p-slidemenu-wrapper { - position: relative; -} - -.p-slidemenu .p-slidemenu-content { - overflow-x: hidden; - overflow-y: auto; - position: relative; - height: 100%; -} - -.p-slidemenu-backward { - bottom: 0; - width: 100%; - padding: 0.25em; - cursor: pointer; -} - -.p-slidemenu-backward .p-slidemenu-backward-icon { - vertical-align: middle; -} - -.p-slidemenu-backward span { - vertical-align: middle; -} - -.p-slidemenu .p-menuitem-active { - position: static; -} - -.p-slidemenu .p-menuitem-active > .p-submenu-list { - display: block; +@layer primereact { + .p-slidemenu { + width: 12.5em; + } + + .p-slidemenu.p-slidemenu-overlay { + position: absolute; + } + + .p-slidemenu .p-menu-separator { + border-width: 1px 0 0 0; + } + + .p-slidemenu ul { + list-style: none; + margin: 0; + padding: 0; + } + + .p-slidemenu .p-slidemenu-rootlist { + position: absolute; + top: 0; + } + + .p-slidemenu .p-submenu-list { + display: none; + position: absolute; + top: 0; + width: 12.5em; + } + + .p-slidemenu .p-menuitem-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + } + + .p-slidemenu .p-menuitem-icon { + vertical-align: middle; + } + + .p-slidemenu .p-menuitem-text { + vertical-align: middle; + } + + .p-slidemenu .p-menuitem { + position: relative; + } + + .p-slidemenu .p-menuitem-link .p-submenu-icon { + margin-left: auto; + } + + .p-slidemenu .p-slidemenu-wrapper { + position: relative; + } + + .p-slidemenu .p-slidemenu-content { + overflow-x: hidden; + overflow-y: auto; + position: relative; + height: 100%; + } + + .p-slidemenu-backward { + bottom: 0; + width: 100%; + padding: 0.25em; + cursor: pointer; + } + + .p-slidemenu-backward .p-slidemenu-backward-icon { + vertical-align: middle; + } + + .p-slidemenu-backward span { + vertical-align: middle; + } + + .p-slidemenu .p-menuitem-active { + position: static; + } + + .p-slidemenu .p-menuitem-active > .p-submenu-list { + display: block; + } } `; diff --git a/components/lib/slider/SliderBase.js b/components/lib/slider/SliderBase.js index abf6aaa7a5..8e99753678 100644 --- a/components/lib/slider/SliderBase.js +++ b/components/lib/slider/SliderBase.js @@ -18,49 +18,51 @@ const classes = { }; const styles = ` -.p-slider { - position: relative; -} - -.p-slider .p-slider-handle { - position: absolute; - cursor: grab; - touch-action: none; - display: block; - z-index: 1; -} - -.p-slider .p-slider-handle.p-slider-handle-active { - z-index: 2; -} - -.p-slider-range { - position: absolute; - 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 primereact { + .p-slider { + position: relative; + } + + .p-slider .p-slider-handle { + position: absolute; + cursor: grab; + touch-action: none; + display: block; + z-index: 1; + } + + .p-slider .p-slider-handle.p-slider-handle-active { + z-index: 2; + } + + .p-slider-range { + position: absolute; + 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/SpeedDialBase.js b/components/lib/speeddial/SpeedDialBase.js index 31a2ff3b5c..e5f94ded08 100644 --- a/components/lib/speeddial/SpeedDialBase.js +++ b/components/lib/speeddial/SpeedDialBase.js @@ -2,78 +2,80 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const styles = ` -.p-speeddial { - position: absolute; - display: flex; - 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; -} - -.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; - text-decoration: none; -} - -.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 primereact { + .p-speeddial { + position: absolute; + display: flex; + 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; + } + + .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; + text-decoration: none; + } + + .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/SplitButtonBase.js b/components/lib/splitbutton/SplitButtonBase.js index 332b2c5562..1d6f8da4b4 100644 --- a/components/lib/splitbutton/SplitButtonBase.js +++ b/components/lib/splitbutton/SplitButtonBase.js @@ -25,36 +25,38 @@ const classes = { }; 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 primereact { + .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/SplitterBase.js b/components/lib/splitter/SplitterBase.js index 0b2aac58e4..bf20f632c6 100644 --- a/components/lib/splitter/SplitterBase.js +++ b/components/lib/splitter/SplitterBase.js @@ -8,63 +8,65 @@ const classes = { }; const styles = ` -.p-splitter { - display: flex; - flex-wrap: nowrap; -} - -.p-splitter-vertical { - flex-direction: column; -} - -.p-splitter-panel { - flex-grow: 1; -} - -.p-splitter-panel-nested { - display: flex; -} - -.p-splitter-panel .p-splitter { - flex-grow: 1; - border: 0 none; -} - -.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 primereact { + .p-splitter { + display: flex; + flex-wrap: nowrap; + } + + .p-splitter-vertical { + flex-direction: column; + } + + .p-splitter-panel { + flex-grow: 1; + } + + .p-splitter-panel-nested { + display: flex; + } + + .p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; + } + + .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/steps/StepsBase.js b/components/lib/steps/StepsBase.js index 3d9ce421ef..505528d183 100644 --- a/components/lib/steps/StepsBase.js +++ b/components/lib/steps/StepsBase.js @@ -22,52 +22,54 @@ const classes = { }; const styles = ` -.p-steps { - position: relative; -} - -.p-steps ul { - padding: 0; - margin: 0; - list-style-type: none; - display: flex; -} - -.p-steps-item { - position: relative; - display: flex; - justify-content: center; - flex: 1 1 auto; -} - -.p-steps-item .p-menuitem-link { - display: inline-flex; - flex-direction: column; - align-items: center; - overflow: hidden; - text-decoration: none; -} - -.p-steps.p-readonly .p-steps-item { - cursor: auto; -} - -.p-steps-item.p-steps-current .p-menuitem-link { - cursor: default; -} - -.p-steps-title { - white-space: nowrap; -} - -.p-steps-number { - display: flex; - align-items: center; - justify-content: center; -} - -.p-steps-title { - display: block; +@layer primereact { + .p-steps { + position: relative; + } + + .p-steps ul { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; + } + + .p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; + } + + .p-steps-item .p-menuitem-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + } + + .p-steps.p-readonly .p-steps-item { + cursor: auto; + } + + .p-steps-item.p-steps-current .p-menuitem-link { + cursor: default; + } + + .p-steps-title { + white-space: nowrap; + } + + .p-steps-number { + display: flex; + align-items: center; + justify-content: center; + } + + .p-steps-title { + display: block; + } } `; diff --git a/components/lib/tabmenu/TabMenuBase.js b/components/lib/tabmenu/TabMenuBase.js index 48c166cc7a..9b7a4f47da 100644 --- a/components/lib/tabmenu/TabMenuBase.js +++ b/components/lib/tabmenu/TabMenuBase.js @@ -20,44 +20,46 @@ const classes = { }; 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 primereact { + .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/TabViewBase.js b/components/lib/tabview/TabViewBase.js index 7e099bfb79..2e41ca19d7 100644 --- a/components/lib/tabview/TabViewBase.js +++ b/components/lib/tabview/TabViewBase.js @@ -27,79 +27,81 @@ const classes = { }; 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; - position: relative; -} - -.p-tabview-nav { - display: flex; - margin: 0; - padding: 0; - list-style-type: none; - flex: 1 1 auto; -} - -.p-tabview-nav-link { - 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-nav-link:focus { - z-index: 1; -} - -.p-tabview-close { - 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 primereact { + .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; + position: relative; + } + + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + + .p-tabview-nav-link { + 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-nav-link:focus { + z-index: 1; + } + + .p-tabview-close { + 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/TagBase.js b/components/lib/tag/TagBase.js index 4e142ee391..49b40c8019 100644 --- a/components/lib/tag/TagBase.js +++ b/components/lib/tag/TagBase.js @@ -12,20 +12,22 @@ const classes = { }; 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 primereact { + .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/TerminalBase.js b/components/lib/terminal/TerminalBase.js index af019b6ba3..ab366ab45b 100644 --- a/components/lib/terminal/TerminalBase.js +++ b/components/lib/terminal/TerminalBase.js @@ -11,28 +11,30 @@ const classes = { }; 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; +@layer primereact { + .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; + } } - -.p-terminal-input::-ms-clear { - display: none; -} `; export const TerminalBase = ComponentBase.extend({ diff --git a/components/lib/tieredmenu/TieredMenuBase.js b/components/lib/tieredmenu/TieredMenuBase.js index 1bc7ac3b53..46e1be2c00 100644 --- a/components/lib/tieredmenu/TieredMenuBase.js +++ b/components/lib/tieredmenu/TieredMenuBase.js @@ -37,52 +37,54 @@ const inlineStyles = { }; const styles = ` -.p-tieredmenu-overlay { - position: absolute; -} - -.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; -} - -.p-tieredmenu .p-menuitem-active > .p-submenu-list-flipped { - left: -100%; +@layer primereact { + .p-tieredmenu-overlay { + position: absolute; + } + + .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; + } + + .p-tieredmenu .p-menuitem-active > .p-submenu-list-flipped { + left: -100%; + } } `; diff --git a/components/lib/timeline/TimelineBase.js b/components/lib/timeline/TimelineBase.js index 785b97ccf4..8efbae269b 100644 --- a/components/lib/timeline/TimelineBase.js +++ b/components/lib/timeline/TimelineBase.js @@ -33,116 +33,118 @@ export const TimelineBase = ComponentBase.extend({ ) }, 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 primereact { + .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/ToastBase.js b/components/lib/toast/ToastBase.js index 720a9b1280..e8b13ec09c 100644 --- a/components/lib/toast/ToastBase.js +++ b/components/lib/toast/ToastBase.js @@ -3,84 +3,86 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const styles = ` -.p-toast { - width: calc(100% - var(--toast-indent, 0px)); - max-width: 25rem; -} - -.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-summary { - overflow-wrap: anywhere; -} - -.p-toast-detail { - overflow-wrap: anywhere; -} - -.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 { - opacity: 0; - transform: translateY(50%); -} - -.p-toast-message-enter-active { - opacity: 1; - transform: translateY(0); - transition: transform 0.3s, opacity 0.3s; -} - -.p-toast-message-enter-done { - transform: none; -} - -.p-toast-message-exit { - opacity: 1; - max-height: 1000px; -} - -.p-toast .p-toast-message.p-toast-message-exit-active { - opacity: 0; - max-height: 0; - margin-bottom: 0; - overflow: hidden; - transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; +@layer primereact { + .p-toast { + width: calc(100% - var(--toast-indent, 0px)); + max-width: 25rem; + } + + .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-summary { + overflow-wrap: anywhere; + } + + .p-toast-detail { + overflow-wrap: anywhere; + } + + .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 { + opacity: 0; + transform: translateY(50%); + } + + .p-toast-message-enter-active { + opacity: 1; + transform: translateY(0); + transition: transform 0.3s, opacity 0.3s; + } + + .p-toast-message-enter-done { + transform: none; + } + + .p-toast-message-exit { + opacity: 1; + max-height: 1000px; + } + + .p-toast .p-toast-message.p-toast-message-exit-active { + opacity: 0; + max-height: 0; + margin-bottom: 0; + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; + } } `; diff --git a/components/lib/toolbar/ToolbarBase.js b/components/lib/toolbar/ToolbarBase.js index da490e69c9..3dd5054015 100644 --- a/components/lib/toolbar/ToolbarBase.js +++ b/components/lib/toolbar/ToolbarBase.js @@ -22,24 +22,26 @@ export const ToolbarBase = ComponentBase.extend({ end: 'p-toolbar-group-end p-toolbar-group-right' }, 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 primereact { + .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/TooltipBase.js b/components/lib/tooltip/TooltipBase.js index 4da6812f97..39c19a3768 100644 --- a/components/lib/tooltip/TooltipBase.js +++ b/components/lib/tooltip/TooltipBase.js @@ -24,67 +24,69 @@ const inlineStyles = { }; const styles = ` -.p-tooltip { - position: absolute; - padding: .25em .5rem; - /* #3687: Tooltip prevent scrollbar flickering */ - top: -9999px; - left: -9999px; -} - -.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 { - top: 50%; - left: 0; - margin-top: -.25rem; - border-width: .25em .25em .25em 0; -} - -.p-tooltip-left .p-tooltip-arrow { - top: 50%; - right: 0; - margin-top: -.25rem; - border-width: .25em 0 .25em .25rem; -} - -.p-tooltip.p-tooltip-top { - padding: .25em 0; -} - -.p-tooltip-top .p-tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -.25rem; - border-width: .25em .25em 0; -} - -.p-tooltip-bottom .p-tooltip-arrow { - top: 0; - left: 50%; - margin-left: -.25rem; - border-width: 0 .25em .25rem; +@layer primereact { + .p-tooltip { + position: absolute; + padding: .25em .5rem; + /* #3687: Tooltip prevent scrollbar flickering */ + top: -9999px; + left: -9999px; + } + + .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 { + top: 50%; + left: 0; + margin-top: -.25rem; + border-width: .25em .25em .25em 0; + } + + .p-tooltip-left .p-tooltip-arrow { + top: 50%; + right: 0; + margin-top: -.25rem; + border-width: .25em 0 .25em .25rem; + } + + .p-tooltip.p-tooltip-top { + padding: .25em 0; + } + + .p-tooltip-top .p-tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -.25rem; + border-width: .25em .25em 0; + } + + .p-tooltip-bottom .p-tooltip-arrow { + top: 0; + left: 50%; + margin-left: -.25rem; + border-width: 0 .25em .25rem; + } } `; diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js index 3531f97afa..6e95f0ff41 100644 --- a/components/lib/tree/TreeBase.js +++ b/components/lib/tree/TreeBase.js @@ -39,71 +39,73 @@ const classes = { }; 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-treenode-selectable { - cursor: pointer; - user-select: none; -} - -.p-tree-toggler { - cursor: pointer; - user-select: none; - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - overflow: hidden; - position: relative; -} - -.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: -.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; +@layer primereact { + .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-treenode-selectable { + cursor: pointer; + user-select: none; + } + + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + } + + .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: -.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; + } } `; diff --git a/components/lib/treeselect/TreeSelectBase.js b/components/lib/treeselect/TreeSelectBase.js index 784b248b00..792250c1d2 100644 --- a/components/lib/treeselect/TreeSelectBase.js +++ b/components/lib/treeselect/TreeSelectBase.js @@ -44,93 +44,95 @@ const classes = { }; const styles = ` -.p-treeselect { - display: inline-flex; - cursor: pointer; - position: relative; - 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-treeselect-header { - display: flex; - align-items: center; - justify-content: space-between; -} - -.p-treeselect-filter-container { - position: relative; - flex: 1 1 auto; -} - -.p-treeselect-filter-icon { - position: absolute; - top: 50%; - margin-top: -.5rem; -} - -.p-treeselect-filter-container .p-inputtext { - width: 100%; -} - -.p-treeselect-close { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - overflow: hidden; - position: relative; - margin-left: auto; -} - -.p-treeselect-clear-icon { - position: absolute; - top: 50%; - margin-top: -.5rem; +@layer primereact { + .p-treeselect { + display: inline-flex; + cursor: pointer; + position: relative; + 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-treeselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + + .p-treeselect-filter-container { + position: relative; + flex: 1 1 auto; + } + + .p-treeselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .p-treeselect-filter-container .p-inputtext { + width: 100%; + } + + .p-treeselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + + .p-treeselect-clear-icon { + position: absolute; + top: 50%; + margin-top: -.5rem; + } + + .p-fluid .p-treeselect { + display: flex; } - -.p-fluid .p-treeselect { - display: flex; } `; diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js index 85023b7421..c462b52f0e 100644 --- a/components/lib/treetable/TreeTableBase.js +++ b/components/lib/treetable/TreeTableBase.js @@ -3,133 +3,135 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const styles = ` -.p-treetable { - position: relative; -} - -.p-treetable > .p-treetable-wrapper { - overflow: auto; -} - -.p-treetable table { - border-collapse: collapse; - width: 100%; - table-layout: fixed; -} - -.p-treetable .p-sortable-column { - cursor: pointer; - user-select: none; -} - -.p-treetable-selectable .p-treetable-tbody > tr { - cursor: pointer; -} - -.p-treetable-toggler { - cursor: pointer; - user-select: none; - display: inline-flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - 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 { - 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; -} - -/* Scrollable */ -.p-treetable-scrollable-wrapper { - position: relative; -} -.p-treetable-scrollable-header, -.p-treetable-scrollable-footer { - overflow: hidden; - border: 0 none; -} - -.p-treetable-scrollable-body { - overflow: auto; - position: relative; -} - -.p-treetable-virtual-table { - position: absolute; -} - -/* Frozen Columns */ -.p-treetable-frozen-view .p-treetable-scrollable-body { - overflow: hidden; -} - -.p-treetable-unfrozen-view { - position: absolute; - top: 0px; - left: 0px; -} - -/* Reorder */ -.p-treetable-reorder-indicator-up, -.p-treetable-reorder-indicator-down { - position: absolute; - display: none; -} - -/* Loader */ -.p-treetable .p-treetable-loading-overlay { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - z-index: 2; +@layer primereact { + .p-treetable { + position: relative; + } + + .p-treetable > .p-treetable-wrapper { + overflow: auto; + } + + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + + .p-treetable-selectable .p-treetable-tbody > tr { + cursor: pointer; + } + + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + 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 { + 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; + } + + /* Scrollable */ + .p-treetable-scrollable-wrapper { + position: relative; + } + .p-treetable-scrollable-header, + .p-treetable-scrollable-footer { + overflow: hidden; + border: 0 none; + } + + .p-treetable-scrollable-body { + overflow: auto; + position: relative; + } + + .p-treetable-virtual-table { + position: absolute; + } + + /* Frozen Columns */ + .p-treetable-frozen-view .p-treetable-scrollable-body { + overflow: hidden; + } + + .p-treetable-unfrozen-view { + position: absolute; + top: 0px; + left: 0px; + } + + /* Reorder */ + .p-treetable-reorder-indicator-up, + .p-treetable-reorder-indicator-down { + position: absolute; + display: none; + } + + /* Loader */ + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } } `;