From 0979dde96d68e17a50c11b95920933799857406c Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Wed, 1 May 2024 09:26:48 +0100 Subject: [PATCH] Fixed #5667 - Remove base option from theme config --- .../lib/accordion/style/AccordionStyle.js | 47 + .../autocomplete/style/AutoCompleteStyle.js | 216 ++++ components/lib/avatar/style/AvatarStyle.js | 68 ++ components/lib/badge/style/BadgeStyle.js | 87 ++ components/lib/base/style/BaseStyle.js | 237 +++- .../lib/basecomponent/BaseComponent.vue | 11 +- components/lib/basedirective/BaseDirective.js | 7 +- components/lib/blockui/style/BlockUIStyle.js | 19 + .../lib/breadcrumb/style/BreadcrumbStyle.js | 60 + components/lib/button/style/ButtonStyle.js | 590 +++++++++ .../lib/buttongroup/style/ButtonGroupStyle.js | 31 + components/lib/card/style/CardStyle.js | 35 + .../lib/carousel/style/CarouselStyle.js | 92 ++ .../cascadeselect/style/CascadeSelectStyle.js | 186 +++ .../lib/checkbox/style/CheckboxStyle.js | 106 ++ components/lib/chip/style/ChipStyle.js | 47 + .../lib/colorpicker/style/ColorPickerStyle.js | 110 ++ .../confirmdialog/style/ConfirmDialogStyle.js | 13 + .../confirmpopup/style/ConfirmPopupStyle.js | 111 ++ .../lib/contextmenu/style/ContextMenuStyle.js | 124 ++ .../lib/datatable/style/DataTableStyle.js | 581 +++++++++ .../lib/dataview/style/DataViewStyle.js | 34 + .../lib/datepicker/style/DatePickerStyle.js | 337 ++++++ components/lib/divider/style/DividerStyle.js | 80 ++ components/lib/dock/style/DockStyle.js | 126 ++ components/lib/drawer/style/DrawerStyle.js | 151 +++ components/lib/editor/style/EditorStyle.js | 1072 +++++++++++++++++ .../lib/fieldset/style/FieldsetStyle.js | 64 + .../lib/fileupload/style/FileUploadStyle.js | 79 ++ .../lib/floatlabel/style/FloatLabelStyle.js | 57 + .../lib/galleria/style/GalleriaStyle.js | 406 +++++++ .../lib/iconfield/style/IconFieldStyle.js | 30 + .../inlinemessage/style/InlineMessageStyle.js | 95 ++ components/lib/inplace/style/InplaceStyle.js | 26 + .../lib/inputchips/style/InputChipsStyle.js | 85 ++ .../lib/inputgroup/style/InputGroupStyle.js | 102 ++ .../lib/inputnumber/style/InputNumberStyle.js | 148 +++ .../lib/inputotp/style/InputOtpStyle.js | 14 + .../lib/inputtext/style/InputTextStyle.js | 53 + components/lib/knob/style/KnobStyle.js | 35 + components/lib/listbox/style/ListboxStyle.js | 116 ++ .../lib/megamenu/style/MegaMenuStyle.js | 282 +++++ components/lib/menu/style/MenuStyle.js | 91 ++ components/lib/menubar/style/MenubarStyle.js | 243 ++++ components/lib/message/style/MessageStyle.js | 177 +++ .../lib/metergroup/style/MeterGroupStyle.js | 93 ++ .../lib/multiselect/style/MultiSelectStyle.js | 204 ++++ .../lib/orderlist/style/OrderListStyle.js | 15 + .../style/OrganizationChartStyle.js | 111 ++ .../lib/paginator/style/PaginatorStyle.js | 76 ++ components/lib/panel/style/PanelStyle.js | 34 + .../lib/panelmenu/style/PanelMenuStyle.js | 129 ++ .../lib/password/style/PasswordStyle.js | 70 ++ .../lib/picklist/style/PickListStyle.js | 23 + components/lib/popover/style/PopoverStyle.js | 81 ++ .../style/ProgressSpinnerStyle.js | 74 ++ .../lib/radiobutton/style/RadioButtonStyle.js | 111 ++ components/lib/rating/style/RatingStyle.js | 40 + .../lib/scrollpanel/style/ScrollPanelStyle.js | 67 ++ .../lib/scrolltop/style/ScrollTopStyle.js | 58 + components/lib/select/style/SelectStyle.js | 215 ++++ .../selectbutton/style/SelectButtonStyle.js | 35 + .../lib/skeleton/style/SkeletonStyle.js | 39 + components/lib/slider/style/SliderStyle.js | 83 ++ .../lib/speeddial/style/SpeedDialStyle.js | 80 ++ .../lib/splitbutton/style/SplitButtonStyle.js | 71 ++ .../lib/splitter/style/SplitterStyle.js | 80 ++ components/lib/stepper/style/StepperStyle.js | 170 +++ components/lib/steps/style/StepsStyle.js | 117 ++ components/lib/styled/PrimeVueStyled.js | 4 +- components/lib/tabmenu/style/TabMenuStyle.js | 74 ++ components/lib/tabs/style/TabsStyle.js | 120 ++ components/lib/tabview/style/TabViewStyle.js | 132 ++ components/lib/tag/style/TagStyle.js | 56 + .../lib/terminal/style/TerminalStyle.js | 42 + .../lib/textarea/style/TextareaStyle.js | 58 + .../presets => }/aura/accordion/index.js | 0 .../aura => aura/accordion}/package.json | 0 .../presets => }/aura/autocomplete/index.js | 0 .../autocomplete}/package.json | 0 .../presets => }/aura/avatar/index.js | 0 .../autocomplete => aura/avatar}/package.json | 0 .../presets => }/aura/badge/index.js | 0 .../base/avatar => aura/badge}/package.json | 0 .../presets => }/aura/blockui/index.js | 0 .../base/badge => aura/blockui}/package.json | 0 .../presets => }/aura/breadcrumb/index.js | 0 .../blockui => aura/breadcrumb}/package.json | 0 .../presets => }/aura/button/index.js | 0 .../breadcrumb => aura/button}/package.json | 0 .../presets => }/aura/buttongroup/index.js | 0 .../button => aura/buttongroup}/package.json | 0 .../{primeone/presets => }/aura/card/index.js | 0 .../buttongroup => aura/card}/package.json | 0 .../presets => }/aura/carousel/index.js | 0 .../base/card => aura/carousel}/package.json | 0 .../presets => }/aura/cascadeselect/index.js | 0 .../cascadeselect}/package.json | 0 .../presets => }/aura/checkbox/index.js | 0 .../checkbox}/package.json | 0 .../{primeone/presets => }/aura/chip/index.js | 0 .../base/checkbox => aura/chip}/package.json | 0 .../presets => }/aura/colorpicker/index.js | 0 .../chip => aura/colorpicker}/package.json | 0 .../presets => }/aura/confirmdialog/index.js | 0 .../confirmdialog}/package.json | 0 .../presets => }/aura/confirmpopup/index.js | 0 .../confirmpopup}/package.json | 0 .../presets => }/aura/contextmenu/index.js | 0 .../contextmenu}/package.json | 0 .../presets => }/aura/datatable/index.js | 0 .../datatable}/package.json | 0 .../presets => }/aura/dataview/index.js | 0 .../datatable => aura/dataview}/package.json | 0 .../presets => }/aura/datepicker/index.js | 0 .../dataview => aura/datepicker}/package.json | 0 .../presets => }/aura/dialog/index.js | 0 .../datepicker => aura/dialog}/package.json | 0 .../presets => }/aura/divider/index.js | 0 .../base/dialog => aura/divider}/package.json | 0 .../{primeone/presets => }/aura/dock/index.js | 0 .../base/divider => aura/dock}/package.json | 0 .../presets => }/aura/drawer/index.js | 0 .../base/dock => aura/drawer}/package.json | 0 .../presets => }/aura/editor/index.js | 0 .../base/drawer => aura/editor}/package.json | 0 .../presets => }/aura/fieldset/index.js | 0 .../editor => aura/fieldset}/package.json | 0 .../presets => }/aura/fileupload/index.js | 0 .../fieldset => aura/fileupload}/package.json | 0 .../presets => }/aura/floatlabel/index.js | 0 .../floatlabel}/package.json | 0 .../presets => }/aura/galleria/index.js | 0 .../floatlabel => aura/galleria}/package.json | 0 .../presets => }/aura/iconfield/index.js | 0 .../galleria => aura/iconfield}/package.json | 0 .../presets => }/aura/image/index.js | 0 .../base/global => aura/image}/package.json | 0 .../{primeone/presets => }/aura/index.js | 170 +-- .../presets => }/aura/inlinemessage/index.js | 0 .../inlinemessage}/package.json | 0 .../presets => }/aura/inplace/index.js | 0 .../base/image => aura/inplace}/package.json | 0 .../presets => }/aura/inputchips/index.js | 0 .../inputchips}/package.json | 0 .../presets => }/aura/inputgroup/index.js | 0 .../inplace => aura/inputgroup}/package.json | 0 .../presets => }/aura/inputnumber/index.js | 0 .../inputnumber}/package.json | 0 .../presets => }/aura/inputotp/index.js | 0 .../inputgroup => aura/inputotp}/package.json | 0 .../presets => }/aura/inputtext/index.js | 0 .../inputtext}/package.json | 0 .../{primeone/presets => }/aura/knob/index.js | 0 .../base/inputotp => aura/knob}/package.json | 0 .../presets => }/aura/listbox/index.js | 0 .../inputtext => aura/listbox}/package.json | 0 .../presets => }/aura/megamenu/index.js | 0 .../base/knob => aura/megamenu}/package.json | 0 .../{primeone/presets => }/aura/menu/index.js | 0 .../base/listbox => aura/menu}/package.json | 0 .../presets => }/aura/menubar/index.js | 0 .../megamenu => aura/menubar}/package.json | 0 .../presets => }/aura/message/index.js | 0 .../base/menu => aura/message}/package.json | 0 .../presets => }/aura/metergroup/index.js | 0 .../menubar => aura/metergroup}/package.json | 0 .../presets => }/aura/multiselect/index.js | 0 .../message => aura/multiselect}/package.json | 0 .../presets => }/aura/orderlist/index.js | 0 .../orderlist}/package.json | 0 .../aura/organizationchart/index.js | 0 .../organizationchart}/package.json | 0 .../base/orderlist => aura}/package.json | 0 .../presets => }/aura/paginator/index.js | 0 .../paginator}/package.json | 0 .../presets => }/aura/panel/index.js | 0 .../base => aura/panel}/package.json | 0 .../presets => }/aura/panelmenu/index.js | 0 .../paginator => aura/panelmenu}/package.json | 0 .../presets => }/aura/password/index.js | 0 .../base/panel => aura/password}/package.json | 0 .../presets => }/aura/picklist/index.js | 0 .../panelmenu => aura/picklist}/package.json | 0 .../presets => }/aura/popover/index.js | 0 .../password => aura/popover}/package.json | 0 .../presets => }/aura/progressbar/index.js | 0 .../progressbar}/package.json | 0 .../aura/progressspinner/index.js | 0 .../progressspinner}/package.json | 0 .../presets => }/aura/radiobutton/index.js | 0 .../radiobutton}/package.json | 0 .../presets => }/aura/rating/index.js | 0 .../rating}/package.json | 0 .../presets => }/aura/scrollpanel/index.js | 0 .../scrollpanel}/package.json | 0 .../presets => }/aura/scrolltop/index.js | 0 .../rating => aura/scrolltop}/package.json | 0 .../presets => }/aura/select/index.js | 0 .../scrollpanel => aura/select}/package.json | 0 .../presets => }/aura/selectbutton/index.js | 0 .../selectbutton}/package.json | 0 .../presets => }/aura/skeleton/index.js | 0 .../select => aura/skeleton}/package.json | 0 .../presets => }/aura/slider/index.js | 0 .../selectbutton => aura/slider}/package.json | 0 .../presets => }/aura/speeddial/index.js | 0 .../skeleton => aura/speeddial}/package.json | 0 .../presets => }/aura/splitbutton/index.js | 0 .../slider => aura/splitbutton}/package.json | 0 .../presets => }/aura/splitter/index.js | 0 .../speeddial => aura/splitter}/package.json | 0 .../presets => }/aura/stepper/index.js | 0 .../splitbutton => aura/stepper}/package.json | 0 .../presets => }/aura/steps/index.js | 0 .../base/splitter => aura/steps}/package.json | 0 .../presets => }/aura/tabmenu/index.js | 0 .../stepper => aura/tabmenu}/package.json | 0 .../{primeone/presets => }/aura/tabs/index.js | 0 .../base/steps => aura/tabs}/package.json | 0 .../presets => }/aura/tabview/index.js | 0 .../tabmenu => aura/tabview}/package.json | 0 .../{primeone/presets => }/aura/tag/index.js | 0 .../base/tabs => aura/tag}/package.json | 0 .../presets => }/aura/terminal/index.js | 0 .../tabview => aura/terminal}/package.json | 0 .../presets => }/aura/textarea/index.js | 0 .../base/tag => aura/textarea}/package.json | 0 .../presets => }/aura/tieredmenu/index.js | 0 .../terminal => aura/tieredmenu}/package.json | 0 .../presets => }/aura/timeline/index.js | 0 .../textarea => aura/timeline}/package.json | 0 .../presets => }/aura/toast/index.js | 0 .../tieredmenu => aura/toast}/package.json | 0 .../presets => }/aura/togglebutton/index.js | 0 .../togglebutton}/package.json | 0 .../presets => }/aura/toggleswitch/index.js | 0 .../toast => aura/toggleswitch}/package.json | 0 .../presets => }/aura/toolbar/index.js | 0 .../toolbar}/package.json | 0 .../presets => }/aura/tooltip/index.js | 0 .../tooltip}/package.json | 0 .../{primeone/presets => }/aura/tree/index.js | 0 .../base/toolbar => aura/tree}/package.json | 0 .../presets => }/aura/treeselect/index.js | 0 .../tooltip => aura/treeselect}/package.json | 0 .../presets => }/aura/treetable/index.js | 0 .../base/tree => aura/treetable}/package.json | 0 components/lib/themes/primeone/aura/index.js | 1 - .../themes/primeone/base/accordion/index.js | 47 - .../primeone/base/autocomplete/index.js | 216 ---- .../lib/themes/primeone/base/avatar/index.js | 68 -- .../lib/themes/primeone/base/badge/index.js | 87 -- .../lib/themes/primeone/base/blockui/index.js | 19 - .../themes/primeone/base/breadcrumb/index.js | 60 - .../lib/themes/primeone/base/button/index.js | 590 --------- .../themes/primeone/base/buttongroup/index.js | 31 - .../lib/themes/primeone/base/card/index.js | 35 - .../themes/primeone/base/carousel/index.js | 92 -- .../primeone/base/cascadeselect/index.js | 186 --- .../themes/primeone/base/checkbox/index.js | 106 -- .../lib/themes/primeone/base/chip/index.js | 47 - .../themes/primeone/base/colorpicker/index.js | 110 -- .../primeone/base/confirmdialog/index.js | 13 - .../primeone/base/confirmpopup/index.js | 111 -- .../themes/primeone/base/contextmenu/index.js | 124 -- .../themes/primeone/base/datatable/index.js | 581 --------- .../themes/primeone/base/dataview/index.js | 34 - .../themes/primeone/base/datepicker/index.js | 337 ------ .../lib/themes/primeone/base/dialog/index.js | 131 -- .../lib/themes/primeone/base/divider/index.js | 80 -- .../lib/themes/primeone/base/dock/index.js | 126 -- .../lib/themes/primeone/base/drawer/index.js | 151 --- .../lib/themes/primeone/base/editor/index.js | 1072 ----------------- .../themes/primeone/base/fieldset/index.js | 64 - .../themes/primeone/base/fileupload/index.js | 79 -- .../themes/primeone/base/floatlabel/index.js | 57 - .../themes/primeone/base/galleria/index.js | 406 ------- .../lib/themes/primeone/base/global/index.js | 230 ---- .../themes/primeone/base/iconfield/index.js | 30 - .../lib/themes/primeone/base/image/index.js | 114 -- components/lib/themes/primeone/base/index.js | 179 --- .../primeone/base/inlinemessage/index.js | 95 -- .../lib/themes/primeone/base/inplace/index.js | 26 - .../themes/primeone/base/inputchips/index.js | 85 -- .../themes/primeone/base/inputgroup/index.js | 102 -- .../themes/primeone/base/inputnumber/index.js | 148 --- .../themes/primeone/base/inputotp/index.js | 14 - .../themes/primeone/base/inputtext/index.js | 53 - .../lib/themes/primeone/base/knob/index.js | 35 - .../lib/themes/primeone/base/listbox/index.js | 116 -- .../themes/primeone/base/megamenu/index.js | 282 ----- .../lib/themes/primeone/base/menu/index.js | 91 -- .../lib/themes/primeone/base/menubar/index.js | 243 ---- .../lib/themes/primeone/base/message/index.js | 177 --- .../themes/primeone/base/metergroup/index.js | 93 -- .../themes/primeone/base/multiselect/index.js | 204 ---- .../themes/primeone/base/orderlist/index.js | 15 - .../primeone/base/organizationchart/index.js | 111 -- .../themes/primeone/base/paginator/index.js | 76 -- .../lib/themes/primeone/base/panel/index.js | 34 - .../themes/primeone/base/panelmenu/index.js | 129 -- .../themes/primeone/base/password/index.js | 70 -- .../themes/primeone/base/picklist/index.js | 23 - .../lib/themes/primeone/base/popover/index.js | 81 -- .../themes/primeone/base/progressbar/index.js | 122 -- .../primeone/base/progressspinner/index.js | 74 -- .../themes/primeone/base/radiobutton/index.js | 111 -- .../lib/themes/primeone/base/rating/index.js | 40 - .../themes/primeone/base/scrollpanel/index.js | 67 -- .../themes/primeone/base/scrolltop/index.js | 58 - .../lib/themes/primeone/base/select/index.js | 215 ---- .../primeone/base/selectbutton/index.js | 35 - .../themes/primeone/base/skeleton/index.js | 39 - .../lib/themes/primeone/base/slider/index.js | 83 -- .../themes/primeone/base/speeddial/index.js | 80 -- .../themes/primeone/base/splitbutton/index.js | 71 -- .../themes/primeone/base/splitter/index.js | 80 -- .../lib/themes/primeone/base/stepper/index.js | 170 --- .../lib/themes/primeone/base/steps/index.js | 117 -- .../lib/themes/primeone/base/tabmenu/index.js | 74 -- .../lib/themes/primeone/base/tabs/index.js | 120 -- .../lib/themes/primeone/base/tabview/index.js | 132 -- .../lib/themes/primeone/base/tag/index.js | 56 - .../themes/primeone/base/terminal/index.js | 42 - .../themes/primeone/base/textarea/index.js | 58 - .../themes/primeone/base/tieredmenu/index.js | 128 -- .../themes/primeone/base/timeline/index.js | 155 --- .../lib/themes/primeone/base/toast/index.js | 219 ---- .../primeone/base/togglebutton/index.js | 87 -- .../primeone/base/toggleswitch/index.js | 90 -- .../lib/themes/primeone/base/toolbar/index.js | 23 - .../lib/themes/primeone/base/tooltip/index.js | 62 - .../lib/themes/primeone/base/tree/index.js | 180 --- .../themes/primeone/base/treeselect/index.js | 115 -- .../primeone/base/treeselect/package.json | 6 - .../themes/primeone/base/treetable/index.js | 446 ------- .../primeone/base/treetable/package.json | 6 - components/lib/themes/primeone/index.js | 1 - components/lib/themes/primeone/package.json | 6 - .../presets/aura/accordion/package.json | 6 - .../presets/aura/autocomplete/package.json | 6 - .../primeone/presets/aura/avatar/package.json | 6 - .../primeone/presets/aura/badge/package.json | 6 - .../presets/aura/blockui/package.json | 6 - .../presets/aura/breadcrumb/package.json | 6 - .../primeone/presets/aura/button/package.json | 6 - .../presets/aura/buttongroup/package.json | 6 - .../primeone/presets/aura/card/package.json | 6 - .../presets/aura/carousel/package.json | 6 - .../presets/aura/cascadeselect/package.json | 6 - .../presets/aura/checkbox/package.json | 6 - .../primeone/presets/aura/chip/package.json | 6 - .../presets/aura/colorpicker/package.json | 6 - .../presets/aura/confirmdialog/package.json | 6 - .../presets/aura/confirmpopup/package.json | 6 - .../presets/aura/contextmenu/package.json | 6 - .../presets/aura/datatable/package.json | 6 - .../presets/aura/dataview/package.json | 6 - .../presets/aura/datepicker/package.json | 6 - .../primeone/presets/aura/dialog/package.json | 6 - .../presets/aura/divider/package.json | 6 - .../primeone/presets/aura/dock/package.json | 6 - .../primeone/presets/aura/drawer/package.json | 6 - .../primeone/presets/aura/editor/package.json | 6 - .../presets/aura/fieldset/package.json | 6 - .../presets/aura/fileupload/package.json | 6 - .../presets/aura/floatlabel/package.json | 6 - .../presets/aura/galleria/package.json | 6 - .../presets/aura/iconfield/package.json | 6 - .../primeone/presets/aura/image/package.json | 6 - .../presets/aura/inlinemessage/package.json | 6 - .../presets/aura/inplace/package.json | 6 - .../presets/aura/inputchips/package.json | 6 - .../presets/aura/inputgroup/package.json | 6 - .../presets/aura/inputnumber/package.json | 6 - .../presets/aura/inputotp/package.json | 6 - .../presets/aura/inputtext/package.json | 6 - .../primeone/presets/aura/knob/package.json | 6 - .../presets/aura/listbox/package.json | 6 - .../presets/aura/megamenu/package.json | 6 - .../primeone/presets/aura/menu/package.json | 6 - .../presets/aura/menubar/package.json | 6 - .../presets/aura/message/package.json | 6 - .../presets/aura/metergroup/package.json | 6 - .../presets/aura/multiselect/package.json | 6 - .../presets/aura/orderlist/package.json | 6 - .../aura/organizationchart/package.json | 6 - .../themes/primeone/presets/aura/package.json | 6 - .../presets/aura/paginator/package.json | 6 - .../primeone/presets/aura/panel/package.json | 6 - .../presets/aura/panelmenu/package.json | 6 - .../presets/aura/password/package.json | 6 - .../presets/aura/picklist/package.json | 6 - .../presets/aura/popover/package.json | 6 - .../presets/aura/progressbar/package.json | 6 - .../presets/aura/progressspinner/package.json | 6 - .../presets/aura/radiobutton/package.json | 6 - .../primeone/presets/aura/rating/package.json | 6 - .../presets/aura/scrollpanel/package.json | 6 - .../presets/aura/scrolltop/package.json | 6 - .../primeone/presets/aura/select/package.json | 6 - .../presets/aura/selectbutton/package.json | 6 - .../presets/aura/skeleton/package.json | 6 - .../primeone/presets/aura/slider/package.json | 6 - .../presets/aura/speeddial/package.json | 6 - .../presets/aura/splitbutton/package.json | 6 - .../presets/aura/splitter/package.json | 6 - .../presets/aura/stepper/package.json | 6 - .../primeone/presets/aura/steps/package.json | 6 - .../presets/aura/tabmenu/package.json | 6 - .../primeone/presets/aura/tabs/package.json | 6 - .../presets/aura/tabview/package.json | 6 - .../primeone/presets/aura/tag/package.json | 6 - .../presets/aura/terminal/package.json | 6 - .../presets/aura/textarea/package.json | 6 - .../presets/aura/tieredmenu/package.json | 6 - .../presets/aura/timeline/package.json | 6 - .../primeone/presets/aura/toast/package.json | 6 - .../presets/aura/togglebutton/package.json | 6 - .../presets/aura/toggleswitch/package.json | 6 - .../presets/aura/toolbar/package.json | 6 - .../presets/aura/tooltip/package.json | 6 - .../primeone/presets/aura/tree/package.json | 6 - .../presets/aura/treeselect/package.json | 6 - .../presets/aura/treetable/package.json | 6 - .../lib/themes/primeone/presets/package.json | 6 - .../lib/tieredmenu/style/TieredMenuStyle.js | 128 ++ .../lib/timeline/style/TimelineStyle.js | 155 +++ components/lib/toast/style/ToastStyle.js | 219 ++++ .../togglebutton/style/ToggleButtonStyle.js | 87 ++ .../toggleswitch/style/ToggleSwitchStyle.js | 90 ++ components/lib/toolbar/style/ToolbarStyle.js | 23 + components/lib/tooltip/style/TooltipStyle.js | 62 + components/lib/tree/style/TreeStyle.js | 180 +++ .../lib/treeselect/style/TreeSelectStyle.js | 115 ++ .../lib/treetable/style/TreeTableStyle.js | 446 +++++++ .../style/VirtualScrollerStyle.js | 104 +- 438 files changed, 10872 insertions(+), 11957 deletions(-) rename components/lib/themes/{primeone/presets => }/aura/accordion/index.js (100%) rename components/lib/themes/{primeone/aura => aura/accordion}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/autocomplete/index.js (100%) rename components/lib/themes/{primeone/base/accordion => aura/autocomplete}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/avatar/index.js (100%) rename components/lib/themes/{primeone/base/autocomplete => aura/avatar}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/badge/index.js (100%) rename components/lib/themes/{primeone/base/avatar => aura/badge}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/blockui/index.js (100%) rename components/lib/themes/{primeone/base/badge => aura/blockui}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/breadcrumb/index.js (100%) rename components/lib/themes/{primeone/base/blockui => aura/breadcrumb}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/button/index.js (100%) rename components/lib/themes/{primeone/base/breadcrumb => aura/button}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/buttongroup/index.js (100%) rename components/lib/themes/{primeone/base/button => aura/buttongroup}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/card/index.js (100%) rename components/lib/themes/{primeone/base/buttongroup => aura/card}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/carousel/index.js (100%) rename components/lib/themes/{primeone/base/card => aura/carousel}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/cascadeselect/index.js (100%) rename components/lib/themes/{primeone/base/carousel => aura/cascadeselect}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/checkbox/index.js (100%) rename components/lib/themes/{primeone/base/cascadeselect => aura/checkbox}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/chip/index.js (100%) rename components/lib/themes/{primeone/base/checkbox => aura/chip}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/colorpicker/index.js (100%) rename components/lib/themes/{primeone/base/chip => aura/colorpicker}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/confirmdialog/index.js (100%) rename components/lib/themes/{primeone/base/colorpicker => aura/confirmdialog}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/confirmpopup/index.js (100%) rename components/lib/themes/{primeone/base/confirmdialog => aura/confirmpopup}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/contextmenu/index.js (100%) rename components/lib/themes/{primeone/base/confirmpopup => aura/contextmenu}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/datatable/index.js (100%) rename components/lib/themes/{primeone/base/contextmenu => aura/datatable}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/dataview/index.js (100%) rename components/lib/themes/{primeone/base/datatable => aura/dataview}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/datepicker/index.js (100%) rename components/lib/themes/{primeone/base/dataview => aura/datepicker}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/dialog/index.js (100%) rename components/lib/themes/{primeone/base/datepicker => aura/dialog}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/divider/index.js (100%) rename components/lib/themes/{primeone/base/dialog => aura/divider}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/dock/index.js (100%) rename components/lib/themes/{primeone/base/divider => aura/dock}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/drawer/index.js (100%) rename components/lib/themes/{primeone/base/dock => aura/drawer}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/editor/index.js (100%) rename components/lib/themes/{primeone/base/drawer => aura/editor}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/fieldset/index.js (100%) rename components/lib/themes/{primeone/base/editor => aura/fieldset}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/fileupload/index.js (100%) rename components/lib/themes/{primeone/base/fieldset => aura/fileupload}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/floatlabel/index.js (100%) rename components/lib/themes/{primeone/base/fileupload => aura/floatlabel}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/galleria/index.js (100%) rename components/lib/themes/{primeone/base/floatlabel => aura/galleria}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/iconfield/index.js (100%) rename components/lib/themes/{primeone/base/galleria => aura/iconfield}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/image/index.js (100%) rename components/lib/themes/{primeone/base/global => aura/image}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/index.js (63%) rename components/lib/themes/{primeone/presets => }/aura/inlinemessage/index.js (100%) rename components/lib/themes/{primeone/base/iconfield => aura/inlinemessage}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/inplace/index.js (100%) rename components/lib/themes/{primeone/base/image => aura/inplace}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/inputchips/index.js (100%) rename components/lib/themes/{primeone/base/inlinemessage => aura/inputchips}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/inputgroup/index.js (100%) rename components/lib/themes/{primeone/base/inplace => aura/inputgroup}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/inputnumber/index.js (100%) rename components/lib/themes/{primeone/base/inputchips => aura/inputnumber}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/inputotp/index.js (100%) rename components/lib/themes/{primeone/base/inputgroup => aura/inputotp}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/inputtext/index.js (100%) rename components/lib/themes/{primeone/base/inputnumber => aura/inputtext}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/knob/index.js (100%) rename components/lib/themes/{primeone/base/inputotp => aura/knob}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/listbox/index.js (100%) rename components/lib/themes/{primeone/base/inputtext => aura/listbox}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/megamenu/index.js (100%) rename components/lib/themes/{primeone/base/knob => aura/megamenu}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/menu/index.js (100%) rename components/lib/themes/{primeone/base/listbox => aura/menu}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/menubar/index.js (100%) rename components/lib/themes/{primeone/base/megamenu => aura/menubar}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/message/index.js (100%) rename components/lib/themes/{primeone/base/menu => aura/message}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/metergroup/index.js (100%) rename components/lib/themes/{primeone/base/menubar => aura/metergroup}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/multiselect/index.js (100%) rename components/lib/themes/{primeone/base/message => aura/multiselect}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/orderlist/index.js (100%) rename components/lib/themes/{primeone/base/metergroup => aura/orderlist}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/organizationchart/index.js (100%) rename components/lib/themes/{primeone/base/multiselect => aura/organizationchart}/package.json (100%) rename components/lib/themes/{primeone/base/orderlist => aura}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/paginator/index.js (100%) rename components/lib/themes/{primeone/base/organizationchart => aura/paginator}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/panel/index.js (100%) rename components/lib/themes/{primeone/base => aura/panel}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/panelmenu/index.js (100%) rename components/lib/themes/{primeone/base/paginator => aura/panelmenu}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/password/index.js (100%) rename components/lib/themes/{primeone/base/panel => aura/password}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/picklist/index.js (100%) rename components/lib/themes/{primeone/base/panelmenu => aura/picklist}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/popover/index.js (100%) rename components/lib/themes/{primeone/base/password => aura/popover}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/progressbar/index.js (100%) rename components/lib/themes/{primeone/base/picklist => aura/progressbar}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/progressspinner/index.js (100%) rename components/lib/themes/{primeone/base/popover => aura/progressspinner}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/radiobutton/index.js (100%) rename components/lib/themes/{primeone/base/progressbar => aura/radiobutton}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/rating/index.js (100%) rename components/lib/themes/{primeone/base/progressspinner => aura/rating}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/scrollpanel/index.js (100%) rename components/lib/themes/{primeone/base/radiobutton => aura/scrollpanel}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/scrolltop/index.js (100%) rename components/lib/themes/{primeone/base/rating => aura/scrolltop}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/select/index.js (100%) rename components/lib/themes/{primeone/base/scrollpanel => aura/select}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/selectbutton/index.js (100%) rename components/lib/themes/{primeone/base/scrolltop => aura/selectbutton}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/skeleton/index.js (100%) rename components/lib/themes/{primeone/base/select => aura/skeleton}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/slider/index.js (100%) rename components/lib/themes/{primeone/base/selectbutton => aura/slider}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/speeddial/index.js (100%) rename components/lib/themes/{primeone/base/skeleton => aura/speeddial}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/splitbutton/index.js (100%) rename components/lib/themes/{primeone/base/slider => aura/splitbutton}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/splitter/index.js (100%) rename components/lib/themes/{primeone/base/speeddial => aura/splitter}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/stepper/index.js (100%) rename components/lib/themes/{primeone/base/splitbutton => aura/stepper}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/steps/index.js (100%) rename components/lib/themes/{primeone/base/splitter => aura/steps}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/tabmenu/index.js (100%) rename components/lib/themes/{primeone/base/stepper => aura/tabmenu}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/tabs/index.js (100%) rename components/lib/themes/{primeone/base/steps => aura/tabs}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/tabview/index.js (100%) rename components/lib/themes/{primeone/base/tabmenu => aura/tabview}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/tag/index.js (100%) rename components/lib/themes/{primeone/base/tabs => aura/tag}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/terminal/index.js (100%) rename components/lib/themes/{primeone/base/tabview => aura/terminal}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/textarea/index.js (100%) rename components/lib/themes/{primeone/base/tag => aura/textarea}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/tieredmenu/index.js (100%) rename components/lib/themes/{primeone/base/terminal => aura/tieredmenu}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/timeline/index.js (100%) rename components/lib/themes/{primeone/base/textarea => aura/timeline}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/toast/index.js (100%) rename components/lib/themes/{primeone/base/tieredmenu => aura/toast}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/togglebutton/index.js (100%) rename components/lib/themes/{primeone/base/timeline => aura/togglebutton}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/toggleswitch/index.js (100%) rename components/lib/themes/{primeone/base/toast => aura/toggleswitch}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/toolbar/index.js (100%) rename components/lib/themes/{primeone/base/togglebutton => aura/toolbar}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/tooltip/index.js (100%) rename components/lib/themes/{primeone/base/toggleswitch => aura/tooltip}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/tree/index.js (100%) rename components/lib/themes/{primeone/base/toolbar => aura/tree}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/treeselect/index.js (100%) rename components/lib/themes/{primeone/base/tooltip => aura/treeselect}/package.json (100%) rename components/lib/themes/{primeone/presets => }/aura/treetable/index.js (100%) rename components/lib/themes/{primeone/base/tree => aura/treetable}/package.json (100%) delete mode 100644 components/lib/themes/primeone/aura/index.js delete mode 100644 components/lib/themes/primeone/base/accordion/index.js delete mode 100644 components/lib/themes/primeone/base/autocomplete/index.js delete mode 100644 components/lib/themes/primeone/base/avatar/index.js delete mode 100644 components/lib/themes/primeone/base/badge/index.js delete mode 100644 components/lib/themes/primeone/base/blockui/index.js delete mode 100644 components/lib/themes/primeone/base/breadcrumb/index.js delete mode 100644 components/lib/themes/primeone/base/button/index.js delete mode 100644 components/lib/themes/primeone/base/buttongroup/index.js delete mode 100644 components/lib/themes/primeone/base/card/index.js delete mode 100644 components/lib/themes/primeone/base/carousel/index.js delete mode 100644 components/lib/themes/primeone/base/cascadeselect/index.js delete mode 100644 components/lib/themes/primeone/base/checkbox/index.js delete mode 100644 components/lib/themes/primeone/base/chip/index.js delete mode 100644 components/lib/themes/primeone/base/colorpicker/index.js delete mode 100644 components/lib/themes/primeone/base/confirmdialog/index.js delete mode 100644 components/lib/themes/primeone/base/confirmpopup/index.js delete mode 100644 components/lib/themes/primeone/base/contextmenu/index.js delete mode 100644 components/lib/themes/primeone/base/datatable/index.js delete mode 100644 components/lib/themes/primeone/base/dataview/index.js delete mode 100644 components/lib/themes/primeone/base/datepicker/index.js delete mode 100644 components/lib/themes/primeone/base/dialog/index.js delete mode 100644 components/lib/themes/primeone/base/divider/index.js delete mode 100644 components/lib/themes/primeone/base/dock/index.js delete mode 100644 components/lib/themes/primeone/base/drawer/index.js delete mode 100644 components/lib/themes/primeone/base/editor/index.js delete mode 100644 components/lib/themes/primeone/base/fieldset/index.js delete mode 100644 components/lib/themes/primeone/base/fileupload/index.js delete mode 100644 components/lib/themes/primeone/base/floatlabel/index.js delete mode 100644 components/lib/themes/primeone/base/galleria/index.js delete mode 100644 components/lib/themes/primeone/base/global/index.js delete mode 100644 components/lib/themes/primeone/base/iconfield/index.js delete mode 100644 components/lib/themes/primeone/base/image/index.js delete mode 100644 components/lib/themes/primeone/base/index.js delete mode 100644 components/lib/themes/primeone/base/inlinemessage/index.js delete mode 100644 components/lib/themes/primeone/base/inplace/index.js delete mode 100644 components/lib/themes/primeone/base/inputchips/index.js delete mode 100644 components/lib/themes/primeone/base/inputgroup/index.js delete mode 100644 components/lib/themes/primeone/base/inputnumber/index.js delete mode 100644 components/lib/themes/primeone/base/inputotp/index.js delete mode 100644 components/lib/themes/primeone/base/inputtext/index.js delete mode 100644 components/lib/themes/primeone/base/knob/index.js delete mode 100644 components/lib/themes/primeone/base/listbox/index.js delete mode 100644 components/lib/themes/primeone/base/megamenu/index.js delete mode 100644 components/lib/themes/primeone/base/menu/index.js delete mode 100644 components/lib/themes/primeone/base/menubar/index.js delete mode 100644 components/lib/themes/primeone/base/message/index.js delete mode 100644 components/lib/themes/primeone/base/metergroup/index.js delete mode 100644 components/lib/themes/primeone/base/multiselect/index.js delete mode 100644 components/lib/themes/primeone/base/orderlist/index.js delete mode 100644 components/lib/themes/primeone/base/organizationchart/index.js delete mode 100644 components/lib/themes/primeone/base/paginator/index.js delete mode 100644 components/lib/themes/primeone/base/panel/index.js delete mode 100644 components/lib/themes/primeone/base/panelmenu/index.js delete mode 100644 components/lib/themes/primeone/base/password/index.js delete mode 100644 components/lib/themes/primeone/base/picklist/index.js delete mode 100644 components/lib/themes/primeone/base/popover/index.js delete mode 100644 components/lib/themes/primeone/base/progressbar/index.js delete mode 100644 components/lib/themes/primeone/base/progressspinner/index.js delete mode 100644 components/lib/themes/primeone/base/radiobutton/index.js delete mode 100644 components/lib/themes/primeone/base/rating/index.js delete mode 100644 components/lib/themes/primeone/base/scrollpanel/index.js delete mode 100644 components/lib/themes/primeone/base/scrolltop/index.js delete mode 100644 components/lib/themes/primeone/base/select/index.js delete mode 100644 components/lib/themes/primeone/base/selectbutton/index.js delete mode 100644 components/lib/themes/primeone/base/skeleton/index.js delete mode 100644 components/lib/themes/primeone/base/slider/index.js delete mode 100644 components/lib/themes/primeone/base/speeddial/index.js delete mode 100644 components/lib/themes/primeone/base/splitbutton/index.js delete mode 100644 components/lib/themes/primeone/base/splitter/index.js delete mode 100644 components/lib/themes/primeone/base/stepper/index.js delete mode 100644 components/lib/themes/primeone/base/steps/index.js delete mode 100644 components/lib/themes/primeone/base/tabmenu/index.js delete mode 100644 components/lib/themes/primeone/base/tabs/index.js delete mode 100644 components/lib/themes/primeone/base/tabview/index.js delete mode 100644 components/lib/themes/primeone/base/tag/index.js delete mode 100644 components/lib/themes/primeone/base/terminal/index.js delete mode 100644 components/lib/themes/primeone/base/textarea/index.js delete mode 100644 components/lib/themes/primeone/base/tieredmenu/index.js delete mode 100644 components/lib/themes/primeone/base/timeline/index.js delete mode 100644 components/lib/themes/primeone/base/toast/index.js delete mode 100644 components/lib/themes/primeone/base/togglebutton/index.js delete mode 100644 components/lib/themes/primeone/base/toggleswitch/index.js delete mode 100644 components/lib/themes/primeone/base/toolbar/index.js delete mode 100644 components/lib/themes/primeone/base/tooltip/index.js delete mode 100644 components/lib/themes/primeone/base/tree/index.js delete mode 100644 components/lib/themes/primeone/base/treeselect/index.js delete mode 100644 components/lib/themes/primeone/base/treeselect/package.json delete mode 100644 components/lib/themes/primeone/base/treetable/index.js delete mode 100644 components/lib/themes/primeone/base/treetable/package.json delete mode 100644 components/lib/themes/primeone/index.js delete mode 100644 components/lib/themes/primeone/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/accordion/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/autocomplete/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/avatar/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/badge/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/blockui/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/breadcrumb/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/button/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/buttongroup/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/card/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/carousel/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/cascadeselect/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/checkbox/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/chip/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/colorpicker/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/confirmdialog/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/confirmpopup/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/contextmenu/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/datatable/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/dataview/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/datepicker/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/dialog/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/divider/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/dock/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/drawer/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/editor/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/fieldset/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/fileupload/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/floatlabel/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/galleria/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/iconfield/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/image/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/inlinemessage/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/inplace/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/inputchips/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/inputgroup/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/inputnumber/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/inputotp/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/inputtext/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/knob/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/listbox/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/megamenu/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/menu/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/menubar/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/message/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/metergroup/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/multiselect/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/orderlist/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/organizationchart/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/paginator/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/panel/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/panelmenu/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/password/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/picklist/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/popover/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/progressbar/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/progressspinner/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/radiobutton/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/rating/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/scrollpanel/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/scrolltop/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/select/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/selectbutton/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/skeleton/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/slider/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/speeddial/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/splitbutton/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/splitter/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/stepper/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/steps/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/tabmenu/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/tabs/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/tabview/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/tag/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/terminal/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/textarea/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/tieredmenu/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/timeline/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/toast/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/togglebutton/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/toggleswitch/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/toolbar/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/tooltip/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/tree/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/treeselect/package.json delete mode 100644 components/lib/themes/primeone/presets/aura/treetable/package.json delete mode 100644 components/lib/themes/primeone/presets/package.json diff --git a/components/lib/accordion/style/AccordionStyle.js b/components/lib/accordion/style/AccordionStyle.js index 99f53b986..3d1f22648 100644 --- a/components/lib/accordion/style/AccordionStyle.js +++ b/components/lib/accordion/style/AccordionStyle.js @@ -1,10 +1,57 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-accordionpanel { + display: flex; + flex-direction: column; + border-bottom: 1px solid ${dt('accordion.content.border.color')}; +} + +.p-accordionpanel:last-child { + border-bottom: 0 none; +} + +.p-accordionheader { + all: unset; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.125rem 1.125rem 1.125rem 1.125rem; + color: ${dt('accordion.header.color')}; + background: ${dt('accordion.header.background')}; + font-weight: 600; + border-radius: ${dt('rounded.base')}; + transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: -2px; +} + +.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled):hover > .p-accordionheader { + color: ${dt('accordion.header.hover.color')} +} + +.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader { + color: ${dt('accordion.header.active.color')} +} + +.p-accordioncontent-content { + padding: 0 1.125rem 1.125rem 1.125rem; + background: color: ${dt('accordion.content.background')} + color: ${dt('accordion.content.color')} +} +`; + const classes = { root: 'p-accordion p-component' }; export default BaseStyle.extend({ name: 'accordion', + theme, classes }); diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js index 8ade747e3..371cd01ba 100644 --- a/components/lib/autocomplete/style/AutoCompleteStyle.js +++ b/components/lib/autocomplete/style/AutoCompleteStyle.js @@ -1,6 +1,221 @@ import BaseStyle from 'primevue/base/style'; import { ObjectUtils } from 'primevue/utils'; +const theme = ({ dt }) => ` +.p-autocomplete { + display: inline-flex; +} + +.p-autocomplete-loader { + position: absolute; + top: 50%; + margin-top: -0.5rem; + right: 0.75rem; +} + +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader { + right: 3.25rem; +} + +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input { + flex: 1 1 auto; + width: 1%; +} + +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input, +.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.p-autocomplete-dropdown { + cursor: pointer; + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + width: ${dt('autocomplete.dropdown.width')}; + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; + background: ${dt('autocomplete.dropdown.background')}; + border: 1px solid ${dt('autocomplete.dropdown.border.color')}; + border-left: 0 none; + background: ${dt('autocomplete.dropdown.background')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-autocomplete-dropdown:not(:disabled):hover { + background: ${dt('autocomplete.dropdown.hover.background')}; + border-color: ${dt('autocomplete.dropdown.hover.border.color')}; + background: ${dt('autocomplete.dropdown.hover.background')}; +} + +.p-autocomplete-dropdown:not(:disabled):active { + background: ${dt('autocomplete.dropdown.active.background')}; + border-color: ${dt('autocomplete.dropdown.active.border.color')}; + background: ${dt('autocomplete.dropdown.active.background')}; +} + +.p-autocomplete-dropdown:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-autocomplete .p-autocomplete-overlay { + min-width: 100%; +} + +.p-autocomplete-overlay { + position: absolute; + overflow: auto; + top: 0; + left: 0; + background: ${dt('autocomplete.overlay.background')}; + color: ${dt('autocomplete.overlay.color')}; + border: 1px solid ${dt('autocomplete.overlay.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-autocomplete-list { + margin: 0; + padding: 0; + list-style-type: none; + padding: 0.25rem 0.25rem; +} + +.p-autocomplete-option { + cursor: pointer; + white-space: nowrap; + position: relative; + overflow: hidden; + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: ${dt('autocomplete.item.color')}; + background: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; +} + +.p-autocomplete-option:first-child { + margin-top: 0; +} + +.p-autocomplete-option:last-child { + margin-bottom: 0; +} + +.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus { + background: ${dt('autocomplete.item.focus.background')}; + color: ${dt('autocomplete.item.focus.color')}; +} + +.p-autocomplete-option-selected { + background: ${dt('autocomplete.item.selected.background')}; + color: ${dt('autocomplete.item.selected.color')}; +} + +.p-autocomplete-option-selected.p-focus { + background: ${dt('autocomplete.item.selected.focus.background')}; + color: ${dt('autocomplete.item.selected.focus.color')}; +} + +.p-autocomplete-option-group { + margin: 0; + padding: 0.5rem 0.75rem; + color: ${dt('autocomplete.item.group.color')}; + background: ${dt('autocomplete.item.group.background')}; + font-weight: 600; +} + +.p-autocomplete-input-multiple { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + padding: 0.25rem 0.25rem; + gap: 0.25rem; + color: ${dt('autocomplete.input.multiple.color')}; + background: ${dt('autocomplete.input.multiple.background')}; + border: 1px solid ${dt('autocomplete.input.multiple.border.color')}; + border-radius: ${dt('rounded.base')}; + width: 100%; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + box-shadow: ${dt('autocomplete.input.multiple.box.shadow')}; +} + +.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple { + border-color: ${dt('autocomplete.input.multiple.hover.border.color')}; +} + +.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple { + border-color: ${dt('autocomplete.input.multiple.focus.border.color')}; + outline: 0 none; +} + +.p-autocomplete.p-invalid .p-autocomplete-input-multiple { + border-color: ${dt('autocomplete.input.multiple.invalid.border.color')}; +} + +.p-variant-filled.p-autocomplete-input-multiple { + background: ${dt('autocomplete.input.multiple.filled.background')}; +} + +.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple { + background: ${dt('autocomplete.input.multiple.filled.focus.background')}; +} + +.p-autocomplete.p-disabled .p-autocomplete-input-multiple { + opacity: 1; + background: ${dt('autocomplete.input.multiple.disabled.background')}; + color: ${dt('autocomplete.input.multiple.disabled.color')}; +} + +.p-autocomplete-input-chip { + flex: 1 1 auto; + display: inline-flex; + padding: 0.25rem 0; + margin-left: 0.5rem; +} + +.p-autocomplete-input-chip input { + border: 0 none; + outline: 0 none; + background: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; + color: inherit; +} + +.p-autocomplete-input-chip input::placeholder { + color: ${dt('autocomplete.input.multiple.placeholder.color')}; +} + +.p-fluid .p-autocomplete { + display: flex; +} + +.p-fluid .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input { + width: 1%; +} +`; + const inlineStyles = { root: { position: 'relative' } }; @@ -56,6 +271,7 @@ const classes = { export default BaseStyle.extend({ name: 'autocomplete', + theme, classes, inlineStyles }); diff --git a/components/lib/avatar/style/AvatarStyle.js b/components/lib/avatar/style/AvatarStyle.js index 919599ab5..93e7228df 100644 --- a/components/lib/avatar/style/AvatarStyle.js +++ b/components/lib/avatar/style/AvatarStyle.js @@ -1,5 +1,72 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + font-size: 1rem; + background: ${dt('avatar.background')}; + border-radius: ${dt('rounded.base')}; +} + +.p-avatar-image { + background-color: transparent; +} + +.p-avatar-circle { + border-radius: 50%; +} + +.p-avatar-circle img { + border-radius: 50%; +} + +.p-avatar-icon { + font-size: 1rem; +} + +.p-avatar img { + width: 100%; + height: 100%; +} + +.p-avatar-lg { + width: 3rem; + height: 3rem; + font-size: 1.5rem; +} + +.p-avatar-lg .p-avatar-icon { + font-size: 1.5rem; +} + +.p-avatar-xl { + width: 4rem; + height: 4rem; + font-size: 2rem; +} + +.p-avatar-xl .p-avatar-icon { + font-size: 2rem; +} + +.p-avatar-group { + display: flex; + align-items: center; +} + +.p-avatar-group .p-avatar + .p-avatar { + margin-left: -1rem; +} + +.p-avatar-group .p-avatar { + border: 2px solid ${dt('avatar.grouped.border.color')}; +} +`; + const classes = { root: ({ props }) => [ 'p-avatar p-component', @@ -16,5 +83,6 @@ const classes = { export default BaseStyle.extend({ name: 'avatar', + theme, classes }); diff --git a/components/lib/badge/style/BadgeStyle.js b/components/lib/badge/style/BadgeStyle.js index b68f70e14..49c1e4f2b 100644 --- a/components/lib/badge/style/BadgeStyle.js +++ b/components/lib/badge/style/BadgeStyle.js @@ -1,6 +1,92 @@ import BaseStyle from 'primevue/base/style'; import { ObjectUtils } from 'primevue/utils'; +const theme = ({ dt }) => ` +.p-badge { + display: inline-flex; + border-radius: 10px; + justify-content: center; + padding: 0 0.5rem; + background: ${dt('badge.primary.background')}; + color: ${dt('badge.primary.color')}; + font-size: 0.75rem; + font-weight: 700; + min-width: 1.5rem; + height: 1.5rem; + line-height: 1.5rem; +} + +.p-overlay-badge { + position: relative; +} + +.p-overlay-badge .p-badge { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0; + margin: 0; +} + +.p-badge-dot { + width: 0.5rem; + min-width: 0.5rem; + height: 0.5rem; + border-radius: 50%; + padding: 0; +} + +.p-badge-circle { + padding: 0; + border-radius: 50%; +} + +.p-badge-secondary { + background: ${dt('badge.secondary.background')}; + color: ${dt('badge.secondary.color')}; +} + +.p-badge-success { + background: ${dt('badge.success.background')}; + color: ${dt('badge.success.color')}; +} + +.p-badge-info { + background: ${dt('badge.info.background')}; + color: ${dt('badge.info.color')}; +} + +.p-badge-warn { + background: ${dt('badge.warn.background')}; + color: ${dt('badge.warn.color')}; +} + +.p-badge-danger { + background: ${dt('badge.danger.background')}; + color: ${dt('badge.danger.color')}; +} + +.p-badge-contrast { + background: ${dt('badge.contrast.background')}; + color: ${dt('badge.contrast.color')}; +} + +.p-badge-lg { + font-size: 1.125rem; + min-width: 2.25rem; + height: 2.25rem; + line-height: 2.25rem; +} + +.p-badge-xl { + font-size: 1.5rem; + min-width: 3rem; + height: 3rem; + line-height: 3rem; +} +`; + const classes = { root: ({ props, instance }) => [ 'p-badge p-component', @@ -21,5 +107,6 @@ const classes = { export default BaseStyle.extend({ name: 'badge', + theme, classes }); diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js index 9cf0b907e..1c40a2641 100644 --- a/components/lib/base/style/BaseStyle.js +++ b/components/lib/base/style/BaseStyle.js @@ -2,6 +2,235 @@ import Theme, { dt } from 'primevue/themes'; import { useStyle } from 'primevue/usestyle'; import { ObjectUtils } from 'primevue/utils'; +const theme = ({ dt }) => ` +.p-component, +.p-component * { + box-sizing: border-box; +} + +.p-hidden-space { + visibility: hidden; +} + +.p-reset { + margin: 0; + padding: 0; + border: 0; + outline: 0; + text-decoration: none; + font-size: 100%; + list-style: none; +} + +.p-disabled, +.p-disabled * { + cursor: default; + pointer-events: none; + user-select: none; +} + +.p-component-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.p-unselectable-text { + user-select: none; +} + +.p-sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal; +} + +.p-link { + text-align: left; + background-color: transparent; + margin: 0; + padding: 0; + border: none; + cursor: pointer; + user-select: none; +} + +.p-link:disabled { + cursor: default; +} + +/* Non vue overlay animations */ +.p-connected-overlay { + opacity: 0; + transform: scaleY(0.8); + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), + opacity 0.12s cubic-bezier(0, 0, 0.2, 1); +} + +.p-connected-overlay-visible { + opacity: 1; + transform: scaleY(1); +} + +.p-connected-overlay-hidden { + opacity: 0; + transform: scaleY(1); + transition: opacity 0.1s linear; +} + +/* Vue based overlay animations */ +.p-connected-overlay-enter-from { + opacity: 0; + transform: scaleY(0.8); +} + +.p-connected-overlay-leave-to { + opacity: 0; +} + +.p-connected-overlay-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), + opacity 0.12s cubic-bezier(0, 0, 0.2, 1); +} + +.p-connected-overlay-leave-active { + transition: opacity 0.1s linear; +} + +/* Toggleable Content */ +.p-toggleable-content-enter-from, +.p-toggleable-content-leave-to { + max-height: 0; +} + +.p-toggleable-content-enter-to, +.p-toggleable-content-leave-from { + max-height: 1000px; +} + +.p-toggleable-content-leave-active { + overflow: hidden; + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); +} + +.p-toggleable-content-enter-active { + overflow: hidden; + transition: max-height 1s ease-in-out; +} + +* { + box-sizing: border-box; +} + +.p-component { + font-size: 1rem; + font-weight: normal; +} + +.p-component-overlay { + background-color: rgba(0, 0, 0, 0.4); + transition-duration: ${dt('transition.duration')}; +} + +.p-disabled, +.p-component:disabled { + opacity: 0.6; +} + +.p-error { + color: #f87171; +} + +.p-text-secondary { + color: #64748b; +} + +.pi { + font-size: 1rem; +} + +.p-icon { + width: 1rem; + height: 1rem; +} + +.p-link { + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; + border-radius: 6px; + outline-color: transparent; +} +.p-link:focus-visible { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: 2px; + box-shadow: none; +} + +.p-component-overlay-enter { + animation: p-component-overlay-enter-animation 150ms forwards; +} + +.p-component-overlay-leave { + animation: p-component-overlay-leave-animation 150ms forwards; +} + +@keyframes p-component-overlay-enter-animation { + from { + background-color: transparent; + } + to { + background-color: ${dt('mask.background')}; + } +} +@keyframes p-component-overlay-leave-animation { + from { + background-color: ${dt('mask.background')}; + } + to { + background-color: transparent; + } +} + +.p-ripple { + overflow: hidden; + position: relative; +} + +.p-ink { + display: block; + position: absolute; + background: rgba(255, 255, 255, 0.5); + border-radius: 100%; + transform: scale(0); + pointer-events: none; +} + +.p-ink-active { + animation: ripple 0.4s linear; +} + +.p-ripple-disabled .p-ink { + display: none; +} + +@keyframes ripple { + 100% { + opacity: 0; + transform: scale(2.5); + } +} +`; + const css = ({ dt }) => ` .p-hidden-accessible { border: 0; @@ -32,6 +261,7 @@ const inlineStyles = {}; export default { name: 'base', css, + theme, classes, inlineStyles, loadStyle(options = {}) { @@ -39,6 +269,11 @@ export default { return css ? useStyle(ObjectUtils.minifyCSS(css), { name: this.name, ...options }) : {}; }, + loadInlineTheme(options = {}) { + const theme = ObjectUtils.getItemValue(this.theme, { dt }); + + return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: this.name, ...options }) : {}; + }, loadTheme(theme, options = {}) { const callbacks = { onMounted: (name) => Theme.onStyleMounted(name), onUpdated: (name) => Theme.onStyleUpdated(name), onLoad: (event, options) => Theme.onStyleLoaded(event, options) }; @@ -78,6 +313,6 @@ export default { return Theme.getStyleSheet(this.name, params, props); }, extend(style) { - return { ...this, css: undefined, ...style }; + return { ...this, css: undefined, theme: undefined, ...style }; } }; diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue index 1505b208c..8902a2a02 100644 --- a/components/lib/basecomponent/BaseComponent.vue +++ b/components/lib/basecomponent/BaseComponent.vue @@ -154,11 +154,11 @@ export default { // common if (!Theme.isStyleNameLoaded('common')) { - const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.() || {}; + const { primitive, semantic } = this.$style?.getCommonThemeCSS?.() || {}; BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...this.$styleOptions }); BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...this.$styleOptions }); - BaseStyle.loadTheme(global, { name: 'global-style', ...this.$styleOptions }); + BaseStyle.loadInlineTheme({ name: 'global-style', ...this.$styleOptions }); Theme.setLoadedStyleName('common'); } @@ -168,7 +168,9 @@ export default { const { variables, style } = this.$style?.getComponentThemeCSS?.() || {}; this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, ...this.$styleOptions }); - this.$style?.loadTheme(style, { name: `${this.$style.name}-style`, ...this.$styleOptions }); + this.$style?.loadInlineTheme({ name: `${this.$style.name}-style`, ...this.$styleOptions }); + + //this.$style?.loadTheme(style, { name: `${this.$style.name}-style`, ...this.$styleOptions }); Theme.setLoadedStyleName(this.$style.name); } @@ -289,7 +291,7 @@ export default { return this._getPTValue(this.pt, key, { ...this.$params, ...params }); }, ptmi(key = '', params = {}) { - // inheritAttrs:true without `pt:*` + // inheritAttrs:true return mergeProps(this.$_attrsWithoutPT, this.ptm(key, params)); }, ptmo(obj = {}, key = '', params = {}) { @@ -366,7 +368,6 @@ export default { }, {}); }, $_attrsWithoutPT() { - // $attrs without `pt:*` return Object.entries(this.$attrs || {}) .filter(([key]) => !key?.startsWith('pt:')) .reduce((acc, [key, value]) => { diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js index cdaa852e2..4822845a5 100644 --- a/components/lib/basedirective/BaseDirective.js +++ b/components/lib/basedirective/BaseDirective.js @@ -98,11 +98,11 @@ const BaseDirective = { // common if (!Theme.isStyleNameLoaded('common')) { - const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.() || {}; + const { primitive, semantic } = instance.$style?.getCommonThemeCSS?.() || {}; BaseStyle.loadTheme(primitive, { name: 'primitive-variables', ...useStyleOptions }); BaseStyle.loadTheme(semantic, { name: 'semantic-variables', ...useStyleOptions }); - BaseStyle.loadTheme(global, { name: 'global-style', ...useStyleOptions }); + BaseStyle.loadInlineTheme({ name: 'global-style', ...useStyleOptions }); Theme.setLoadedStyleName('common'); } @@ -112,7 +112,8 @@ const BaseDirective = { const { variables, style } = instance.$style?.getDirectiveThemeCSS?.() || {}; instance.$style?.loadTheme(variables, { name: `${instance.$style.name}-variables`, ...useStyleOptions }); - instance.$style?.loadTheme(style, { name: `${instance.$style.name}-style`, ...useStyleOptions }); + instance.$style?.loadInlineTheme({ name: `${instance.$style.name}-style`, ...useStyleOptions }); + //instance.$style?.loadTheme(style, { name: `${instance.$style.name}-style`, ...useStyleOptions }); Theme.setLoadedStyleName(instance.$style.name); } diff --git a/components/lib/blockui/style/BlockUIStyle.js b/components/lib/blockui/style/BlockUIStyle.js index ed0429d49..e2301567e 100644 --- a/components/lib/blockui/style/BlockUIStyle.js +++ b/components/lib/blockui/style/BlockUIStyle.js @@ -1,10 +1,29 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-blockui { + position: relative; +} + +.p-blockui-mask { + border-radius: ${dt('rounded.base')}; +} + +.p-blockui-mask.p-component-overlay { + position: absolute; +} + +.p-blockui-mask-document.p-component-overlay { + position: fixed; +} +`; + const classes = { root: 'p-blockui' }; export default BaseStyle.extend({ name: 'blockui', + theme, classes }); diff --git a/components/lib/breadcrumb/style/BreadcrumbStyle.js b/components/lib/breadcrumb/style/BreadcrumbStyle.js index d26252cfa..9b051ef71 100644 --- a/components/lib/breadcrumb/style/BreadcrumbStyle.js +++ b/components/lib/breadcrumb/style/BreadcrumbStyle.js @@ -1,5 +1,64 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-breadcrumb { + background: ${dt('breadcrumb.background')}; + border: 0 none; + border-radius: ${dt('rounded.base')}; + padding: 1rem; + overflow-x: auto; +} + +.p-breadcrumb-list { + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + align-items: center; + flex-wrap: nowrap; +} + +.p-breadcrumb-separator { + display: flex; + align-items: center; + margin: 0 0.5rem 0 0.5rem; + color: ${dt('breadcrumb.separator.color')}; +} + +.p-breadcrumb::-webkit-scrollbar { + display: none; +} + +.p-breadcrumb-item-link { + text-decoration: none; + display: flex; + align-items: center; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; +} + +.p-breadcrumb-item-link:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-breadcrumb-item-link { + color: ${dt('breadcrumb.item.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + line-height: 1; +} + +.p-breadcrumb-item-label:hover { + color: ${dt('breadcrumb.item.hover.color')}; + line-height: 1; +} + +.p-breadcrumb-item-icon { + color: ${dt('breadcrumb.item.icon.color')}; +} +`; + const classes = { root: 'p-breadcrumb p-component', list: 'p-breadcrumb-list', @@ -13,5 +72,6 @@ const classes = { export default BaseStyle.extend({ name: 'breadcrumb', + theme, classes }); diff --git a/components/lib/button/style/ButtonStyle.js b/components/lib/button/style/ButtonStyle.js index 81487e00e..31f4c683f 100644 --- a/components/lib/button/style/ButtonStyle.js +++ b/components/lib/button/style/ButtonStyle.js @@ -1,5 +1,594 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-button { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + color: ${dt('button.primary.color')}; + background: ${dt('button.primary.background')}; + border: 1px solid ${dt('button.primary.border.color')}; + padding: 0.5rem 1rem; + font-size: 1rem; + font-family: inherit; + font-feature-settings: inherit; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + gap: 0.5rem; +} + +.p-button:disabled { + cursor: default; +} + +.p-button-icon-right { + order: 1; +} + +.p-button-icon-bottom { + order: 2; +} + +.p-button-icon-only { + justify-content: center; + width: 2.5rem; + padding: 0.5rem 0; +} + +.p-button-icon-only.p-button-rounded { + border-radius: 50%; + height: 2.5rem; +} + +.p-button-sm { + font-size: 0.875rem; + padding: 0.375rem 0.875rem; +} + +.p-button-sm .p-button-icon { + font-size: 0.875rem; +} + +.p-button-lg { + font-size: 1.25rem; + padding: 0.625rem 1.25rem; +} + +.p-button-lg .p-button-icon { + font-size: 1.25rem; +} + +.p-button-vertical { + flex-direction: column; +} + +.p-button-label { + font-weight: 500; +} + +.p-fluid .p-button { + width: 100%; +} + +.p-fluid .p-button-icon-only { + width: 2.5rem; +} + +.p-button:not(:disabled):hover { + background: ${dt('button.primary.hover.background')}; + border: 1px solid ${dt('button.primary.hover.border.color')}; + color: ${dt('button.primary.hover.color')}; +} + +.p-button:not(:disabled):active { + background: ${dt('button.primary.active.background')}; + border: 1px solid ${dt('button.primary.active.border.color')}; + color: ${dt('button.primary.active.color')}; +} + +.p-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-button .p-badge { + margin-left: 0.5rem; + min-width: 1rem; + height: 1rem; + line-height: 1rem; + background: ${dt('button.primary.color')}; + color: ${dt('button.primary.background')}; +} + +.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} + +.p-button-rounded { + border-radius: 2rem; +} + +/* Default Severities */ +.p-button-secondary { + background: ${dt('button.secondary.background')}; + border: 1px solid ${dt('button.secondary.border.color')}; + color: ${dt('button.secondary.color')}; +} + +.p-button-secondary:not(:disabled):hover { + background: ${dt('button.secondary.hover.background')}; + border: 1px solid ${dt('button.secondary.hover.border.color')}; + color: ${dt('button.secondary.hover.color')}; +} + +.p-button-secondary:not(:disabled):active { + background: ${dt('button.secondary.active.background')}; + border: 1px solid ${dt('button.secondary.active.border.color')}; + color: ${dt('button.secondary.active.color')}; +} + +.p-button-success { + background: ${dt('button.success.background')}; + border: 1px solid ${dt('button.success.border.color')}; + color: ${dt('button.success.color')}; +} + +.p-button-success:not(:disabled):hover { + background: ${dt('button.success.hover.background')}; + border: 1px solid ${dt('button.success.hover.border.color')}; + color: ${dt('button.success.hover.color')}; +} + +.p-button-success:not(:disabled):active { + background: ${dt('button.success.active.background')}; + border: 1px solid ${dt('button.success.active.border.color')}; + color: ${dt('button.success.active.color')}; +} + +.p-button-success:focus-visible { + outline-color: ${dt('button.success.background')}; +} + +.p-button-info { + background: ${dt('button.info.background')}; + border: 1px solid ${dt('button.info.border.color')}; + color: ${dt('button.info.color')}; +} + +.p-button-info:not(:disabled):hover { + background: ${dt('button.info.hover.background')}; + border: 1px solid ${dt('button.info.hover.border.color')}; + color: ${dt('button.info.hover.color')}; +} + +.p-button-info:not(:disabled):active { + background: ${dt('button.info.active.background')}; + border: 1px solid ${dt('button.info.active.border.color')}; + color: ${dt('button.info.active.color')}; +} + +.p-button-info:focus-visible { + outline-color: ${dt('button.info.background')}; +} + +.p-button-warn { + background: ${dt('button.warn.background')}; + border: 1px solid ${dt('button.warn.border.color')}; + color: ${dt('button.warn.color')}; +} + +.p-button-warn:not(:disabled):hover { + background: ${dt('button.warn.hover.background')}; + border: 1px solid ${dt('button.warn.hover.border.color')}; + color: ${dt('button.warn.hover.color')}; +} + +.p-button-warn:not(:disabled):active { + background: ${dt('button.warn.active.background')}; + border: 1px solid ${dt('button.warn.active.border.color')}; + color: ${dt('button.warn.active.color')}; +} + +.p-button-warn:focus-visible { + background: ${dt('button.warn.background')}; +} + +.p-button-help { + background: ${dt('button.help.background')}; + border: 1px solid ${dt('button.help.border.color')}; + color: ${dt('button.help.color')}; +} + +.p-button-help:not(:disabled):hover { + background: ${dt('button.help.hover.background')}; + border: 1px solid ${dt('button.help.hover.border.color')}; + color: ${dt('button.help.hover.color')}; +} + +.p-button-help:not(:disabled):active { + background: ${dt('button.help.active.background')}; + border: 1px solid ${dt('button.help.active.border.color')}; + color: ${dt('button.help.active.color')}; +} + +.p-button-help:focus-visible { + outline-color: ${dt('button.help.background')}; +} + +.p-button-danger { + background: ${dt('button.danger.background')}; + border: 1px solid ${dt('button.danger.border.color')}; + color: ${dt('button.danger.color')}; +} + +.p-button-danger:not(:disabled):hover { + background: ${dt('button.danger.hover.background')}; + border: 1px solid ${dt('button.danger.hover.border.color')}; + color: ${dt('button.danger.hover.color')}; +} + +.p-button-danger:not(:disabled):active { + background: ${dt('button.danger.active.background')}; + border: 1px solid ${dt('button.danger.active.border.color')}; + color: ${dt('button.danger.active.color')}; +} + +.p-button-danger:focus-visible { + background: ${dt('button.danger.background')}; +} + +.p-button-contrast { + background: ${dt('button.contrast.background')}; + border: 1px solid ${dt('button.contrast.border.color')}; + color: ${dt('button.contrast.color')}; +} + +.p-button-contrast:not(:disabled):hover { + background: ${dt('button.contrast.hover.background')}; + border: 1px solid ${dt('button.contrast.hover.border.color')}; + color: ${dt('button.contrast.hover.color')}; +} + +.p-button-contrast:not(:disabled):active { + background: ${dt('button.contrast.active.background')}; + border: 1px solid ${dt('button.contrast.active.border.color')}; + color: ${dt('button.contrast.active.color')}; +} + +.p-button-contrast:focus-visible { + outline-color: ${dt('button.contrast.background')}; +} + + +/* Outlined Buttons */ +.p-button-outlined { + background: transparent; + border-color: ${dt('button.outlined.primary.border.color')}; + color: ${dt('button.outlined.primary.color')}; +} + +.p-button-outlined:not(:disabled):hover { + background: ${dt('button.outlined.primary.hover.background')}; + border-color: ${dt('button.outlined.primary.border.color')}; + color: ${dt('button.outlined.primary.color')}; +} + +.p-button-outlined:not(:disabled):active { + background: ${dt('button.outlined.primary.active.background')}; + border-color: ${dt('button.outlined.primary.border.color')}; + color: ${dt('button.outlined.primary.color')}; +} + +.p-button-outlined.p-button-secondary { + border-color: ${dt('button.outlined.secondary.border.color')}; + color: ${dt('button.outlined.secondary.color')}; +} + +.p-button-outlined.p-button-secondary:not(:disabled):hover { + background: ${dt('button.outlined.secondary.hover.background')}; + border-color: ${dt('button.outlined.secondary.border.color')}; + color: ${dt('button.outlined.secondary.color')}; +} + +.p-button-outlined.p-button-secondary:not(:disabled):active { + background: ${dt('button.outlined.secondary.active.background')}; + border-color: ${dt('button.outlined.secondary.border.color')}; + color: ${dt('button.outlined.secondary.color')}; +} + +.p-button-outlined.p-button-success { + border-color: ${dt('button.outlined.success.border.color')}; + color: ${dt('button.outlined.success.color')}; +} + +.p-button-outlined.p-button-success:not(:disabled):hover { + background: ${dt('button.outlined.success.hover.background')}; + border-color: ${dt('button.outlined.success.border.color')}; + color: ${dt('button.outlined.success.color')}; +} + +.p-button-outlined.p-button-success:not(:disabled):active { + background: ${dt('button.outlined.success.active.background')}; + border-color: ${dt('button.outlined.success.border.color')}; + color: ${dt('button.outlined.success.color')}; +} + +.p-button-outlined.p-button-info { + border-color: ${dt('button.outlined.info.border.color')}; + color: ${dt('button.outlined.info.color')}; +} + +.p-button-outlined.p-button-info:not(:disabled):hover { + background: ${dt('button.outlined.info.hover.background')}; + border-color: ${dt('button.outlined.info.border.color')}; + color: ${dt('button.outlined.info.color')}; +} + +.p-button-outlined.p-button-info:not(:disabled):active { + background: ${dt('button.outlined.info.active.background')}; + border-color: ${dt('button.outlined.info.border.color')}; + color: ${dt('button.outlined.info.color')}; +} + +.p-button-outlined.p-button-warn { + border-color: ${dt('button.outlined.warn.border.color')}; + color: ${dt('button.outlined.warn.color')}; +} + +.p-button-outlined.p-button-warn:not(:disabled):hover { + background: ${dt('button.outlined.warn.hover.background')}; + border-color: ${dt('button.outlined.warn.border.color')}; + color: ${dt('button.outlined.warn.color')}; +} + +.p-button-outlined.p-button-warn:not(:disabled):active { + background: ${dt('button.outlined.warn.active.background')}; + border-color: ${dt('button.outlined.warn.border.color')}; + color: ${dt('button.outlined.warn.color')}; +} + +.p-button-outlined.p-button-help { + border-color: ${dt('button.outlined.help.border.color')}; + color: ${dt('button.outlined.help.color')}; +} + +.p-button-outlined.p-button-help:not(:disabled):hover { + background: ${dt('button.outlined.help.hover.background')}; + border-color: ${dt('button.outlined.help.border.color')}; + color: ${dt('button.outlined.help.color')}; +} + +.p-button-outlined.p-button-help:not(:disabled):active { + background: ${dt('button.outlined.help.active.background')}; + border-color: ${dt('button.outlined.help.border.color')}; + color: ${dt('button.outlined.help.color')}; +} + +.p-button-outlined.p-button-danger { + border-color: ${dt('button.outlined.danger.border.color')}; + color: ${dt('button.outlined.danger.color')}; +} + +.p-button-outlined.p-button-danger:not(:disabled):hover { + background: ${dt('button.outlined.danger.hover.background')}; + border-color: ${dt('button.outlined.danger.border.color')}; + color: ${dt('button.outlined.danger.color')}; +} + +.p-button-outlined.p-button-danger:not(:disabled):active { + background: ${dt('button.outlined.danger.active.background')}; + border-color: ${dt('button.outlined.danger.border.color')}; + color: ${dt('button.outlined.danger.color')}; +} + +.p-button-outlined.p-button-contrast { + border-color: ${dt('button.outlined.contrast.border.color')}; + color: ${dt('button.outlined.contrast.color')}; +} + +.p-button-outlined.p-button-contrast:not(:disabled):hover { + background: ${dt('button.outlined.contrast.hover.background')}; + border-color: ${dt('button.outlined.contrast.border.color')}; + color: ${dt('button.outlined.contrast.color')}; +} + +.p-button-outlined.p-button-contrast:not(:disabled):active { + background: ${dt('button.outlined.contrast.active.background')}; + border-color: ${dt('button.outlined.contrast.border.color')}; + color: ${dt('button.outlined.contrast.color')}; +} + +.p-button-outlined.p-button-plain { + border-color: ${dt('button.outlined.plain.border.color')}; + color: ${dt('button.outlined.plain.color')}; +} + +.p-button-outlined.p-button-plain:not(:disabled):hover { + background: ${dt('button.outlined.plain.hover.background')}; + border-color: ${dt('button.outlined.plain.border.color')}; + color: ${dt('button.outlined.plain.color')}; +} + +.p-button-outlined.p-button-plain:not(:disabled):active { + background: ${dt('button.outlined.plain.active.background')}; + border-color: ${dt('button.outlined.plain.border.color')}; + color: ${dt('button.outlined.plain.color')}; +} + +/* Text Button */ +.p-button-text { + background: transparent; + border-color: transparent; + color: ${dt('button.text.primary.color')}; +} + +.p-button-text:not(:disabled):hover { + background: ${dt('button.text.primary.hover.background')}; + border-color: transparent; + color: ${dt('button.text.primary.color')}; +} + +.p-button-text:not(:disabled):active { + background: ${dt('button.text.primary.active.background')}; + border-color: transparent; + color: ${dt('button.text.primary.color')}; +} + +.p-button-text.p-button-secondary { + background: transparent; + border-color: transparent; + color: ${dt('button.text.secondary.color')}; +} + +.p-button-text.p-button-secondary:not(:disabled):hover { + background: ${dt('button.text.secondary.hover.background')}; + border-color: transparent; + color: ${dt('button.text.secondary.color')}; +} + +.p-button-text.p-button-secondary:not(:disabled):active { + background: ${dt('button.text.secondary.active.background')}; + border-color: transparent; + color: ${dt('button.text.secondary.color')}; +} + +.p-button-text.p-button-success { + background: transparent; + border-color: transparent; + color: ${dt('button.text.success.color')}; +} + +.p-button-text.p-button-success:not(:disabled):hover { + background: ${dt('button.text.success.hover.background')}; + border-color: transparent; + color: ${dt('button.text.success.color')}; +} + +.p-button-text.p-button-success:not(:disabled):active { + background: ${dt('button.text.success.active.background')}; + border-color: transparent; + color: ${dt('button.text.success.color')}; +} + +.p-button-text.p-button-info { + background: transparent; + border-color: transparent; + color: ${dt('button.text.info.color')}; +} + +.p-button-text.p-button-info:not(:disabled):hover { + background: ${dt('button.text.info.hover.background')}; + border-color: transparent; + color: ${dt('button.text.info.color')}; +} + +.p-button-text.p-button-info:not(:disabled):active { + background: ${dt('button.text.info.active.background')}; + border-color: transparent; + color: ${dt('button.text.info.color')}; +} + +.p-button-text.p-button-warn { + background: transparent; + border-color: transparent; + color: ${dt('button.text.warn.color')}; +} + +.p-button-text.p-button-warn:not(:disabled):hover { + background: ${dt('button.text.warn.hover.background')}; + border-color: transparent; + color: ${dt('button.text.warn.color')}; +} + +.p-button-text.p-button-warn:not(:disabled):active { + background: ${dt('button.text.warn.active.background')}; + border-color: transparent; + color: ${dt('button.text.warn.color')}; +} + +.p-button-text.p-button-help { + background: transparent; + border-color: transparent; + color: ${dt('button.text.help.color')}; +} + +.p-button-text.p-button-help:not(:disabled):hover { + background: ${dt('button.text.help.hover.background')}; + border-color: transparent; + color: ${dt('button.text.help.color')}; +} + +.p-button-text.p-button-help:not(:disabled):active { + background: ${dt('button.text.help.active.background')}; + border-color: transparent; + color: ${dt('button.text.help.color')}; +} + +.p-button-text.p-button-danger { + background: transparent; + border-color: transparent; + color: ${dt('button.text.danger.color')}; +} + +.p-button-text.p-button-danger:not(:disabled):hover { + background: ${dt('button.text.danger.hover.background')}; + border-color: transparent; + color: ${dt('button.text.danger.color')}; +} + +.p-button-text.p-button-danger:not(:disabled):active { + background: ${dt('button.text.danger.active.background')}; + border-color: transparent; + color: ${dt('button.text.danger.color')}; +} + +.p-button-text.p-button-plain { + background: transparent; + border-color: transparent; + color: ${dt('button.text.plain.color')}; +} + +.p-button-text.p-button-plain:not(:disabled):hover { + background: ${dt('button.text.plain.hover.background')}; + border-color: transparent; + color: ${dt('button.text.plain.color')}; +} + +.p-button-text.p-button-plain:not(:disabled):active { + background: ${dt('button.text.plain.active.background')}; + border-color: transparent; + color: ${dt('button.text.plain.color')}; +} + +/* Link Button */ +.p-button-link { + background: transparent; + border-color: transparent; + color: ${dt('button.link.color')}; +} + +.p-button-link:not(:disabled):hover { + background: transparent; + border-color: transparent; + color: ${dt('button.link.hover.color')}; +} + +.p-button-link:not(:disabled):hover .p-button-label { + text-decoration: underline; +} + +.p-button-link:not(:disabled):active { + background: transparent; + border-color: transparent; + color: ${dt('button.link.active.color')}; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-button p-component', @@ -30,5 +619,6 @@ const classes = { export default BaseStyle.extend({ name: 'button', + theme, classes }); diff --git a/components/lib/buttongroup/style/ButtonGroupStyle.js b/components/lib/buttongroup/style/ButtonGroupStyle.js index 5ae26258c..5f1169596 100644 --- a/components/lib/buttongroup/style/ButtonGroupStyle.js +++ b/components/lib/buttongroup/style/ButtonGroupStyle.js @@ -1,10 +1,41 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-buttongroup .p-button { + margin: 0; +} + +.p-buttongroup .p-button:not(:last-child), +.p-buttongroup .p-button:not(:last-child):hover { + border-right: 0 none; +} + +.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) { + border-radius: 0; +} + +.p-buttongroup .p-button:first-of-type:not(:only-of-type) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.p-buttongroup .p-button:last-of-type:not(:only-of-type) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.p-buttongroup .p-button:focus { + position: relative; + z-index: 1; +} +`; + const classes = { root: 'p-buttongroup p-component' }; export default BaseStyle.extend({ name: 'buttongroup', + theme, classes }); diff --git a/components/lib/card/style/CardStyle.js b/components/lib/card/style/CardStyle.js index 5b5e72abf..5b9a3bc4e 100644 --- a/components/lib/card/style/CardStyle.js +++ b/components/lib/card/style/CardStyle.js @@ -1,5 +1,39 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-card { + background: ${dt('card.background')}; + color: ${dt('card.color')}; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); + border-radius: 12px; + display: flex; + flex-direction: column; +} + +.p-card-caption { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.p-card-body { + padding: 1.5rem; + display: flex; + flex-direction: column; + gap: 1rem; +} + +.p-card-title { + font-size: 1.25rem; + font-weight: 600; +} + +.p-card-subtitle { + font-weight: 400; + color: ${dt('card.subtitle.color')}; +} +`; + const classes = { root: 'p-card p-component', header: 'p-card-header', @@ -13,5 +47,6 @@ const classes = { export default BaseStyle.extend({ name: 'card', + theme, classes }); diff --git a/components/lib/carousel/style/CarouselStyle.js b/components/lib/carousel/style/CarouselStyle.js index 27b7e5212..b033d8a50 100644 --- a/components/lib/carousel/style/CarouselStyle.js +++ b/components/lib/carousel/style/CarouselStyle.js @@ -1,5 +1,96 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-carousel { + display: flex; + flex-direction: column; +} + +.p-carousel-content-container { + display: flex; + flex-direction: column; + overflow: auto; +} + +.p-carousel-content { + display: flex; + flex-direction: row; +} + +.p-carousel-viewport { + overflow: hidden; + width: 100%; +} + +.p-carousel-item-list { + display: flex; + flex-direction: row; +} + +.p-carousel-prev-button, +.p-carousel-next-button { + align-self: center; +} + +.p-carousel-indicator-list { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + padding: 1rem; + gap: 0.5rem; + margin: 0; + list-style: none; +} + +.p-carousel-indicator-button { + display: flex; + align-items: center; + justify-content: center; + background: ${dt('carousel.indicator.background')}; + width: 2rem; + height: 0.5rem; + border: 0 none; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + border-radius: ${dt('rounded.base')}; + padding: 0; + margin: 0; + border: none; + user-select: none; +} + +.p-carousel-indicator-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-carousel-indicator-button:hover { + background: ${dt('carousel.indicator.hover.background')}; +} + +.p-carousel-indicator-active .p-carousel-indicator-button { + background: ${dt('carousel.indicator.active.background')}; +} + +.p-carousel-vertical .p-carousel-content { + flex-direction: column; +} + +.p-carousel-vertical .p-carousel-item-list { + flex-direction: column; + height: 100%; +} + +.p-items-hidden .p-carousel-item { + visibility: hidden; +} + +.p-items-hidden .p-carousel-item.p-carousel-item-active { + visibility: visible; +} +`; + const classes = { root: ({ instance }) => [ 'p-carousel p-component', @@ -54,5 +145,6 @@ const classes = { export default BaseStyle.extend({ name: 'carousel', + theme, classes }); diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js index adf6133c1..d517f3c0b 100644 --- a/components/lib/cascadeselect/style/CascadeSelectStyle.js +++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js @@ -1,5 +1,190 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-cascadeselect { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + background: ${dt('cascadeselect.background')}; + border: 1px solid ${dt('cascadeselect.border.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + box-shadow: ${dt('cascadeselect.box.shadow')}; +} + +.p-cascadeselect:not(.p-disabled):hover { + border-color: ${dt('cascadeselect.hover.border.color')}; +} + +.p-cascadeselect:not(.p-disabled).p-focus { + border-color: ${dt('cascadeselect.focus.border.color')}; + outline: 0 none; +} + +.p-cascadeselect.p-variant-filled { + background: ${dt('cascadeselect.filled.background')}; +} + +.p-cascadeselect.p-variant-filled.p-focus { + background: ${dt('cascadeselect.filled.focus.background')}; +} + +.p-cascadeselect.p-invalid { + border-color: ${dt('cascadeselect.invalid.border.color')}; +} + +.p-cascadeselect.p-disabled { + opacity: 1; + background: ${dt('cascadeselect.disabled.background')}; +} + +.p-cascadeselect-dropdown { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + background: transparent; + color: ${dt('cascadeselect.toggle.color')}; + width: 2.5rem; + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; +} + +.p-cascadeselect-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + padding: 0.5rem 0.75rem; + text-overflow: ellipsis; + cursor: pointer; + color: ${dt('cascadeselect.color')}; + background: transparent; + border: 0 none; + outline: 0 none; +} + +.p-cascadeselect-label.p-placeholder { + color: ${dt('cascadeselect.placeholder.color')}; +} + +.p-cascadeselect-clearable .p-cascadeselect-label { + padding-right: 1.75rem; +} + +.p-cascadeselect.p-disabled .p-cascadeselect-label { + color: ${dt('cascadeselect.disabled.color')}; +} + +.p-cascadeselect-label-empty { + overflow: hidden; + visibility: hidden; +} + +.p-fluid .p-cascadeselect { + display: flex; +} + +.p-fluid .p-cascadeselect .p-cascadeselect-label { + width: 1%; +} + +.p-cascadeselect-overlay { + background: ${dt('cascadeselect.overlay.background')}; + color: ${dt('cascadeselect.overlay.color')}; + border: 1px solid ${dt('cascadeselect.overlay.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-cascadeselect .p-cascadeselect-overlay { + min-width: 100%; +} + +.p-cascadeselect-item-list { + position: absolute; + min-width: 100%; + z-index: 1; + display: none; +} + +.p-cascadeselect-list { + margin: 0; + padding: 0; + list-style-type: none; + min-width: 100%; + padding: 0.25rem 0.25rem; +} + +.p-cascadeselect-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + margin: 2px 0; + border: 0 none; + color: ${dt('cascadeselect.item.color')}; + background: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; +} + +.p-cascadeselect-item:first-child { + margin-top: 0; +} + +.p-cascadeselect-item:last-child { + margin-bottom: 0; +} + +.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus { + background: ${dt('cascadeselect.item.focus.background')}; + color: ${dt('cascadeselect.item.focus.color')}; +} + +.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon { + color: ${dt('cascadeselect.item.icon.focus.color')}; +} + +.p-cascadeselect-item-selected { + background: ${dt('cascadeselect.item.selected.background')}; + color: ${dt('cascadeselect.item.selected.color')}; +} + +.p-cascadeselect-item-selected.p-focus { + background: ${dt('cascadeselect.item.selected.focus.background')}; + color: ${dt('cascadeselect.item.selected.focus.color')}; +} + +.p-cascadeselect-item-active { + overflow: visible; + background: ${dt('cascadeselect.item.focus.background')}; + color: ${dt('cascadeselect.item.focus.color')}; +} + +.p-cascadeselect-item-active > .p-cascadeselect-item-list { + display: block; + left: 100%; + top: 0; +} + +.p-cascadeselect-item-content { + display: flex; + align-items: center; + overflow: hidden; + position: relative; + padding: 0.5rem 0.75rem; +} + +.p-cascadeselect-group-icon { + margin-left: auto; + font-size: 0.875rem; + color: ${dt('cascadeselect.item.icon.color')}; +} +`; + const inlineStyles = { root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined }) }; @@ -52,6 +237,7 @@ const classes = { export default BaseStyle.extend({ name: 'cascadeselect', + theme, classes, inlineStyles }); diff --git a/components/lib/checkbox/style/CheckboxStyle.js b/components/lib/checkbox/style/CheckboxStyle.js index 124efa728..28d576f99 100644 --- a/components/lib/checkbox/style/CheckboxStyle.js +++ b/components/lib/checkbox/style/CheckboxStyle.js @@ -1,5 +1,110 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + width: ${dt('checkbox.width')}; + height: ${dt('checkbox.height')}; +} + +.p-checkbox-input { + cursor: pointer; + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid transparent; + border-radius: ${dt('checkbox.border.radius')}; +} + +.p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: ${dt('checkbox.border.radius')}; + border: 1px solid ${dt('checkbox.border.color')}; + background: ${dt('checkbox.background')}; + width: ${dt('checkbox.width')}; + height: ${dt('checkbox.width')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + box-shadow: ${dt('checkbox.box.shadow')}; +} + +.p-checkbox-icon { + transition-duration: ${dt('transition.duration')}; + color: ${dt('checkbox.icon.color')}; + font-size: ${dt('checkbox.icon.size')}; + width: ${dt('checkbox.icon.size')}; + height: ${dt('checkbox.icon.size')}; +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: ${dt('checkbox.hover.border.color')}; +} + +.p-checkbox-checked .p-checkbox-box { + border-color: ${dt('checkbox.checked.border.color')}; + background: ${dt('checkbox.checked.background')}; +} + +.p-checkbox-checked .p-checkbox-icon { + color: ${dt('checkbox.icon.checked.color')}; +} + +.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background: ${dt('checkbox.checked.hover.background')}; + border-color: ${dt('checkbox.checked.hover.border.color')}; +} + +.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon { + color: ${dt('checkbox.icon.checked.hover.color')}; +} + +.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-checkbox.p-invalid > .p-checkbox-box { + border-color: ${dt('checkbox.invalid.border.color')}; +} + +.p-checkbox.p-variant-filled .p-checkbox-box { + background: ${dt('checkbox.filled.background')}; +} + +.p-checkbox-checked.p-variant-filled .p-checkbox-box { + background: ${dt('checkbox.checked.background')}; +} + +.p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background: ${dt('checkbox.checked.hover.background')}; +} + +.p-checkbox.p-disabled { + opacity: 1; +} + +.p-checkbox.p-disabled .p-checkbox-box { + background: ${dt('checkbox.disabled.background')}; +} + +.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { + color: ${dt('checkbox.icon.disabled.color')}; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-checkbox p-component', @@ -17,5 +122,6 @@ const classes = { export default BaseStyle.extend({ name: 'checkbox', + theme, classes }); diff --git a/components/lib/chip/style/ChipStyle.js b/components/lib/chip/style/ChipStyle.js index 1e85395a6..2f7bc5262 100644 --- a/components/lib/chip/style/ChipStyle.js +++ b/components/lib/chip/style/ChipStyle.js @@ -1,5 +1,51 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-chip { + display: inline-flex; + align-items: center; + background: ${dt('chip.background')}; + color: ${dt('chip.color')}; + border-radius: 16px; + padding: 0.25rem 0.75rem; +} + +.p-chip-label { + line-height: 1.5; +} + +.p-chip-icon { + line-height: 1.5; + margin-right: 0.5rem; +} + +.p-chip-image { + border-radius: 50%; + width: 2rem; + height: 2rem; + margin-left: -0.5rem; + margin-right: 0.5rem; +} + +.p-chip:has(.p-chip-remove-icon) { + padding-right: 0.5rem; +} + +.p-chip-remove-icon { + line-height: 1.5; + cursor: pointer; + margin-left: 0.375rem; + border-radius: 6px; + transition: outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-chip-remove-icon:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} +`; + const classes = { root: 'p-chip p-component', image: 'p-chip-image', @@ -10,5 +56,6 @@ const classes = { export default BaseStyle.extend({ name: 'chip', + theme, classes }); diff --git a/components/lib/colorpicker/style/ColorPickerStyle.js b/components/lib/colorpicker/style/ColorPickerStyle.js index bff4ca61e..f0d0ba706 100644 --- a/components/lib/colorpicker/style/ColorPickerStyle.js +++ b/components/lib/colorpicker/style/ColorPickerStyle.js @@ -1,5 +1,114 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-colorpicker { + display: inline-block; + position: relative; +} + +.p-colorpicker-dragging { + cursor: pointer; +} + +.p-colorpicker-preview { + width: 1.5rem; + height: 1.5rem; + padding: 0; + border: 0 none; + border-radius: ${dt('rounded.base')}; + transition: outline-color ${dt('transition.duration')}; + outline-color: transparent; + cursor: pointer; +} + +.p-colorpicker-preview:enabled:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-colorpicker-panel { + background: ${dt('colorpicker.panel.background')}; + border: 1px solid ${dt('colorpicker.panel.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + width: 193px; + height: 166px; + position: absolute; + top: 0; + left: 0; +} + +.p-colorpicker-panel-inline { + box-shadow: none; + position: static; +} + +.p-colorpicker-content { + position: relative; +} + +.p-colorpicker-color-selector { + width: 150px; + height: 150px; + top: 8px; + left: 8px; + position: absolute; +} + +.p-colorpicker-color-background { + width: 100%; + height: 100%; + background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); +} + +.p-colorpicker-color-handle { + position: absolute; + top: 0px; + left: 150px; + border-radius: 100%; + width: 10px; + height: 10px; + border-width: 1px; + border-style: solid; + margin: -5px 0 0 -5px; + cursor: pointer; + opacity: 0.85; + border-color: ${dt('colorpicker.handle.color')}; +} + +.p-colorpicker-hue { + width: 17px; + height: 150px; + top: 8px; + left: 167px; + position: absolute; + opacity: 0.85; + background: linear-gradient(0deg, + red 0, + #ff0 17%, + #0f0 33%, + #0ff 50%, + #00f 67%, + #f0f 83%, + red); +} + +.p-colorpicker-hue-handle { + position: absolute; + top: 150px; + left: 0px; + width: 21px; + margin-left: -2px; + margin-top: -5px; + height: 10px; + border-width: 2px; + border-style: solid; + opacity: 0.85; + cursor: pointer; + border-color: ${dt('colorpicker.handle.color')}; +} +`; + const classes = { root: 'p-colorpicker p-component', input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }], @@ -20,5 +129,6 @@ const classes = { export default BaseStyle.extend({ name: 'colorpicker', + theme, classes }); diff --git a/components/lib/confirmdialog/style/ConfirmDialogStyle.js b/components/lib/confirmdialog/style/ConfirmDialogStyle.js index 40903e96b..fef2454fb 100644 --- a/components/lib/confirmdialog/style/ConfirmDialogStyle.js +++ b/components/lib/confirmdialog/style/ConfirmDialogStyle.js @@ -1,5 +1,17 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-confirmdialog .p-dialog-content { + display: flex; + align-items: center; + gap: 1rem; +} + +.p-confirmdialog-icon { + font-size: 2rem; +} +`; + const classes = { root: 'p-confirmdialog', icon: 'p-confirmdialog-icon', @@ -10,5 +22,6 @@ const classes = { export default BaseStyle.extend({ name: 'confirmdialog', + theme, classes }); diff --git a/components/lib/confirmpopup/style/ConfirmPopupStyle.js b/components/lib/confirmpopup/style/ConfirmPopupStyle.js index 3afe0eb80..abc5cdb4f 100644 --- a/components/lib/confirmpopup/style/ConfirmPopupStyle.js +++ b/components/lib/confirmpopup/style/ConfirmPopupStyle.js @@ -1,5 +1,115 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-confirmpopup { + position: absolute; + margin-top: 10px; + top: 0; + left: 0; + background: ${dt('confirmpopup.background')}; + color: ${dt('confirmpopup.color')}; + border: 1px solid ${dt('confirmpopup.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-confirmpopup-content { + display: flex; + align-items: center; + padding: 1rem; +} + +.p-confirmpopup-icon { + font-size: 1.5rem; + width: 1.5rem; + height: 1.5rem; +} + +.p-confirmpopup-message { + margin-left: 1rem; +} + +.p-confirmpopup-footer { + display: flex; + justify-content: flex-end; + gap: 0.5rem; + padding: 0 1rem 1rem 1rem; +} + +.p-confirmpopup-footer button { + width: auto; +} + +.p-confirmpopup-footer button:last-child { + margin: 0; +} + +.p-confirmpopup-flipped { + margin-top: 0; + margin-bottom: 10px; +} + +.p-confirmpopup-enter-from { + opacity: 0; + transform: scaleY(0.8); +} + +.p-confirmpopup-leave-to { + opacity: 0; +} + +.p-confirmpopup-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); +} + +.p-confirmpopup-leave-active { + transition: opacity 0.1s linear; +} + +.p-confirmpopup:after, +.p-confirmpopup:before { + bottom: 100%; + left: ${dt('{overlay.arrow.left} + 1.25rem', 0)}; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.p-confirmpopup:after { + border-width: 8px; + margin-left: -8px; + border-style: solid; + border-color: transparent; + border-bottom-color: ${dt('confirmpopup.background')}; +} + +.p-confirmpopup:before { + border-width: 10px; + margin-left: -10px; + border-style: solid; + border-color: transparent; + border-bottom-color: ${dt('confirmpopup.border.color')}; +} + +.p-confirmpopup-flipped:after, +.p-confirmpopup-flipped:before { + bottom: auto; + top: 100%; +} + +.p-confirmpopup-flipped:after { + border-bottom-color: transparent; + border-top-color: ${dt('confirmpopup.background')}; +} + +.p-confirmpopup-flipped:before { + border-bottom-color: transparent; + border-top-color: ${dt('confirmpopup.border.color')}; +} +`; + const classes = { root: ({ instance }) => [ 'p-confirmpopup p-component', @@ -17,5 +127,6 @@ const classes = { export default BaseStyle.extend({ name: 'confirmpopup', + theme, classes }); diff --git a/components/lib/contextmenu/style/ContextMenuStyle.js b/components/lib/contextmenu/style/ContextMenuStyle.js index bf4c18402..f8b16e0bd 100644 --- a/components/lib/contextmenu/style/ContextMenuStyle.js +++ b/components/lib/contextmenu/style/ContextMenuStyle.js @@ -1,5 +1,128 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-contextmenu { + padding: 0.25rem 0.25rem; + background: ${dt('contextmenu.background')}; + color: ${dt('contextmenu.color')}; + border: 1px solid ${dt('contextmenu.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; +} + +.p-contextmenu-root-list, +.p-contextmenu-submenu { + margin: 0; + padding: 0; + list-style: none; + outline: 0 none; +} + +.p-contextmenu-submenu { + position: absolute; + min-width: 100%; + z-index: 1; + padding: 0.25rem 0.25rem; + background: ${dt('contextmenu.background')}; + color: ${dt('contextmenu.color')}; + border: 1px solid ${dt('contextmenu.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-contextmenu-item { + position: relative; + margin: 2px 0; +} + +.p-contextmenu-item:first-child { + margin-top: 0; +} +.p-contextmenu-item:last-child { + margin-bottom: 0; +} + +.p-contextmenu-item-content { + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; + color: ${dt('contextmenu.item.color')}; +} + +.p-contextmenu-item-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + color: inherit; + padding: 0.5rem 0.75rem; + user-select: none; +} + +.p-contextmenu-item-label { + line-height: 1; +} + +.p-contextmenu-item-icon { + color: ${dt('contextmenu.item.icon.color')}; + margin-right: 0.5rem; +} + +.p-contextmenu-submenu-icon { + color: ${dt('contextmenu.item.icon.color')}; + margin-left: auto; + font-size: 0.875rem; + width: 0.875rem; + height: 0.875rem; +} + +.p-contextmenu-item.p-focus > .p-contextmenu-item-content { + color: ${dt('contextmenu.item.focus.color')}; + background: ${dt('contextmenu.item.focus.background')}; +} + +.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon, +.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon { + color: ${dt('contextmenu.item.icon.focus.color')}; +} + +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover { + color: ${dt('contextmenu.item.focus.color')}; + background: ${dt('contextmenu.item.focus.background')}; +} + +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon, +.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon { + color: ${dt('contextmenu.item.icon.focus.color')}; +} + +.p-contextmenu-item-active > .p-contextmenu-item-content { + color: ${dt('contextmenu.item.focus.color')}; + background: ${dt('contextmenu.item.focus.background')}; +} + +.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon, +.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon { + color: ${dt('contextmenu.item.icon.focus.color')}; +} + +.p-contextmenu-separator { + border-top: 1px solid ${dt('contextmenu.separator.border.color')}; + margin: 2px 0; +} + +.p-contextmenu-enter-from, +.p-contextmenu-leave-active { + opacity: 0; +} + +.p-contextmenu-enter-active { + transition: opacity 250ms; +} +`; + const classes = { root: ({ instance }) => [ 'p-contextmenu p-component', @@ -27,5 +150,6 @@ const classes = { export default BaseStyle.extend({ name: 'contextmenu', + theme, classes }); diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js index 5d96fb267..055192387 100644 --- a/components/lib/datatable/style/DataTableStyle.js +++ b/components/lib/datatable/style/DataTableStyle.js @@ -1,5 +1,585 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-datatable { + position: relative; +} + +.p-datatable-table { + border-spacing: 0px; + width: 100%; +} + +.p-datatable-sortable-column { + cursor: pointer; + user-select: none; + outline-color: transparent; +} + +.p-datatable-column-title, +.p-datatable-sort-icon, +.p-datatable-sort-badge { + vertical-align: middle; +} + +.p-datatable-sort-icon { + color: ${dt('datatable.sort.icon.color')}; + margin-left: 0.5rem; + transition: color ${dt('transition.duration')}; +} + +.p-datatable-sort-badge { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + margin-left: 0.5rem; +} + +.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover { + background: ${dt('datatable.header.cell.hover.background')}; + color: ${dt('datatable.header.cell.hover.color')}; +} + +.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon { + color: ${dt('datatable.sort.icon.hover.color')}; +} + +.p-datatable-column-sorted { + background: ${dt('highlight.background')}; + color: ${dt('highlight.color')}; +} + +.p-datatable-sortable-column:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-datatable-column-sorted .p-datatable-sort-icon { + color: ${dt('highlight.color')}; +} + +.p-datatable-hoverable .p-datatable-selectable-row { + cursor: pointer; +} + +.p-datatable-scrollable > .p-datatable-table-container { + position: relative; +} + +.p-datatable-scrollable-table > .p-datatable-thead { + top: 0; + z-index: 1; +} + +.p-datatable-scrollable-table > .p-datatable-frozen-tbody { + position: sticky; + z-index: 1; +} + +.p-datatable-scrollable-table>.p-datatable-tfoot { + bottom: 0; + z-index: 1; +} + +.p-datatable-scrollable .p-datatable-frozen-column { + position: sticky; + background: inherit; +} + +.p-datatable-scrollable th.p-datatable-frozen-column { + z-index: 1; +} + +.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead, +.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead { + background: ${dt('datatable.header.cell.background')}; +} + +.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot, +.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { + background: ${dt('datatable.footer.cell.background')}; +} + +.p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; +} + +.p-datatable-flex-scrollable>.p-datatable-table-container { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; +} + +.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header { + position: sticky; + z-index: 1; +} + +/* Resizable */ +.p-datatable-resizable-table > .p-datatable-thead > tr > th, +.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, +.p-datatable-resizable-table > .p-datatable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; +} + +.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) { + background-clip: padding-box; + position: relative; +} + +.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer { + display: none; +} + +.p-datatable-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; +} + +.p-datatable-column-header-content { + display: flex; + align-items: center; +} + +.p-datatable-column-resize-indicator { + width: 1px; + position: absolute; + z-index: 10; + display: none; + background: ${dt('datatable.resizer.color')}; +} + +.p-datatable-row-reorder-indicator-up, +.p-datatable-row-reorder-indicator-down { + position: absolute; + display: none; +} + +.p-datatable-reorderable-column, +.p-datatable-reorderable-row-handle { + cursor: move; +} + +.p-datatable-mask { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; +} + +.p-datatable-inline-filter { + display: flex; + align-items: center; + width: 100%; + gap: 0.5rem; +} + +.p-datatable-inline-filter .p-datatable-filter-element-container { + flex: 1 1 auto; + width: 1%; +} + +.p-datatable-filter-overlay { + background: ${dt('datatable.filter.overlay.background')}; + color: ${dt('datatable.filter.overlay.color')}; + border: 1px solid ${dt('datatable.filter.overlay.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; +} + +.p-datatable-filter-constraint-list { + margin: 0; + list-style: none; + padding: 0.25rem 0.25rem; +} + +.p-datatable-filter-constraint { + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: ${dt('datatable.filter.matchmode.item.color')}; + background: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')},; + border-radius: ${dt('rounded.sm')}; + cursor: pointer; +} + +.p-datatable-filter-constraint:first-child { + margin-top: 0; +} + +.p-datatable-filter-constraint:last-child { + margin-bottom: 0; +} + +.p-datatable-filter-constraint-selected { + background: ${dt('datatable.filter.matchmode.item.selected.background')}; + color: ${dt('datatable.filter.matchmode.item.selected.color')}; +} + +.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover { + background: ${dt('datatable.filter.matchmode.item.focus.background')}; + color: ${dt('datatable.filter.matchmode.item.focus.color')}; +} + +.p-datatable-filter-constraint:focus-visible { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: 2px; + box-shadow: 0 none; +} + +.p-datatable-filter-constraint-separator { + border-top: 1px solid ${dt('datatable.filter.matchmode.item.separator.border.color')}; + margin: 2px 0; +} + +.p-datatable-popover-filter { + display: inline-flex; + margin-left: auto; +} + +.p-datatable-filter-operator { + padding: 0; +} + +.p-datatable-filter-rule-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.p-datatable-filter-rule { + padding: 0; + border-bottom: 1px solid ${dt('datatable.filter.constraint.border.color')}; +} + +.p-datatable-filter-rule:last-child { + border-bottom: 0 none; +} + +.p-datatable-filter-constraint-dropdown { + margin-bottom: 0.5rem; +} + +.p-datatable-filter-remove-rule-button { + margin-top: 0.5rem; +} + +.p-datatable-filter-constraint:last-child .p-datatable-filter-remove-button { + margin-bottom: 0; +} + +.p-datatable-filter-overlay-popover { + background: ${dt('datatable.filter.overlay.background')}; + color: ${dt('datatable.filter.overlay.color')}; + border: 1px solid ${dt('datatable.filter.overlay.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + min-width: 12.5rem; + padding: 0.75rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.p-datatable-filter-add-rule-button { + padding: 0; +} + +.p-datatable-filter-buttonbar { + padding: 0; + display: flex; + align-items: center; + justify-content: space-between; +} + +.p-datatable-virtualscroller-spacer { + display: flex; +} + +.p-datatable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; +} + +.p-datatable-paginator-top { + border: solid ${dt('datatable.header.border.color')}; + border-width: 0 0 1px 0; +} + +.p-datatable-header { + background: ${dt('datatable.header.background')}; + color: ${dt('datatable.header.color')}; + border: 1px solid ${dt('datatable.header.border.color')}; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; +} + +.p-datatable-footer { + background: ${dt('datatable.footer.background')}; + color: ${dt('datatable.footer.color')}; + border: 1px solid ${dt('datatable.footer.border.color')}; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; +} + +.p-datatable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + background: ${dt('datatable.header.cell.background')}; + border: 1px solid ${dt('datatable.header.cell.border.color')}; + border-width: 0 0 1px 0; + color: ${dt('datatable.header.cell.color')}; + font-weight: 600; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-datatable-tbody > tr { + outline-color: transparent; + background: ${dt('datatable.row.background')}; + color: ${dt('datatable.row.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-datatable-tbody > tr > td { + text-align: left; + border: 1px solid ${dt('datatable.body.cell.border.color')}; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; +} + +.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover { + background: ${dt('datatable.row.hover.background')}; + color: ${dt('datatable.row.hover.color')}; +} + +.p-datatable-tbody > tr.p-datatable-row-selected { + background: ${dt('highlight.background')}; + color: ${dt('highlight.color')}; +} + +.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td { + border-bottom-color: ${dt('datatable.body.cell.selected.border.color')}; +} + +.p-datatable-tbody > tr.p-datatable-row-selectedt > td { + border-bottom-color: ${dt('datatable.body.cell.selected.border.color')}; +} + +.p-datatable-tbody > tr:focus-visible { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-datatable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid ${dt('datatable.footer.cell.border.color')}; + border-width: 0 0 1px 0; + font-weight: 600; + color: ${dt('datatable.footer.cell.color')}; + background: ${dt('datatable.footer.cell.background')}; +} + +.p-datatable-tbody > tr.p-datatable-dragpoint-top > td { + box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')}; +} + +.p-datatable-tbody>tr.p-datatable-dragpoint-bottom > td { + box-shadow: inset 0 -2px 0 0 ${dt('datatable.drop.point.color')}; +} + +.p-datatable-loading-icon { + font-size: 2rem; + width: 2rem; + height: 2rem; +} + +.p-datatable-gridlines .p-datatable-header { + border-width: 1px; +} + +.p-datatable-gridlines .p-datatable-footer { + border-width: 0 1px 1px 1px; +} + +.p-datatable-gridlines .p-datatable-paginator-top { + border-width: 0 1px 0 1px; +} + +.p-datatable-gridlines .p-datatable-paginator-bottom { + border-width: 0 1px 1px 1px; + border-style: solid; + border-color: ${dt('datatable.footer.border.color')}; +} + +.p-datatable-gridlines .p-datatable-thead > tr > th { + border-width: 1px 0 1px 1px; +} + +.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { + border-width: 1px; +} + +.p-datatable-gridlines .p-datatable-tbody > tr > td { + border-width: 1px 0 0 1px; +} + +.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} + +p-datatable-gridlines .p-datatable-tbody > tr:last-child>td { + border-width: 1px 0 1px 1px; +} + +.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 1px; +} + +.p-datatable-gridlines .p-datatable-tfoot>tr>td { + border-width: 1px 0 1px 1px; +} + +.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} + +.p-datatable.p-datatable-gridlines .p-datatable-thead +.p-datatable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} + +.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} + +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { + border-width: 0 0 1px 1px; +} + +.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} + +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} + +.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; +} + +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { + background: ${dt('datatable.row.striped.background')}); +} + +.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { + background: ${dt('highlight.background')}); + color: ${dt('highlight.color')}); +} + +.p-datatable.p-datatable-sm .p-datatable-header { + padding: 0.375rem 0.5rem; +} + +.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { + padding: 0.375rem 0.5rem; +} + +.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { + padding: 0.375rem 0.5rem; +} + +.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { + padding: 0.375rem 0.5rem; +} + +.p-datatable.p-datatable-sm .p-datatable-footer { + padding: 0.375rem 0.5rem; +} + +.p-datatable.p-datatable-lg .p-datatable-header { + padding: 0.9375rem 1.25rem; +} + +.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { + padding: 0.9375rem 1.25rem; +} + +.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td { + padding: 0.9375rem 1.25rem; +} + +.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td { + padding: 0.9375rem 1.25rem; +} + +.p-datatable.p-datatable-lg .p-datatable-footer { + padding: 0.9375rem 1.25rem; +} + +.p-datatable-row-toggle-button { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + width: 1.75rem; + height: 1.75rem; + color: ${dt('datatable.row.action.color')}; + border: 0 none; + background: transparent; + cursor: pointer; + border-radius: 50%; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + user-select: none; +} + +.p-datatable-row-toggle-button:enabled:hover { + color: ${dt('datatable.row.action.hover.color')}; + background: ${dt('datatable.row.action.hover.background')}; +} + +.p-datatable-row-toggle-button:focus-visible { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: 2px; +} + +.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover{ + background: ${dt('datatable.row.action.highlight.hover.background')}; + color: inherit; +} +`; + const classes = { root: ({ props }) => [ 'p-datatable p-component', @@ -152,6 +732,7 @@ const inlineStyles = { export default BaseStyle.extend({ name: 'datatable', + theme, classes, inlineStyles }); diff --git a/components/lib/dataview/style/DataViewStyle.js b/components/lib/dataview/style/DataViewStyle.js index e5ef82136..fc0a57538 100644 --- a/components/lib/dataview/style/DataViewStyle.js +++ b/components/lib/dataview/style/DataViewStyle.js @@ -1,5 +1,38 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-dataview-header { + background: ${dt('dataview.header.background')}; + color: ${dt('dataview.header.color')}; + border: 1px solid ${dt('dataview.header.border.color')}; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; +} + +.p-dataview-content { + background: ${dt('dataview.content.background')}; + color: ${dt('dataview.content.color')}; +} + +.p-dataview-footer { + background: ${dt('dataview.footer.background')}; + color: ${dt('dataview.footer.color')}; + border: 1px solid ${dt('dataview.footer.border.color')}; + border-width: 1px 0 0 0; + padding: 0.75rem 1rem; +} + +.p-dataview-paginator-top { + border: solid ${dt('dataview.header.border.color')}; + border-width: 0 0 1px 0; +} + +.p-dataview-paginator-bottom { + border: solid ${dt('dataview.footer.border.color')}; + border-width: 1px 0 0 0; +} +`; + const classes = { root: ({ props }) => [ 'p-dataview p-component', @@ -17,5 +50,6 @@ const classes = { export default BaseStyle.extend({ name: 'dataview', + theme, classes }); diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js index 80906eb53..33a755142 100644 --- a/components/lib/datepicker/style/DatePickerStyle.js +++ b/components/lib/datepicker/style/DatePickerStyle.js @@ -1,5 +1,341 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-datepicker { + display: inline-flex; + max-width: 100%; +} + +.p-datepicker-input { + flex: 1 1 auto; + width: 1%; +} + +.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.p-datepicker-dropdown { + cursor: pointer; + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + width: ${dt('datepicker.dropdown.width')}; + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; + background: ${dt('datepicker.dropdown.background')}; + border: 1px solid ${dt('datepicker.dropdown.border.color')}; + border-left: 0 none; + background: ${dt('datepicker.dropdown.background')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-datepicker-dropdown:not(:disabled):hover { + background: ${dt('datepicker.dropdown.hover.background')}; + border-color: ${dt('datepicker.dropdown.hover.border.color')}; + background: ${dt('datepicker.dropdown.hover.background')}; +} + +.p-datepicker-dropdown:not(:disabled):active { + background: ${dt('datepicker.dropdown.active.background')}; + border-color: ${dt('datepicker.dropdown.active.border.color')}; + background: ${dt('datepicker.dropdown.active.background')}; +} + +.p-datepicker-dropdown:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-datepicker:has(.p-datepicker-input-icon) { + position: relative; +} + +.p-datepicker:has(.p-datepicker-input-icon) .p-datepicker-input { + padding-right: 2.5rem; +} + +.p-datepicker-input-icon { + cursor: pointer; + position: absolute; + top: 50%; + right: .75rem; + margin-top: -.5rem; +} + +.p-fluid .p-datepicker { + display: flex; +} + +.p-fluid .p-datepicker-input { + width: 1%; +} + +.p-datepicker .p-datepicker-panel { + min-width: 100%; +} + +.p-datepicker-panel { + width: auto; + padding: 0.75rem; + background: ${dt('datepicker.background')}; + color: ${dt('datepicker.color')}; + border: 1px solid ${dt('datepicker.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-datepicker-panel-inline { + display: inline-block; + overflow-x: auto; + box-shadow: none; +} + +.p-datepicker-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 0 0.5rem 0; + font-weight: 500; + background: ${dt('datepicker.header.background')}; + color: ${dt('datepicker.header.color')}; + border-bottom: 1px solid ${dt('datepicker.header.border.color')}; +} + +.p-datepicker-title { + margin: 0 auto; + line-height: 1.75rem; +} + +.p-datepicker-view-year, +.p-datepicker-view-month { + font-weight: 500; + padding: 0.25rem; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-datepicker-view-month { + margin-right: 0.5rem; + color: ${dt('datepicker.month.picker.color')}; +} + +.p-datepicker-view-year { + margin-right: 0.5rem; + color: ${dt('datepicker.year.picker.color')}; +} + +.p-datepicker-view-month:enabled:hover { + background: ${dt('datepicker.month.picker.hover.background')}; + color: ${dt('datepicker.month.picker.hover.color')}; +} + +.p-datepicker-view-year:enabled:hover { + background: ${dt('datepicker.year.picker.hover.background')}; + color: ${dt('datepicker.year.picker.hover.color')}; +} + +.p-datepicker-datepicker-container { + display: flex; +} + +.p-datepicker-datepicker-container .p-datepicker-datepicker { + flex: 1 1 auto; + border-left: 1px solid ${dt('datepicker.group.border.color')}; + padding-right: 0.75rem; + padding-left: 0.75rem; + padding-top: 0; + padding-bottom: 0; +} + +.p-datepicker-datepicker-container .p-datepicker-datepicker:first-child { + padding-left: 0; + border-left: 0 none; +} + +.p-datepicker-datepicker-container .p-datepicker-datepicker:last-child { + padding-right: 0; +} + +.p-datepicker-day-view { + width: 100%; + border-collapse: collapse; + font-size: 1rem; + margin: 0.5rem 0 0 0; +} + +.p-datepicker-weekday-cell { + padding: 0.25rem; +} + +.p-datepicker-weekday { + font-weight: 500; +} + +.p-datepicker-day-cell { + padding: 0.25rem; +} + +.p-datepicker-day { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 0 auto; + overflow: hidden; + position: relative; + width: 2rem; + height: 2rem; + border-radius: 50%; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border: 1px solid transparent; + outline-color: transparent; + color: ${dt('datepicker.date.color')}; +} + +.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover { + background: ${dt('datepicker.date.hover.background')}; + color: ${dt('datepicker.date.hover.color')}; +} + +.p-datepicker-day:focus-visible { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-datepicker-day-selected { + background: ${dt('datepicker.date.selected.background')}; + color: ${dt('datepicker.date.selected.color')}; +} + +.p-datepicker-today > .p-datepicker-day { + background: ${dt('datepicker.today.background')}; + color: ${dt('datepicker.today.color')}; +} + +.p-datepicker-today > .p-datepicker-day-selected { + background: ${dt('datepicker.date.selected.background')}; + color: ${dt('datepicker.date.selected.color')}; +} + +.p-datepicker-month-view { + margin: 0.5rem 0 0 0; +} + +.p-datepicker-month { + width: 33.3%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + padding: 0.25rem; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + color: ${dt('datepicker.month.color')}; +} + +.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover { + color: ${dt('datepicker.month.hover.color')}; + background: ${dt('datepicker.month.hover.background')}; +} + +.p-datepicker-month-selected { + color: ${dt('datepicker.month.selected.color')}; + background: ${dt('datepicker.month.selected.background')}; +} + +.p-datepicker-month:not(.p-disabled):focus-visible { + outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')}; + outline-offset: 0; +} + +.p-datepicker-year-view { + margin: 0.5rem 0 0 0; +} + +.p-datepicker-year { + width: 50%; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + position: relative; + padding: 0.25rem; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + color: ${dt('datepicker.year.color')}; +} + +.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover { + color: ${dt('datepicker.year.hover.color')}; + background: ${dt('datepicker.year.hover.background')}; +} + +.p-datepicker-year-selected { + color: ${dt('datepicker.year.selected.color')}; + background: ${dt('datepicker.year.selected.background')}; +} + +.p-datepicker-year:not(.p-disabled):focus-visible { + outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')}; + outline-offset: 0; +} + +.p-datepicker-buttonbar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 0 0 0; + border-top: 1px solid ${dt('datepicker.buttonbar.border.color')}; +} + +.p-datepicker-buttonbar .p-button { + width: auto; +} + +.p-datepicker-time-picker { + display: flex; + justify-content: center; + align-items: center; + border-top: 1px solid ${dt('datepicker.timepicker.border.color')}; + padding: 0; +} + +.p-datepicker-datepicker-group + .p-timepicker { + margin-top: 0.5rem; + padding-top: 0.5rem; +} + +.p-datepicker-time-picker > div { + display: flex; + align-items: center; + flex-direction: column; + padding: 0 0.5rem; +} + +.p-datepicker-time-picker button:last-child { + margin-top: 0.2em; +} + +.p-datepicker-time-picker span { + font-size: 1rem; +} + +.p-datepicker-timeonly .p-datepicker-time-picker { + border-top: 0 none; +} +`; + const inlineStyles = { root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined }) }; @@ -63,6 +399,7 @@ const classes = { export default BaseStyle.extend({ name: 'datepicker', + theme, classes, inlineStyles }); diff --git a/components/lib/divider/style/DividerStyle.js b/components/lib/divider/style/DividerStyle.js index 493bbd00f..7f5c170fd 100644 --- a/components/lib/divider/style/DividerStyle.js +++ b/components/lib/divider/style/DividerStyle.js @@ -1,5 +1,84 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-divider-horizontal { + display: flex; + width: 100%; + position: relative; + align-items: center; + margin: 1rem 0; + padding: 0 1rem; +} + +.p-divider-horizontal:before { + position: absolute; + display: block; + top: 50%; + left: 0; + width: 100%; + content: ""; + border-top: 1px solid ${dt('divider.border.color')}; +} + +.p-divider-horizontal .p-divider-content { + padding: 0 0.5rem; +} + +.p-divider-vertical { + min-height: 100%; + margin: 0 1rem; + display: flex; + position: relative; + justify-content: center; + margin: 0 1rem; + padding: 1rem 0; +} + +.p-divider-vertical:before { + position: absolute; + display: block; + top: 0; + left: 50%; + height: 100%; + content: ""; + border-left: 1px solid ${dt('divider.border.color')}; +} + +.p-divider.p-divider-vertical .p-divider-content { + padding: 0.5rem 0; +} + +.p-divider-content { + z-index: 1; + background: ${dt('divider.content.background')}; + color: ${dt('divider.content.color')}; +} + +.p-divider-solid.p-divider-horizontal:before { + border-top-style: solid; +} + +.p-divider-solid.p-divider-vertical:before { + border-left-style: solid; +} + +.p-divider-dashed.p-divider-horizontal:before { + border-top-style: dashed; +} + +.p-divider-dashed.p-divider-vertical:before { + border-left-style: dashed; +} + +.p-divider-dotted.p-divider-horizontal:before { + border-top-style: dotted; +} + +.p-divider-dotted.p-divider-vertical:before { + border-left-style: dotted; +} +`; + /* Position */ const inlineStyles = { root: ({ props }) => ({ @@ -25,6 +104,7 @@ const classes = { export default BaseStyle.extend({ name: 'divider', + theme, classes, inlineStyles }); diff --git a/components/lib/dock/style/DockStyle.js b/components/lib/dock/style/DockStyle.js index f84c5964a..64bd4b40e 100644 --- a/components/lib/dock/style/DockStyle.js +++ b/components/lib/dock/style/DockStyle.js @@ -1,5 +1,130 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-dock { + position: absolute; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; +} + +.p-dock-list-container { + display: flex; + pointer-events: auto; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.5rem 0.5rem; + border-radius: 0.5rem; +} + +.p-dock-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + outline: 0 none; +} + +.p-dock-item { + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + will-change: transform; + padding: 0.5rem; + border-radius: 6px; +} + +.p-dock-item.p-focus { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-dock-item-link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + cursor: default; + width: 3rem; + height: 3rem; +} + +.p-dock-top { + left: 0; + top: 0; + width: 100%; +} + +.p-dock-top .p-dock-item { + transform-origin: center top; +} + +.p-dock-bottom { + left: 0; + bottom: 0; + width: 100%; +} + +.p-dock-bottom .p-dock-item { + transform-origin: center bottom; +} + +.p-dock-right { + right: 0; + top: 0; + height: 100%; +} + +.p-dock-right .p-dock-item { + transform-origin: center right; +} + +.p-dock-right .p-dock-list { + flex-direction: column; +} + +.p-dock-left { + left: 0; + top: 0; + height: 100%; +} + +.p-dock-left .p-dock-item { + transform-origin: center left; +} + +.p-dock-left .p-dock-list { + flex-direction: column; +} + +.p-dock-mobile.p-dock-top .p-dock-list-container, +.p-dock-mobile.p-dock-bottom .p-dock-list-container { + overflow-x: auto; + width: 100%; +} +.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, +.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list { + margin: 0 auto; +} +.p-dock-mobile.p-dock-left .p-dock-list-container, +.p-dock-mobile.p-dock-right .p-dock-list-container { + overflow-y: auto; + height: 100%; +} +.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, +.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list { + margin: auto 0; +} +.p-dock-mobile .p-dock-list .p-dock-item { + transform: none; + margin: 0; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-dock p-component', @@ -24,5 +149,6 @@ const classes = { export default BaseStyle.extend({ name: 'dock', + theme, classes }); diff --git a/components/lib/drawer/style/DrawerStyle.js b/components/lib/drawer/style/DrawerStyle.js index c8c54202f..0e784e67d 100644 --- a/components/lib/drawer/style/DrawerStyle.js +++ b/components/lib/drawer/style/DrawerStyle.js @@ -1,5 +1,155 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-drawer { + display: flex; + flex-direction: column; + pointer-events: auto; + transform: translate3d(0px, 0px, 0px); + position: relative; + transition: transform 0.3s; + background: ${dt('drawer.background')}; + color: ${dt('drawer.color')}; + border: 1px solid ${dt('drawer.border.color')}; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); +} + +.p-drawer-content { + overflow-y: auto; + flex-grow: 1; + padding: 0 1.125rem 1.125rem 1.125rem; +} + +.p-drawer-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + padding: 1.125rem; +} + +.p-drawer-title { + font-weight: 600; + font-size: 1.25rem; +} + +.p-drawer-full .p-drawer { + transition: none; + transform: none; + width: 100vw !important; + height: 100vh !important; + max-height: 100%; + top: 0px !important; + left: 0px !important; + border-width: 1px; +} + +.p-drawer-left .p-drawer-enter-from, +.p-drawer-left .p-drawer-leave-to { + transform: translateX(-100%); +} + +.p-drawer-right .p-drawer-enter-from, +.p-drawer-right .p-drawer-leave-to { + transform: translateX(100%); +} + +.p-drawer-top .p-drawer-enter-from, +.p-drawer-top .p-drawer-leave-to { + transform: translateY(-100%); +} + +.p-drawer-bottom .p-drawer-enter-from, +.p-drawer-bottom .p-drawer-leave-to { + transform: translateY(100%); +} + +.p-drawer-full .p-drawer-enter-from, +.p-drawer-full .p-drawer-leave-to { + opacity: 0; +} + +.p-drawer-full .p-drawer-enter-active, +.p-drawer-full .p-drawer-leave-active { + transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); +} + +.p-drawer-left .p-drawer { + width: 20rem; + height: 100%; + border-right-width: 1px; +} + +.p-drawer-right .p-drawer { + width: 20rem; + height: 100%; + border-left-width: 1px; +} + +.p-drawer-top .p-drawer { + height: 10rem; + width: 100%; + border-bottom-width: 1px; +} + +.p-drawer-bottom .p-drawer { + height: 10rem; + width: 100%; + border-top-width: 1px; +} + +.p-drawer-left .p-drawer-sm, +.p-drawer-right .p-drawer-sm { + width: 20rem; +} + +.p-drawer-left .p-drawer-md, +.p-drawer-right .p-drawer-md { + width: 40rem; +} + +.p-drawer-left .p-drawer-lg, +.p-drawer-right .p-drawer-lg { + width: 60rem; +} + +.p-drawer-top .p-drawer-sm, +.p-drawer-bottom .p-drawer-sm { + height: 10rem; +} + +.p-drawer-top .p-drawer-md, +.p-drawer-bottom .p-drawer-md { + height: 20rem; +} + +.p-drawer-top .p-drawer-lg, +.p-drawer-bottom .p-drawer-lg { + height: 30rem; +} + +.p-drawer-left .p-drawer-content, +.p-drawer-right .p-drawer-content, +.p-drawer-top .p-drawer-content, +.p-drawer-bottom .p-drawer-content { + width: 100%; + height: 100%; +} + +@media screen and (max-width: 64em) { + .p-drawer-left .p-drawer-lg, + .p-drawer-left .p-drawer-md, + .p-drawer-right .p-drawer-lg, + .p-drawer-right .p-drawer-md { + width: 20rem; + } +} + +.p-drawer-open { + display: flex; +} +`; + const inlineStyles = { mask: ({ position }) => ({ position: 'fixed', @@ -43,6 +193,7 @@ const classes = { export default BaseStyle.extend({ name: 'drawer', + theme, classes, inlineStyles }); diff --git a/components/lib/editor/style/EditorStyle.js b/components/lib/editor/style/EditorStyle.js index c9da9e93a..10c58dfaf 100644 --- a/components/lib/editor/style/EditorStyle.js +++ b/components/lib/editor/style/EditorStyle.js @@ -1,5 +1,1076 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +/*! +* Quill Editor v1.3.3 +* https://quilljs.com/ +* Copyright (c) 2014, Jason Chen +* Copyright (c) 2013, salesforce.com +*/ +.ql-container { + box-sizing: border-box; + font-family: Helvetica, Arial, sans-serif; + font-size: 13px; + height: 100%; + margin: 0px; + position: relative; +} +.ql-container.ql-disabled .ql-tooltip { + visibility: hidden; +} +.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before { + pointer-events: none; +} +.ql-clipboard { + left: -100000px; + height: 1px; + overflow-y: hidden; + position: absolute; + top: 50%; +} +.ql-clipboard p { + margin: 0; + padding: 0; +} +.ql-editor { + box-sizing: border-box; + line-height: 1.42; + height: 100%; + outline: none; + overflow-y: auto; + padding: 12px 15px; + tab-size: 4; + -moz-tab-size: 4; + text-align: left; + white-space: pre-wrap; + word-wrap: break-word; +} +.ql-editor > * { + cursor: text; +} +.ql-editor p, +.ql-editor ol, +.ql-editor ul, +.ql-editor pre, +.ql-editor blockquote, +.ql-editor h1, +.ql-editor h2, +.ql-editor h3, +.ql-editor h4, +.ql-editor h5, +.ql-editor h6 { + margin: 0; + padding: 0; + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol, +.ql-editor ul { + padding-left: 1.5rem; +} +.ql-editor ol > li, +.ql-editor ul > li { + list-style-type: none; +} +.ql-editor ul > li::before { + content: '\\2022'; +} +.ql-editor ul[data-checked='true'], +.ql-editor ul[data-checked='false'] { + pointer-events: none; +} +.ql-editor ul[data-checked='true'] > li *, +.ql-editor ul[data-checked='false'] > li * { + pointer-events: all; +} +.ql-editor ul[data-checked='true'] > li::before, +.ql-editor ul[data-checked='false'] > li::before { + color: #777; + cursor: pointer; + pointer-events: all; +} +.ql-editor ul[data-checked='true'] > li::before { + content: '\\2611'; +} +.ql-editor ul[data-checked='false'] > li::before { + content: '\\2610'; +} +.ql-editor li::before { + display: inline-block; + white-space: nowrap; + width: 1.2rem; +} +.ql-editor li:not(.ql-direction-rtl)::before { + margin-left: -1.5rem; + margin-right: 0.3rem; + text-align: right; +} +.ql-editor li.ql-direction-rtl::before { + margin-left: 0.3rem; + margin-right: -1.5rem; +} +.ql-editor ol li:not(.ql-direction-rtl), +.ql-editor ul li:not(.ql-direction-rtl) { + padding-left: 1.5rem; +} +.ql-editor ol li.ql-direction-rtl, +.ql-editor ul li.ql-direction-rtl { + padding-right: 1.5rem; +} +.ql-editor ol li { + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + counter-increment: list-0; +} +.ql-editor ol li:before { + content: counter(list-0, decimal) '. '; +} +.ql-editor ol li.ql-indent-1 { + counter-increment: list-1; +} +.ql-editor ol li.ql-indent-1:before { + content: counter(list-1, lower-alpha) '. '; +} +.ql-editor ol li.ql-indent-1 { + counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-2 { + counter-increment: list-2; +} +.ql-editor ol li.ql-indent-2:before { + content: counter(list-2, lower-roman) '. '; +} +.ql-editor ol li.ql-indent-2 { + counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-3 { + counter-increment: list-3; +} +.ql-editor ol li.ql-indent-3:before { + content: counter(list-3, decimal) '. '; +} +.ql-editor ol li.ql-indent-3 { + counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-4 { + counter-increment: list-4; +} +.ql-editor ol li.ql-indent-4:before { + content: counter(list-4, lower-alpha) '. '; +} +.ql-editor ol li.ql-indent-4 { + counter-reset: list-5 list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-5 { + counter-increment: list-5; +} +.ql-editor ol li.ql-indent-5:before { + content: counter(list-5, lower-roman) '. '; +} +.ql-editor ol li.ql-indent-5 { + counter-reset: list-6 list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-6 { + counter-increment: list-6; +} +.ql-editor ol li.ql-indent-6:before { + content: counter(list-6, decimal) '. '; +} +.ql-editor ol li.ql-indent-6 { + counter-reset: list-7 list-8 list-9; +} +.ql-editor ol li.ql-indent-7 { + counter-increment: list-7; +} +.ql-editor ol li.ql-indent-7:before { + content: counter(list-7, lower-alpha) '. '; +} +.ql-editor ol li.ql-indent-7 { + counter-reset: list-8 list-9; +} +.ql-editor ol li.ql-indent-8 { + counter-increment: list-8; +} +.ql-editor ol li.ql-indent-8:before { + content: counter(list-8, lower-roman) '. '; +} +.ql-editor ol li.ql-indent-8 { + counter-reset: list-9; +} +.ql-editor ol li.ql-indent-9 { + counter-increment: list-9; +} +.ql-editor ol li.ql-indent-9:before { + content: counter(list-9, decimal) '. '; +} +.ql-editor .ql-indent-1:not(.ql-direction-rtl) { + padding-left: 3rem; +} +.ql-editor li.ql-indent-1:not(.ql-direction-rtl) { + padding-left: 4.5rem; +} +.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { + padding-right: 3rem; +} +.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { + padding-right: 4.5rem; +} +.ql-editor .ql-indent-2:not(.ql-direction-rtl) { + padding-left: 6rem; +} +.ql-editor li.ql-indent-2:not(.ql-direction-rtl) { + padding-left: 7.5rem; +} +.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { + padding-right: 6rem; +} +.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { + padding-right: 7.5rem; +} +.ql-editor .ql-indent-3:not(.ql-direction-rtl) { + padding-left: 9rem; +} +.ql-editor li.ql-indent-3:not(.ql-direction-rtl) { + padding-left: 10.5rem; +} +.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { + padding-right: 9rem; +} +.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { + padding-right: 10.5rem; +} +.ql-editor .ql-indent-4:not(.ql-direction-rtl) { + padding-left: 12rem; +} +.ql-editor li.ql-indent-4:not(.ql-direction-rtl) { + padding-left: 13.5rem; +} +.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { + padding-right: 12rem; +} +.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { + padding-right: 13.5rem; +} +.ql-editor .ql-indent-5:not(.ql-direction-rtl) { + padding-left: 15rem; +} +.ql-editor li.ql-indent-5:not(.ql-direction-rtl) { + padding-left: 16.5rem; +} +.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { + padding-right: 15rem; +} +.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { + padding-right: 16.5rem; +} +.ql-editor .ql-indent-6:not(.ql-direction-rtl) { + padding-left: 18rem; +} +.ql-editor li.ql-indent-6:not(.ql-direction-rtl) { + padding-left: 19.5rem; +} +.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { + padding-right: 18rem; +} +.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { + padding-right: 19.5rem; +} +.ql-editor .ql-indent-7:not(.ql-direction-rtl) { + padding-left: 21rem; +} +.ql-editor li.ql-indent-7:not(.ql-direction-rtl) { + padding-left: 22.5rem; +} +.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { + padding-right: 21rem; +} +.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { + padding-right: 22.5rem; +} +.ql-editor .ql-indent-8:not(.ql-direction-rtl) { + padding-left: 24rem; +} +.ql-editor li.ql-indent-8:not(.ql-direction-rtl) { + padding-left: 25.5rem; +} +.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { + padding-right: 24rem; +} +.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { + padding-right: 25.5rem; +} +.ql-editor .ql-indent-9:not(.ql-direction-rtl) { + padding-left: 27rem; +} +.ql-editor li.ql-indent-9:not(.ql-direction-rtl) { + padding-left: 28.5rem; +} +.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { + padding-right: 27rem; +} +.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { + padding-right: 28.5rem; +} +.ql-editor .ql-video { + display: block; + max-width: 100%; +} +.ql-editor .ql-video.ql-align-center { + margin: 0 auto; +} +.ql-editor .ql-video.ql-align-right { + margin: 0 0 0 auto; +} +.ql-editor .ql-bg-black { + background-color: #000; +} +.ql-editor .ql-bg-red { + background-color: #e60000; +} +.ql-editor .ql-bg-orange { + background-color: #f90; +} +.ql-editor .ql-bg-yellow { + background-color: #ff0; +} +.ql-editor .ql-bg-green { + background-color: #008a00; +} +.ql-editor .ql-bg-blue { + background-color: #06c; +} +.ql-editor .ql-bg-purple { + background-color: #93f; +} +.ql-editor .ql-color-white { + color: #fff; +} +.ql-editor .ql-color-red { + color: #e60000; +} +.ql-editor .ql-color-orange { + color: #f90; +} +.ql-editor .ql-color-yellow { + color: #ff0; +} +.ql-editor .ql-color-green { + color: #008a00; +} +.ql-editor .ql-color-blue { + color: #06c; +} +.ql-editor .ql-color-purple { + color: #93f; +} +.ql-editor .ql-font-serif { + font-family: Georgia, Times New Roman, serif; +} +.ql-editor .ql-font-monospace { + font-family: Monaco, Courier New, monospace; +} +.ql-editor .ql-size-small { + font-size: 0.75rem; +} +.ql-editor .ql-size-large { + font-size: 1.5rem; +} +.ql-editor .ql-size-huge { + font-size: 2.5rem; +} +.ql-editor .ql-direction-rtl { + direction: rtl; + text-align: inherit; +} +.ql-editor .ql-align-center { + text-align: center; +} +.ql-editor .ql-align-justify { + text-align: justify; +} +.ql-editor .ql-align-right { + text-align: right; +} +.ql-editor.ql-blank::before { + color: rgba(0, 0, 0, 0.6); + content: attr(data-placeholder); + font-style: italic; + left: 15px; + pointer-events: none; + position: absolute; + right: 15px; +} +.ql-snow.ql-toolbar:after, +.ql-snow .ql-toolbar:after { + clear: both; + content: ''; + display: table; +} +.ql-snow.ql-toolbar button, +.ql-snow .ql-toolbar button { + background: none; + border: none; + cursor: pointer; + display: inline-block; + float: left; + height: 24px; + padding: 3px 5px; + width: 28px; +} +.ql-snow.ql-toolbar button svg, +.ql-snow .ql-toolbar button svg { + float: left; + height: 100%; +} +.ql-snow.ql-toolbar button:active:hover, +.ql-snow .ql-toolbar button:active:hover { + outline: none; +} +.ql-snow.ql-toolbar input.ql-image[type='file'], +.ql-snow .ql-toolbar input.ql-image[type='file'] { + display: none; +} +.ql-snow.ql-toolbar button:hover, +.ql-snow .ql-toolbar button:hover, +.ql-snow.ql-toolbar button:focus, +.ql-snow .ql-toolbar button:focus, +.ql-snow.ql-toolbar button.ql-active, +.ql-snow .ql-toolbar button.ql-active, +.ql-snow.ql-toolbar .ql-picker-label:hover, +.ql-snow .ql-toolbar .ql-picker-label:hover, +.ql-snow.ql-toolbar .ql-picker-label.ql-active, +.ql-snow .ql-toolbar .ql-picker-label.ql-active, +.ql-snow.ql-toolbar .ql-picker-item:hover, +.ql-snow .ql-toolbar .ql-picker-item:hover, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected { + color: #06c; +} +.ql-snow.ql-toolbar button:hover .ql-fill, +.ql-snow .ql-toolbar button:hover .ql-fill, +.ql-snow.ql-toolbar button:focus .ql-fill, +.ql-snow .ql-toolbar button:focus .ql-fill, +.ql-snow.ql-toolbar button.ql-active .ql-fill, +.ql-snow .ql-toolbar button.ql-active .ql-fill, +.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, +.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, +.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, +.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, +.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, +.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, +.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, +.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, +.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, +.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { + fill: #06c; +} +.ql-snow.ql-toolbar button:hover .ql-stroke, +.ql-snow .ql-toolbar button:hover .ql-stroke, +.ql-snow.ql-toolbar button:focus .ql-stroke, +.ql-snow .ql-toolbar button:focus .ql-stroke, +.ql-snow.ql-toolbar button.ql-active .ql-stroke, +.ql-snow .ql-toolbar button.ql-active .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, +.ql-snow.ql-toolbar button:hover .ql-stroke-miter, +.ql-snow .ql-toolbar button:hover .ql-stroke-miter, +.ql-snow.ql-toolbar button:focus .ql-stroke-miter, +.ql-snow .ql-toolbar button:focus .ql-stroke-miter, +.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, +.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, +.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, +.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { + stroke: #06c; +} +@media (pointer: coarse) { + .ql-snow.ql-toolbar button:hover:not(.ql-active), + .ql-snow .ql-toolbar button:hover:not(.ql-active) { + color: #444; + } + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { + fill: #444; + } + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, + .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, + .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { + stroke: #444; + } +} +.ql-snow { + box-sizing: border-box; +} +.ql-snow * { + box-sizing: border-box; +} +.ql-snow .ql-hidden { + display: none; +} +.ql-snow .ql-out-bottom, +.ql-snow .ql-out-top { + visibility: hidden; +} +.ql-snow .ql-tooltip { + position: absolute; + transform: translateY(10px); +} +.ql-snow .ql-tooltip a { + cursor: pointer; + text-decoration: none; +} +.ql-snow .ql-tooltip.ql-flip { + transform: translateY(-10px); +} +.ql-snow .ql-formats { + display: inline-block; + vertical-align: middle; +} +.ql-snow .ql-formats:after { + clear: both; + content: ''; + display: table; +} +.ql-snow .ql-stroke { + fill: none; + stroke: #444; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 2; +} +.ql-snow .ql-stroke-miter { + fill: none; + stroke: #444; + stroke-miterlimit: 10; + stroke-width: 2; +} +.ql-snow .ql-fill, +.ql-snow .ql-stroke.ql-fill { + fill: #444; +} +.ql-snow .ql-empty { + fill: none; +} +.ql-snow .ql-even { + fill-rule: evenodd; +} +.ql-snow .ql-thin, +.ql-snow .ql-stroke.ql-thin { + stroke-width: 1; +} +.ql-snow .ql-transparent { + opacity: 0.4; +} +.ql-snow .ql-direction svg:last-child { + display: none; +} +.ql-snow .ql-direction.ql-active svg:last-child { + display: inline; +} +.ql-snow .ql-direction.ql-active svg:first-child { + display: none; +} +.ql-snow .ql-editor h1 { + font-size: 2rem; +} +.ql-snow .ql-editor h2 { + font-size: 1.5rem; +} +.ql-snow .ql-editor h3 { + font-size: 1.17rem; +} +.ql-snow .ql-editor h4 { + font-size: 1rem; +} +.ql-snow .ql-editor h5 { + font-size: 0.83rem; +} +.ql-snow .ql-editor h6 { + font-size: 0.67rem; +} +.ql-snow .ql-editor a { + text-decoration: underline; +} +.ql-snow .ql-editor blockquote { + border-left: 4px solid #ccc; + margin-bottom: 5px; + margin-top: 5px; + padding-left: 16px; +} +.ql-snow .ql-editor code, +.ql-snow .ql-editor pre { + background-color: #f0f0f0; + border-radius: 3px; +} +.ql-snow .ql-editor pre { + white-space: pre-wrap; + margin-bottom: 5px; + margin-top: 5px; + padding: 5px 10px; +} +.ql-snow .ql-editor code { + font-size: 85%; + padding: 2px 4px; +} +.ql-snow .ql-editor pre.ql-syntax { + background-color: #23241f; + color: #f8f8f2; + overflow: visible; +} +.ql-snow .ql-editor img { + max-width: 100%; +} +.ql-snow .ql-picker { + color: #444; + display: inline-block; + float: left; + font-size: 14px; + font-weight: 500; + height: 24px; + position: relative; + vertical-align: middle; +} +.ql-snow .ql-picker-label { + cursor: pointer; + display: inline-block; + height: 100%; + padding-left: 8px; + padding-right: 2px; + position: relative; + width: 100%; +} +.ql-snow .ql-picker-label::before { + display: inline-block; + line-height: 22px; +} +.ql-snow .ql-picker-options { + background-color: #fff; + display: none; + min-width: 100%; + padding: 4px 8px; + position: absolute; + white-space: nowrap; +} +.ql-snow .ql-picker-options .ql-picker-item { + cursor: pointer; + display: block; + padding-bottom: 5px; + padding-top: 5px; +} +.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: #ccc; + z-index: 2; +} +.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: #ccc; +} +.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: #ccc; +} +.ql-snow .ql-picker.ql-expanded .ql-picker-options { + display: block; + margin-top: -1px; + top: 100%; + z-index: 1; +} +.ql-snow .ql-color-picker, +.ql-snow .ql-icon-picker { + width: 28px; +} +.ql-snow .ql-color-picker .ql-picker-label, +.ql-snow .ql-icon-picker .ql-picker-label { + padding: 2px 4px; +} +.ql-snow .ql-color-picker .ql-picker-label svg, +.ql-snow .ql-icon-picker .ql-picker-label svg { + right: 4px; +} +.ql-snow .ql-icon-picker .ql-picker-options { + padding: 4px 0px; +} +.ql-snow .ql-icon-picker .ql-picker-item { + height: 24px; + width: 24px; + padding: 2px 4px; +} +.ql-snow .ql-color-picker .ql-picker-options { + padding: 3px 5px; + width: 152px; +} +.ql-snow .ql-color-picker .ql-picker-item { + border: 1px solid transparent; + float: left; + height: 16px; + margin: 2px; + padding: 0px; + width: 16px; +} +.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { + position: absolute; + margin-top: -9px; + right: 0; + top: 50%; + width: 18px; +} +.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before { + content: attr(data-label); +} +.ql-snow .ql-picker.ql-header { + width: 98px; +} +.ql-snow .ql-picker.ql-header .ql-picker-label::before, +.ql-snow .ql-picker.ql-header .ql-picker-item::before { + content: 'Normal'; +} +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { + content: 'Heading 1'; +} +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { + content: 'Heading 2'; +} +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { + content: 'Heading 3'; +} +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { + content: 'Heading 4'; +} +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { + content: 'Heading 5'; +} +.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before, +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { + content: 'Heading 6'; +} +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { + font-size: 2rem; +} +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { + font-size: 1.5rem; +} +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { + font-size: 1.17rem; +} +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { + font-size: 1rem; +} +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { + font-size: 0.83rem; +} +.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { + font-size: 0.67rem; +} +.ql-snow .ql-picker.ql-font { + width: 108px; +} +.ql-snow .ql-picker.ql-font .ql-picker-label::before, +.ql-snow .ql-picker.ql-font .ql-picker-item::before { + content: 'Sans Serif'; +} +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { + content: 'Serif'; +} +.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before, +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { + content: 'Monospace'; +} +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { + font-family: Georgia, Times New Roman, serif; +} +.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { + font-family: Monaco, Courier New, monospace; +} +.ql-snow .ql-picker.ql-size { + width: 98px; +} +.ql-snow .ql-picker.ql-size .ql-picker-label::before, +.ql-snow .ql-picker.ql-size .ql-picker-item::before { + content: 'Normal'; +} +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { + content: 'Small'; +} +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { + content: 'Large'; +} +.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before, +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { + content: 'Huge'; +} +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { + font-size: 10px; +} +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { + font-size: 18px; +} +.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { + font-size: 32px; +} +.ql-snow .ql-color-picker.ql-background .ql-picker-item { + background-color: #fff; +} +.ql-snow .ql-color-picker.ql-color .ql-picker-item { + background-color: #000; +} +.ql-toolbar.ql-snow { + border: 1px solid #ccc; + box-sizing: border-box; + font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + padding: 8px; +} +.ql-toolbar.ql-snow .ql-formats { + margin-right: 15px; +} +.ql-toolbar.ql-snow .ql-picker-label { + border: 1px solid transparent; +} +.ql-toolbar.ql-snow .ql-picker-options { + border: 1px solid transparent; + box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px; +} +.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + border-color: #ccc; +} +.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + border-color: #ccc; +} +.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, +.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { + border-color: #000; +} +.ql-toolbar.ql-snow + .ql-container.ql-snow { + border-top: 0px; +} +.ql-snow .ql-tooltip { + background-color: #fff; + border: 1px solid #ccc; + box-shadow: 0px 0px 5px #ddd; + color: #444; + padding: 5px 12px; + white-space: nowrap; +} +.ql-snow .ql-tooltip::before { + content: 'Visit URL:'; + line-height: 26px; + margin-right: 8px; +} +.ql-snow .ql-tooltip input[type='text'] { + display: none; + border: 1px solid #ccc; + font-size: 13px; + height: 26px; + margin: 0px; + padding: 3px 5px; + width: 170px; +} +.ql-snow .ql-tooltip a.ql-preview { + display: inline-block; + max-width: 200px; + overflow-x: hidden; + text-overflow: ellipsis; + vertical-align: top; +} +.ql-snow .ql-tooltip a.ql-action::after { + border-right: 1px solid #ccc; + content: 'Edit'; + margin-left: 16px; + padding-right: 8px; +} +.ql-snow .ql-tooltip a.ql-remove::before { + content: 'Remove'; + margin-left: 8px; +} +.ql-snow .ql-tooltip a { + line-height: 26px; +} +.ql-snow .ql-tooltip.ql-editing a.ql-preview, +.ql-snow .ql-tooltip.ql-editing a.ql-remove { + display: none; +} +.ql-snow .ql-tooltip.ql-editing input[type='text'] { + display: inline-block; +} +.ql-snow .ql-tooltip.ql-editing a.ql-action::after { + border-right: 0px; + content: 'Save'; + padding-right: 0px; +} +.ql-snow .ql-tooltip[data-mode='link']::before { + content: 'Enter link:'; +} +.ql-snow .ql-tooltip[data-mode='formula']::before { + content: 'Enter formula:'; +} +.ql-snow .ql-tooltip[data-mode='video']::before { + content: 'Enter video:'; +} +.ql-snow a { + color: #06c; +} +.ql-container.ql-snow { + border: 1px solid #ccc; +} + +.p-editor .p-editor-toolbar { + background: ${dt('editor.toolbar.background')}; + border-top-right-radius: ${dt('rounded.base')}; + border-top-left-radius: ${dt('rounded.base')}; +} + +.p-editor .p-editor-toolbar.ql-snow { + border: 1px solid ${dt('editor.toolbar.border.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-stroke { + stroke: ${dt('editor.toolbar.item.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-fill { + fill: ${dt('editor.toolbar.item.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { + border: 0 none; + color: ${dt('editor.toolbar.item.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { + color: ${dt('editor.toolbar.item.hover.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { + stroke: ${dt('editor.toolbar.item.hover.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { + fill: ${dt('editor.toolbar.item.hover.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { + color: ${dt('editor.toolbar.item.active.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { + stroke: ${dt('editor.toolbar.item.active.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { + fill: ${dt('editor.toolbar.item.active.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { + background: ${dt('editor.overlay.background')}; + border: 1px solid ${dt('editor.overlay.border.color')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: ${dt('rounded.base')}; + padding: 0.25rem 0.25rem; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { + color: ${dt('editor.overlay.item.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { + background: ${dt('editor.overlay.item.hover.background')}; + color: ${dt('editor.overlay.item.hover.color')}; +} + +.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { + padding: 0.5rem 0.75rem; +} + +.p-editor .p-editor-content { + border-bottom-right-radius: ${dt('rounded.base')}; + border-bottom-left-radius: ${dt('rounded.base')}; +} + +.p-editor .p-editor-content.ql-snow { + border: 1px solid ${dt('editor.content.border.color')}; +} + +.p-editor .p-editor-content .ql-editor { + background: ${dt('editor.content.background')}; + color: ${dt('editor.content.color')}; + border-bottom-right-radius: ${dt('rounded.base')}; + border-bottom-left-radius: ${dt('rounded.base')}; +} + +.p-editor .ql-snow.ql-toolbar button:hover, +.p-editor .ql-snow.ql-toolbar button:focus { + color: ${dt('editor.toolbar.item.hover.color')}; +} + +.p-editor .ql-snow.ql-toolbar button:hover .ql-stroke, +.p-editor .ql-snow.ql-toolbar button:focus .ql-stroke { + stroke: ${dt('editor.toolbar.item.hover.color')}; +} + +.p-editor .ql-snow.ql-toolbar button:hover .ql-fill, +.p-editor .ql-snow.ql-toolbar button:focus .ql-fill { + fill: ${dt('editor.toolbar.item.hover.color')}; +} + +.p-editor .ql-snow.ql-toolbar button.ql-active, +.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active, +.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected { + color: ${dt('editor.toolbar.item.active.color')}; +} + +.p-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke, +.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, +.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { + stroke: ${dt('editor.toolbar.item.active.color')}; +} + +.p-editor .ql-snow.ql-toolbar button.ql-active .ql-fill, +.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, +.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { + fill: ${dt('editor.toolbar.item.active.color')}; +} + +.p-editor .ql-snow.ql-toolbar button.ql-active .ql-picker-label, +.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, +.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { + color: ${dt('editor.toolbar.item.active.color')}; +} +`; + const classes = { root: 'p-editor', toolbar: 'p-editor-toolbar', @@ -8,5 +1079,6 @@ const classes = { export default BaseStyle.extend({ name: 'editor', + theme, classes }); diff --git a/components/lib/fieldset/style/FieldsetStyle.js b/components/lib/fieldset/style/FieldsetStyle.js index 52ddb84a5..7700e299c 100644 --- a/components/lib/fieldset/style/FieldsetStyle.js +++ b/components/lib/fieldset/style/FieldsetStyle.js @@ -1,5 +1,68 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-fieldset { + background: ${dt('fieldset.background')}; + border: 1px solid ${dt('fieldset.border.color')}; + border-radius: ${dt('rounded.base')}; + color: ${dt('fieldset.color')}; + padding: 0 1.125rem 1.125rem 1.125rem; + margin: 0; +} + +.p-fieldset-legend { + font-weight: 600; + border-radius: 6px; + border: 0 none; + padding: 0.5rem 0.75rem; + margin-bottom: 0.375rem; +} + +.p-fieldset-toggleable > .p-fieldset-legend { + padding: 0; +} + +.p-fieldset-toggleable > .p-fieldset-legend > a { + cursor: pointer; + user-select: none; + overflow: hidden; + position: relative; + text-decoration: none; + display: flex; + gap: 0.5rem; + align-items: center; + justify-content: center; + padding: 0.5rem 0.75rem; + color: ${dt('fieldset.legend.color')}; + border-radius: ${dt('rounded.base')}; + transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-fieldset-toggleable > .p-fieldset-legend > a:hover { + color: ${dt('fieldset.legend.hover.color')}; + background: ${dt('fieldset.legend.hover.background')}; +} + +.p-fieldset-toggle-icon { + color: ${dt('fieldset.toggle.icon.color')}; + transition: color ${dt('transition.duration')}; +} + +.p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggle-icon { + color: ${dt('fieldset.toggle.icon.hover.color')}; +} + +.p-fieldset .p-fieldset-content { + padding: 0; +} +`; + const classes = { root: ({ props }) => [ 'p-fieldset p-component', @@ -16,5 +79,6 @@ const classes = { export default BaseStyle.extend({ name: 'fieldset', + theme, classes }); diff --git a/components/lib/fileupload/style/FileUploadStyle.js b/components/lib/fileupload/style/FileUploadStyle.js index 83421948c..f02512035 100644 --- a/components/lib/fileupload/style/FileUploadStyle.js +++ b/components/lib/fileupload/style/FileUploadStyle.js @@ -1,5 +1,83 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-fileupload input[type="file"] { + display: none; +} + +.p-fileupload-advanced { + border: 1px solid ${dt('fileupload.border.color')}; + border-radius: ${dt('rounded.base')}; + background: ${dt('fileupload.background')}; + color: ${dt('fileupload.color')}; +} + +.p-fileupload-header { + display: flex; + align-items: center; + flex-wrap: wrap; + padding: 1.125rem; + gap: 0.5rem; +} + +.p-fileupload-content { + border: 1px solid transparent; + position: relative; + padding: 0 1.125rem 1.125rem 1.125rem; +} + +.p-fileupload-content .p-progressbar { + width: 100%; + position: absolute; + top: 0; + left: 0; + height: 0.25rem; +} + +.p-fileupload-file-list { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-top: 1.125rem; +} + +.p-fileupload-file { + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 1rem; + border-bottom: 1px solid ${dt('fileupload.file.border.color')}; + gap: 0.5rem; +} + +.p-fileupload-file:last-child { + border-bottom: 0; +} + +.p-fileupload-file-info { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.p-fileupload-file-thumbnail { + flex-shrink: 0; +} + +.p-fileupload-file-actions { + margin-left: auto; +} + +.p-fileupload-highlight { + border: 1px dashed ${dt('fileupload.content.highlight.border.color')}; + background: ${dt('fileupload.content.highlight.background')}; +} + +.p-fileupload-advanced .p-message { + margin-top: 0; +} +`; + const classes = { root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`], header: 'p-fileupload-header', @@ -20,5 +98,6 @@ const classes = { export default BaseStyle.extend({ name: 'fileupload', + theme, classes }); diff --git a/components/lib/floatlabel/style/FloatLabelStyle.js b/components/lib/floatlabel/style/FloatLabelStyle.js index 0e060f671..1a61d316c 100644 --- a/components/lib/floatlabel/style/FloatLabelStyle.js +++ b/components/lib/floatlabel/style/FloatLabelStyle.js @@ -1,10 +1,67 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-float-label { + display: block; + position: relative; +} + +.p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + left: 0.75rem; + color: ${dt('floatlabel.color')}; + transition-duration: ${dt('transition.duration')}; +} + +.p-float-label:has(textarea) label { + top: 1rem; +} + +.p-float-label:has(input:focus) label, +.p-float-label:has(input.p-filled) label, +.p-float-label:has(input:-webkit-autofill) label, +.p-float-label:has(textarea:focus) label, +.p-float-label:has(textarea.p-filled) label, +.p-float-label:has(.p-inputwrapper-focus) label, +.p-float-label:has(.p-inputwrapper-filled) label { + top: -.75rem; + font-size: 12px; + color: ${dt('floatlabel.focus.color')}; +} + +.p-float-label .p-placeholder, +.p-float-label input::placeholder, +.p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; +} + +.p-float-label .p-focus .p-placeholder, +.p-float-label input:focus::placeholder, +.p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; +} + +.p-float-label > .p-invalid + label { + color: ${dt('floatlabel.invalid.color')}; +} +`; + const classes = { root: 'p-float-label' }; export default BaseStyle.extend({ name: 'floatlabel', + theme, classes }); diff --git a/components/lib/galleria/style/GalleriaStyle.js b/components/lib/galleria/style/GalleriaStyle.js index b7a05a407..106926183 100644 --- a/components/lib/galleria/style/GalleriaStyle.js +++ b/components/lib/galleria/style/GalleriaStyle.js @@ -1,5 +1,410 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-galleria-content { + display: flex; + flex-direction: column; +} + +.p-galleria-items-container { + display: flex; + flex-direction: column; + position: relative; +} + +.p-galleria-items { + position: relative; + display: flex; + height: 100%; +} + +.p-galleria-navigate-button { + position: absolute; + top: 50%; + margin-top: -0.5rem; + display: inline-flex; + justify-content: center; + align-items: center; + overflow: hidden; + background: transparent; + color: ${dt('galleria.navigator.color')}; + width: 3rem; + height: 3rem; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: 50%; + margin: 0 0.5rem; + padding: 0; + user-select: none; + border: none; + cursor: pointer; +} + +.p-galleria-navigate-button:not(.p-disabled):hover { + background: ${dt('galleria.navigator.hover.background')}; +} + +.p-galleria-next-icon, +.p-galleria-prev-icon { + font-size: 1.5rem; + width: 1.5rem; + height: 1.5rem; +} + +.p-galleria-prev-button { + left: 0; +} + +.p-galleria-next-button { + right: 0; +} + +.p-galleria-item { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; +} + +.p-galleria-hover-navigators .p-galleria-navigate-button { + pointer-events: none; + opacity: 0; + transition: opacity ${dt('transition.duration')} ease-in-out; +} + +.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button { + pointer-events: all; + opacity: 1; +} + +.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button.p-disabled { + pointer-events: none; +} + +.p-galleria-caption { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background: ${dt('galleria.caption.background')}; + color: ${dt('galleria.caption.color')}; + padding: 1rem; +} + +.p-galleria-thumbnails { + display: flex; + flex-direction: column; + overflow: auto; + flex-shrink: 0; +} + +.p-galleria-thumbnail-prev-button, +.p-galleria-thumbnail-next-button { + align-self: center; + flex: 0 0 auto; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + position: relative; + margin: 0.5rem; + padding: 0; + border: none; + user-select: none; + cursor: pointer; + background: transparent; + color: ${dt('galleria.thumbnail.navigator.color')}; + width: 2rem; + height: 2rem; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + border-radius: 50%; +} + +.p-galleria-thumbnail-prev-button:hover, +.p-galleria-thumbnail-next-button:hover { + background: ${dt('galleria.thumbnail.navigator.hover.background')}; + color: ${dt('galleria.thumbnail.navigator.hover.color')}; +} + +.p-galleria-thumbnail-prev-button:focus-visible, +.p-galleria-thumbnail-next-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-galleria-thumbnail-prev-button span, +.p-galleria-thumbnail-next-button span { + display: flex; + justify-content: center; + align-items: center; +} + +.p-galleria-thumbnails-content { + display: flex; + flex-direction: row; + background: ${dt('galleria.thumbnail.container.background')}; + padding: 1rem 0.25rem; +} + +.p-galleria-thumbnails-viewport { + overflow: hidden; + width: 100%; +} + +.p-galleria-thumbnail-items { + display: flex; +} + +.p-galleria-thumbnail-item { + overflow: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + opacity: 0.5; +} + +.p-galleria-thumbnail { + outline-color: transparent; +} + +.p-galleria-thumbnail:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-galleria-thumbnail-item:hover { + opacity: 1; + transition: opacity 0.3s; +} + +.p-galleria-thumbnail-item-current { + opacity: 1; +} + +.p-galleria-thumbnails-left .p-galleria-content, +.p-galleria-thumbnails-right .p-galleria-content { + flex-direction: row; +} + +.p-galleria-thumbnails-left .p-galleria-items-container, +.p-galleria-thumbnails-right .p-galleria-items-container { + flex-direction: row; +} + +.p-galleria-thumbnails-left .p-galleria-items-container, +.p-galleria-thumbnails-top .p-galleria-items-container { + order: 2; +} + +.p-galleria-thumbnails-left .p-galleria-thumbnails, +.p-galleria-thumbnails-top .p-galleria-thumbnails { + order: 1; +} + +.p-galleria-thumbnails-left .p-galleria-thumbnails-content, +.p-galleria-thumbnails-right .p-galleria-thumbnails-content { + flex-direction: column; + flex-grow: 1; +} + +.p-galleria-thumbnails-left .p-galleria-thumbnail-items, +.p-galleria-thumbnails-right .p-galleria-thumbnail-items { + flex-direction: column; + height: 100%; +} + +.p-galleria-indicator-list { + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + gap: 0.5rem; + margin: 0; + list-style: none; +} + +.p-galleria-indicator-button { + display: inline-flex; + align-items: center; + background: ${dt('galleria.indicator.background')}; + width: 1rem; + height: 1rem; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + border-radius: 50%; + margin: 0; + padding: 0; + border: none; + user-select: none; + cursor: pointer; +} + +.p-galleria-indicator-button:hover { + background: ${dt('galleria.indicator.hover.background')}; +} + +.p-galleria-indicator-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-galleria-indicator-active .p-galleria-indicator-button { + background-color: ${dt('galleria.indicator.active.background')}; +} + +.p-galleria-indicators-left .p-galleria-items-container, +.p-galleria-indicators-right .p-galleria-items-container { + flex-direction: row; + align-items: center; +} + +.p-galleria-indicators-left .p-galleria-items, +.p-galleria-indicators-top .p-galleria-items { + order: 2; +} + +.p-galleria-indicators-left .p-galleria-indicator-list, +.p-galleria-indicators-top .p-galleria-indicator-list { + order: 1; +} + +.p-galleria-indicators-left .p-galleria-indicator-list, +.p-galleria-indicators-right .p-galleria-indicator-list { + flex-direction: column; +} + +.p-galleria-inset-indicators .p-galleria-indicator-list { + position: absolute; + display: flex; + z-index: 1; + background: ${dt('galleria.inset.indicators.background')}; +} + +.p-galleria-inset-indicators .p-galleria-indicator-button { + background: ${dt('galleria.inset.indicator.background')}; +} + +.p-galleria-inset-indicators .p-galleria-indicator-button:hover { + background: ${dt('galleria.inset.indicator.hover.background')}; +} + +.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button { + background: ${dt('galleria.inset.indicator.active.background')}; +} + +.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list { + top: 0; + left: 0; + width: 100%; + align-items: flex-start; +} + +.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list { + right: 0; + top: 0; + height: 100%; + align-items: flex-end; +} + +.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list { + bottom: 0; + left: 0; + width: 100%; + align-items: flex-end; +} + +.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list { + left: 0; + top: 0; + height: 100%; + align-items: flex-start; +} + +.p-galleria-mask { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + --p-mask-background: ${dt('galleria.mask.background')}; +} + +.p-galleria-close-button { + position: absolute; + top: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + margin: 0.5rem; + background: transparent; + color: ${dt('galleria.close.color')}; + width: 3rem; + height: 3rem; + padding: 0; + border: none; + user-select: none; + cursor: pointer; + border-radius: 50%; + outline-color: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-galleria-close-icon { + font-size: 1.5rem; + width: 1.5rem; + height: 1.5rem; +} + +.p-galleria-close-button:hover { + background: ${dt('galleria.close.hover.background')}; + color: ${dt('galleria.close.hover.color')}; +} + +.p-galleria-close-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-galleria-mask .p-galleria-navigate-button { + position: fixed; + top: 50%; + margin-top: -0.5rem; +} + +.p-galleria-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); +} + +.p-galleria-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.p-galleria-enter-from, +.p-galleria-leave-to { + opacity: 0; + transform: scale(0.7); +} + +.p-galleria-enter-active .p-galleria-navigate-button { + opacity: 0; +} + +.p-items-hidden .p-galleria-thumbnail-item { + visibility: hidden; +} + +.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { + visibility: visible; +} +`; + const classes = { mask: ({ instance }) => [ 'p-galleria-mask p-component-overlay p-component-overlay-enter', @@ -85,5 +490,6 @@ const classes = { export default BaseStyle.extend({ name: 'galleria', + theme, classes }); diff --git a/components/lib/iconfield/style/IconFieldStyle.js b/components/lib/iconfield/style/IconFieldStyle.js index c1425f1ff..ad75f0cd0 100644 --- a/components/lib/iconfield/style/IconFieldStyle.js +++ b/components/lib/iconfield/style/IconFieldStyle.js @@ -1,10 +1,40 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-iconfield { + position: relative; +} + +.p-inputicon { + position: absolute; + top: 50%; + margin-top: -.5rem; + color: ${dt('iconfield.color')}; +} + +.p-iconfield .p-inputicon:first-child { + left: 0.75rem; +} + +.p-iconfield .p-inputicon:last-child { + right: 0.75rem; +} + +.p-iconfield .p-inputtext:last-child { + padding-left: 2.5rem; +} + +.p-iconfield .p-inputtext:first-child { + padding-right: 2.5rem; +} +`; + const classes = { root: 'p-iconfield' }; export default BaseStyle.extend({ name: 'iconfield', + theme, classes }); diff --git a/components/lib/inlinemessage/style/InlineMessageStyle.js b/components/lib/inlinemessage/style/InlineMessageStyle.js index 5f440a2c4..85e0380fc 100644 --- a/components/lib/inlinemessage/style/InlineMessageStyle.js +++ b/components/lib/inlinemessage/style/InlineMessageStyle.js @@ -1,5 +1,99 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-inline-message { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem 0.75rem; + margin: 0; + border-radius: ${dt('rounded.base')}; +} + +.p-inline-message-text { + font-weight: 500; +} + +.p-inline-message-icon { + flex-shrink: 0; + margin-right: 0.5rem; +} + +.p-inline-message-icon-only .p-inline-message-text { + visibility: hidden; + width: 0; +} + +.p-fluid .p-inline-message { + display: flex; +} + +.p-inline-message-info { + background: ${dt('inlinemessage.info.background')}; + border: 1px solid ${dt('inlinemessage.info.border.color')}; + color: ${dt('inlinemessage.info.color')}; + box-shadow: ${dt('inlinemessage.info.box.shadow')}; +} + +.p-inline-message-info .p-inline-message-icon { + color: ${dt('inlinemessage.info.color')}; +} + +.p-inline-message-success { + background: ${dt('inlinemessage.success.background')}; + border: 1px solid ${dt('inlinemessage.success.border.color')}; + color: ${dt('inlinemessage.success.color')}; + box-shadow: ${dt('inlinemessage.success.box.shadow')}; +} +.p-inline-message-success .p-inline-message-icon { + color: ${dt('inlinemessage.success.color')}; +} + +.p-inline-message-warn { + background: ${dt('inlinemessage.warn.background')}; + border: 1px solid ${dt('inlinemessage.warn.border.color')}; + color: ${dt('inlinemessage.warn.color')}; + box-shadow: ${dt('inlinemessage.warn.box.shadow')}; +} +.p-inline-message-warn .p-inline-message-icon { + color: ${dt('inlinemessage.warn.color')}; +} + +.p-inline-message-error { + background: ${dt('inlinemessage.error.background')}; + border: 1px solid ${dt('inlinemessage.error.border.color')}; + color: ${dt('inlinemessage.error.color')}; + box-shadow: ${dt('inlinemessage.error.box.shadow')}; +} +.p-inline-message-error .p-inline-message-icon { + color: ${dt('inlinemessage.error.color')}; +} + +.p-inline-message-secondary { + background: ${dt('inlinemessage.secondary.background')}; + border: 1px solid ${dt('inlinemessage.secondary.border.color')}; + color: ${dt('inlinemessage.secondary.color')}; + box-shadow: ${dt('inlinemessage.secondary.box.shadow')}; +} +.p-inline-message-secondary .p-inline-message-icon { + color: ${dt('inlinemessage.secondary.color')}; +} + +.p-inline-message-contrast { + background: ${dt('inlinemessage.contrast.background')}; + border: 1px solid ${dt('inlinemessage.contrast.border.color')}; + color: ${dt('inlinemessage.contrast.color')}; + box-shadow: ${dt('inlinemessage.contrast.box.shadow')}; +} +.p-inline-message-contrast .p-inline-message-icon { + color: ${dt('inlinemessage.contrast.color')}; +} + +.p-inline-message-icon-only .p-inline-message-icon { + margin-right: 0; +} +`; + const classes = { root: ({ props, instance }) => ['p-inline-message p-component p-inline-message-' + props.severity, { 'p-inline-message-icon-only': !instance.$slots.default }], icon: ({ props }) => ['p-inline-message-icon', props.icon], @@ -8,5 +102,6 @@ const classes = { export default BaseStyle.extend({ name: 'inlinemessage', + theme, classes }); diff --git a/components/lib/inplace/style/InplaceStyle.js b/components/lib/inplace/style/InplaceStyle.js index dbdd39a3e..1bde0c1b3 100644 --- a/components/lib/inplace/style/InplaceStyle.js +++ b/components/lib/inplace/style/InplaceStyle.js @@ -1,5 +1,30 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-inplace-display { + display: inline; + cursor: pointer; + padding: 0.5rem 0.75rem; + border-radius: ${dt('rounded.base')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-inplace-display:not(.p-disabled):hover { + background: ${dt('inplace.display.hover.background')}; + color: ${dt('inplace.display.hover.color')}; +} + +.p-inplace-display:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-inplace-content { + display: inline; +} +`; + const classes = { root: 'p-inplace p-component', display: ({ props }) => ['p-inplace-display', { 'p-disabled': props.disabled }], @@ -8,5 +33,6 @@ const classes = { export default BaseStyle.extend({ name: 'inplace', + theme, classes }); diff --git a/components/lib/inputchips/style/InputChipsStyle.js b/components/lib/inputchips/style/InputChipsStyle.js index 17fabe1e8..90054f073 100644 --- a/components/lib/inputchips/style/InputChipsStyle.js +++ b/components/lib/inputchips/style/InputChipsStyle.js @@ -1,5 +1,89 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-inputchips { + display: inline-flex; +} + +.p-inputchips-input { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + padding: 0.25rem 0.25rem; + gap: 0.25rem; + color: ${dt('inputchips.color')}; + background: ${dt('inputchips.background')}; + border: 1px solid ${dt('inputchips.border.color')}; + border-radius: ${dt('rounded.base')}; + width: 100%; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + box-shadow: ${dt('inputchips.box.shadow')}; +} + +.p-inputchips:not(.p-disabled):hover .p-inputchips-input { + border-color: ${dt('inputchips.hover.border.color')}; +} + +.p-inputchips:not(.p-disabled).p-focus .p-inputchips-input { + border-color: ${dt('inputchips.focus.border.color')}; + outline: 0 none; +} + +.p-inputinputchips.p-invalid .p-inputchips-input { + border-color: ${dt('inputchips.invalid.border.color')}; +} + +.p-variant-filled.p-inputchips-input { + background: ${dt('inputchips.filled.background')}; +} + +.p-inputchips:not(.p-disabled).p-focus .p-variant-filled.p-inputchips-input { + background: ${dt('inputchips.filled.focus.background')}; +} + +.p-inputinputchips.p-disabled .p-inputchips-input { + opacity: 1; + background: ${dt('inputchips.disabled.background')}; + color: ${dt('inputchips.disabled.color')}; +} + +.p-inputchips-input-item { + padding: 0.25rem 0; + margin-left: 0.5rem; + flex: 1 1 auto; + display: inline-flex; +} + +.p-inputchips-input-item input { + border: 0 none; + outline: 0 none; + background: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; + color: inherit; +} + +.p-inputchips-input-item input::placeholder { + color: ${dt('inputchips.placeholder.color')}; +} + +.p-fluid .p-inputchips { + display: flex; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-inputchips p-component p-inputwrapper', @@ -25,5 +109,6 @@ const classes = { export default BaseStyle.extend({ name: 'inputchips', + theme, classes }); diff --git a/components/lib/inputgroup/style/InputGroupStyle.js b/components/lib/inputgroup/style/InputGroupStyle.js index 051f9a5ed..ed8bb00fe 100644 --- a/components/lib/inputgroup/style/InputGroupStyle.js +++ b/components/lib/inputgroup/style/InputGroupStyle.js @@ -1,10 +1,112 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-inputgroup { + display: flex; + align-items: stretch; + width: 100%; +} + +.p-inputgroup-addon { + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + background: ${dt('inputgroup.addon.background')}; + color: ${dt('inputgroup.addon.color')}; + border-top: 1px solid ${dt('inputgroup.addon.border.color')}; + border-left: 1px solid ${dt('inputgroup.addon.border.color')}; + border-bottom: 1px solid ${dt('inputgroup.addon.border.color')}; + padding: 0.5rem 0.75rem; + min-width: 2.5rem; +} + +.p-inputgroup .p-float-label { + display: flex; + align-items: stretch; + width: 100%; +} + +.p-inputgroup .p-inputtext, +.p-fluid .p-inputgroup .p-inputtext, +.p-inputgroup .p-inputwrapper, +.p-fluid .p-inputgroup .p-input { + flex: 1 1 auto; + width: 1%; +} + +.p-inputgroup-addon:last-child { + border-right: 1px solid ${dt('inputgroup.addon.border.color')}; +} + +.p-inputgroup > .p-component, +.p-inputgroup > .p-inputwrapper > .p-inputtext, +.p-inputgroup > .p-float-label > .p-component { + border-radius: 0; + margin: 0; +} + +.p-inputgroup > .p-component + .p-inputgroup-addon, +.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, +.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { + border-left: 0 none; +} + +.p-inputgroup > .p-component:focus, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, +.p-inputgroup > .p-float-label > .p-component:focus { + z-index: 1; +} + +.p-inputgroup > .p-component:focus ~ label, +.p-inputgroup > .p-inputwrapper > .p-inputtext:focus~label, +.p-inputgroup > .p-float-label > .p-component:focus~label { + z-index: 1; +} + +.p-inputgroup-addon:first-child, +.p-inputgroup button:first-child, +.p-inputgroup input:first-child, +.p-inputgroup > .p-inputwrapper:first-child, +.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup .p-float-label:first-child input { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.p-inputgroup-addon:last-child, +.p-inputgroup button:last-child, +.p-inputgroup input:last-child, +.p-inputgroup > .p-inputwrapper:last-child, +.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-inputgroup .p-float-label:last-child input { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.p-fluid .p-inputgroup .p-button { + width: auto; +} + +.p-fluid .p-inputgroup .p-button.p-button-icon-only { + width: 2.5rem; +} +`; + const classes = { root: 'p-inputgroup' }; export default BaseStyle.extend({ name: 'inputgroup', + theme, classes }); diff --git a/components/lib/inputnumber/style/InputNumberStyle.js b/components/lib/inputnumber/style/InputNumberStyle.js index 0ff7dbdd7..d1d56c723 100644 --- a/components/lib/inputnumber/style/InputNumberStyle.js +++ b/components/lib/inputnumber/style/InputNumberStyle.js @@ -1,5 +1,152 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-inputnumber { + display: inline-flex; + position: relative; +} + +.p-inputnumber-button { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + background: ${dt('inputnumber.button.background')}; + color: ${dt('inputnumber.button.color')}; + width: ${dt('inputnumber.button.width')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-inputnumber-button:hover { + background: ${dt('inputnumber.button.hover.background')}; + color: ${dt('inputnumber.button.hover.color')}; +} + +.p-inputnumber-button:active { + background: ${dt('inputnumber.button.active.background')}; + color: ${dt('inputnumber.button.active.color')}; +} + +.p-inputnumber-stacked { + overflow: hidden; +} + +.p-inputnumber-stacked .p-inputnumber-button { + position: relative; + border: 0 none; +} + +.p-inputnumber-stacked .p-inputnumber-button-group { + display: flex; + flex-direction: column; + position: absolute; + top: 1px; + right: 1px; + height: calc(100% - 2px); +} + +.p-inputnumber-stacked .p-inputnumber-button-up { + padding: 0; + border-top-right-radius: calc(${dt('rounded.base')} - 1px); +} + +.p-inputnumber-stacked .p-inputnumber-button-down { + padding: 0; + border-bottom-right-radius: calc(${dt('rounded.base')} - 1px); +} + +.p-inputnumber-stacked .p-inputnumber-button { + flex: 1 1 auto; + border: 0 none; +} + +.p-inputnumber-horizontal .p-inputnumber-button { + border: 1px solid ${dt('inputnumber.button.border.color')}; +} + +.p-inputnumber-horizontal .p-inputnumber-button:hover { + border-color: ${dt('inputnumber.button.hover.border.color')}; +} + +.p-inputnumber-horizontal .p-inputnumber-button:active { + border-color: ${dt('inputnumber.button.active.border.color')}; +} + +.p-inputnumber-horizontal .p-inputnumber-button-up { + order: 3; + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; + border-left: 0 none; +} + +.p-inputnumber-horizontal .p-inputnumber-input { + order: 2; + border-radius: 0; +} + +.p-inputnumber-horizontal .p-inputnumber-button-down { + order: 1; + border-top-left-radius: ${dt('rounded.base')}; + border-bottom-left-radius: ${dt('rounded.base')}; + border-right: 0 none; +} + +.p-inputnumber-vertical { + flex-direction: column; +} + +.p-inputnumber-vertical .p-inputnumber-button { + border: 1px solid ${dt('inputnumber.button.border.color')}; + padding: 0.5rem 0; +} + +.p-inputnumber-vertical .p-inputnumber-button:hover { + border-color: ${dt('inputnumber.button.hover.border.color')}; +} + +.p-inputnumber-vertical .p-inputnumber-button:active { + border-color: ${dt('inputnumber.button.active.border.color')}; +} + +.p-inputnumber-vertical .p-inputnumber-button-up { + order: 1; + border-top-left-radius: ${dt('rounded.base')}; + border-top-right-radius: ${dt('rounded.base')}; + width: 100%; + border-bottom: 0 none; +} + +.p-inputnumber-vertical .p-inputnumber-input { + order: 2; + border-radius: 0; + text-align: center; +} + +.p-inputnumber-vertical .p-inputnumber-button-down { + order: 3; + border-bottom-left-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; + width: 100%; + border-top: 0 none; +} + +.p-inputnumber-input { + flex: 1 1 auto; +} + +.p-fluid .p-inputnumber { + width: 100%; +} + +.p-fluid .p-inputnumber .p-inputnumber-input { + width: 1%; +} + +.p-fluid .p-inputnumber-vertical .p-inputnumber-input { + width: 100%; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-inputnumber p-component p-inputwrapper', @@ -29,5 +176,6 @@ const classes = { export default BaseStyle.extend({ name: 'inputnumber', + theme, classes }); diff --git a/components/lib/inputotp/style/InputOtpStyle.js b/components/lib/inputotp/style/InputOtpStyle.js index 89b47d4fe..b55f35b70 100644 --- a/components/lib/inputotp/style/InputOtpStyle.js +++ b/components/lib/inputotp/style/InputOtpStyle.js @@ -1,5 +1,18 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.p-inputotp-input { + text-align: center; + width: 2.5rem; +} +`; + const classes = { root: 'p-inputotp p-component', input: 'p-inputotp-input' @@ -7,5 +20,6 @@ const classes = { export default BaseStyle.extend({ name: 'inputotp', + theme, classes }); diff --git a/components/lib/inputtext/style/InputTextStyle.js b/components/lib/inputtext/style/InputTextStyle.js index fe713e5a2..03cd63cfd 100644 --- a/components/lib/inputtext/style/InputTextStyle.js +++ b/components/lib/inputtext/style/InputTextStyle.js @@ -1,5 +1,57 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-inputtext { + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; + color: ${dt('inputtext.color')}; + background: ${dt('inputtext.background')}; + padding: 0.5rem 0.75rem; + border: 1px solid ${dt('inputtext.border.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + appearance: none; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + box-shadow: ${dt('inputtext.box.shadow')}; +} + +.p-inputtext:enabled:hover { + border-color: ${dt('inputtext.hover.border.color')}; +} + +.p-inputtext:enabled:focus { + border-color: ${dt('inputtext.focus.border.color')}; + outline: 0 none; +} + +.p-inputtext.p-invalid { + border-color: ${dt('inputtext.invalid.border.color')}; +} + +.p-inputtext.p-variant-filled { + background: ${dt('inputtext.filled.background')}; +} + +.p-inputtext.p-variant-filled:enabled:focus { + background-color: ${dt('inputtext.filled.focus.background')}; +} + +.p-inputtext:disabled { + opacity: 1; + background: ${dt('inputtext.disabled.background')}; + color: ${dt('inputtext.disabled.color')}; +} + +.p-inputtext::placeholder { + color: ${dt('inputtext.placeholder.color')}; +} + +.p-fluid .p-inputtext { + width: 100%; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-inputtext p-component', @@ -15,5 +67,6 @@ const classes = { export default BaseStyle.extend({ name: 'inputtext', + theme, classes }); diff --git a/components/lib/knob/style/KnobStyle.js b/components/lib/knob/style/KnobStyle.js index 5a393d4c1..f3379ff2b 100644 --- a/components/lib/knob/style/KnobStyle.js +++ b/components/lib/knob/style/KnobStyle.js @@ -1,5 +1,39 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-knob-range { + fill: none; + transition: stroke 0.1s ease-in; +} + +.p-knob-value { + animation-name: p-knob-dash-frame; + animation-fill-mode: forwards; + fill: none; +} + +.p-knob-text { + font-size: 1.3rem; + text-align: center; +} + +.p-knob svg { + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + transition: outline-color ${dt('transition.duration')}; +} +.p-knob svg:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +@keyframes p-knob-dash-frame { + 100% { + stroke-dashoffset: 0; + } +} +`; + const classes = { root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }], range: 'p-knob-range', @@ -9,5 +43,6 @@ const classes = { export default BaseStyle.extend({ name: 'knob', + theme, classes }); diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js index 6b32cb4a8..5f3e5dc1a 100644 --- a/components/lib/listbox/style/ListboxStyle.js +++ b/components/lib/listbox/style/ListboxStyle.js @@ -1,5 +1,120 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-listbox { + background: ${dt('listbox.background')}; + color: ${dt('listbox.color')}; + border: 1px solid ${dt('listbox.border.color')}; + border-radius: ${dt('rounded.base')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); +} + +.p-listbox.p-focus { + outline: 0 none; + border-color: ${dt('listbox.focus.border.color')}; +} + +.p-listbox.p-disabled { + opacity: 1; + background: ${dt('listbox.disabled.background')}; + color: ${dt('listbox.disabled.color')}; +} + +.p-listbox.p-invalid { + border-color: ${dt('listbox.invalid.border.color')}; +} + +.p-listbox .p-listbox-header { + padding: 0.5rem 0.5rem 0 0.5rem; + border-bottom: 0 none; + margin: 0 0 0 0; +} + +.p-listbox-filter-container { + position: relative; +} + +.p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + right: 0.75rem; + color: ${dt('listbox.filter.icon.color')}; +} + +.p-listbox-filter { + width: 100%; + padding-right: 1.75rem; +} + +.p-listbox-list-container { + overflow: auto; +} + +.p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0.25rem 0.25rem; + outline: 0 none; +} + +.p-listbox-option { + cursor: pointer; + position: relative; + overflow: hidden; + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + border-radius: ${dt('rounded.sm')}; + color: ${dt('listbox.item.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-listbox-option:first-child { + margin-top: 0; +} + +.p-listbox-option:last-child { + margin-bottom: 0; +} + +.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected { + background: ${dt('listbox.item.selected.background')}; + color: ${dt('listbox.item.selected.color')}; +} + +.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus { + background: ${dt('listbox.item.selected.focus.background')}; + color: ${dt('listbox.item.selected.focus.color')}; +} + +.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus { + background: ${dt('listbox.item.focus.background')}; + color: ${dt('listbox.item.focus.color')}; +} + +.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover { + background: ${dt('listbox.item.focus.background')}; + color: ${dt('listbox.item.focus.color')}; +} + +.p-listbox-option-group { + cursor: auto; + margin: 0; + padding: 0.5rem 0.75rem; + color: ${dt('listbox.item.group.color')}; + background: ${dt('listbox.item.group.background')}; + font-weight: 600; +} + +.p-listbox-empty-message { + padding: 0.5rem 0.75rem; + background: transparent; +} +`; + const classes = { root: ({ props }) => [ 'p-listbox p-component', @@ -29,5 +144,6 @@ const classes = { export default BaseStyle.extend({ name: 'listbox', + theme, classes }); diff --git a/components/lib/megamenu/style/MegaMenuStyle.js b/components/lib/megamenu/style/MegaMenuStyle.js index 14f794103..268d2a06d 100644 --- a/components/lib/megamenu/style/MegaMenuStyle.js +++ b/components/lib/megamenu/style/MegaMenuStyle.js @@ -1,5 +1,286 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-megamenu { + display: flex; + position: relative; + padding: 0.5rem 0.5rem; + background: ${dt('megamenu.background')}; + color: ${dt('megamenu.color')}; + border: 1px solid ${dt('megamenu.border.color')}; + border-radius: ${dt('rounded.base')}; +} + +.p-megamenu-root-list { + margin: 0; + padding: 0; + list-style: none; +} + +.p-megamenu-item-content { + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; + color: ${dt('megamenu.item.color')}; +} + +.p-megamenu-item-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + color: inherit; + padding: 0.5rem 0.75rem; + user-select: none; +} + +.p-megamenu-item-label { + line-height: 1; +} + +.p-megamenu-item-icon { + color: ${dt('megamenu.item.icon.color')}; + margin-right: 0.5rem; +} + +.p-megamenu-item.p-focus > .p-megamenu-item-content { + color: ${dt('megamenu.item.focus.color')}; + background: ${dt('megamenu.item.focus.background')}; +} + +.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon, +.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon { + color: ${dt('megamenu.item.icon.focus.color')}; +} + +.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover { + color: ${dt('megamenu.item.focus.color')}; + background: ${dt('megamenu.item.focus.background')}; +} + +.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon, +.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon { + color: ${dt('megamenu.item.icon.focus.color')}; +} + +.p-megamenu-item-active > .p-megamenu-item-content { + color: ${dt('megamenu.item.focus.color')}; + background: ${dt('megamenu.item.focus.background')}; +} + +.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon, +.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon { + color: ${dt('megamenu.item.icon.focus.color')}; +} + +.p-megamenu-submenu-icon { + color: ${dt('megamenu.item.icon.color')}; + margin-left: 0.5rem; + font-size: 0.875rem; + width: 0.875rem; + height: 0.875rem; +} + +.p-megamenu-panel { + display: none; + position: absolute; + width: auto; + z-index: 1; + left: 0; + min-width: 100%; + background: ${dt('megamenu.background')}; + color: ${dt('megamenu.color')}; + border: 1px solid ${dt('megamenu.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) +} + +.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-panel { + display: block; +} + +.p-megamenu-submenu { + margin: 0; + list-style: none; + padding: 0.25rem 0.25rem; + min-width: 12.5rem; +} + +.p-megamenu-submenu .p-megamenu-item { + margin: 2px 0; +} + +.p-megamenu-submenu .p-megamenu-item:first-child { + margin-top: 0; +} + +.p-megamenu-submenu .p-megamenu-item:last-child { + margin-bottom: 0; +} + +.p-megamenu-submenu .p-megamenu-submenu-item { + margin: 0; + padding: 0.5rem 0.75rem; + color: ${dt('megamenu.submenu.header.color')}; + font-weight: 600; + margin-bottom: 2px; +} + +.p-megamenu-submenu .p-menuitem-separator { + border-top: 1px solid ${dt('megamenu.separator.border.color')}; + margin: 2px 0; +} + +.p-megamenu-horizontal { + align-items: center; +} + +.p-megamenu-horizontal .p-megamenu-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.p-megamenu-horizontal .p-megamenu-end { + margin-left: auto; + align-self: center; +} + +.p-megamenu-vertical { + display: inline-flex; + flex-direction: column; + min-width: 12.5rem; + padding: 0.25rem 0.25rem; +} + +.p-megamenu-vertical .p-megamenu-root-list { + flex-direction: column; +} + +.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-panel { + left: 100%; + top: 0; +} + +.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon { + margin-left: auto; +} + +.p-megamenu-grid { + display: flex; +} + +.p-megamenu-col-2, +.p-megamenu-col-3, +.p-megamenu-col-4, +.p-megamenu-col-6, +.p-megamenu-col-12 { + flex: 0 0 auto; + padding: 0.5rem; +} + +.p-megamenu-col-2 { + width: 16.6667%; +} + +.p-megamenu-col-3 { + width: 25%; +} + +.p-megamenu-col-4 { + width: 33.3333%; +} + +.p-megamenu-col-6 { + width: 50%; +} + +.p-megamenu-col-12 { + width: 100%; +} + +.p-megamenu-button { + display: none; + justify-content: center; + align-items: center; + cursor: pointer; + width: 1.75rem; + height: 1.75rem; + position: relative; + color: ${dt('megamenu.mobile.toggle.color')}; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-megamenu-button:hover { + color: ${dt('megamenu.mobile.toggle.hover.color')}; + background: ${dt('megamenu.mobile.toggle.hover.background')}; +} + +.p-megamenu-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-megamenu-mobile { + display: flex; +} + +.p-megamenu-mobile .p-megamenu-button { + display: flex; +} + +.p-megamenu-mobile .p-megamenu-root-list { + position: absolute; + display: none; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; + width: 100%; + padding: 0.25rem 0.25rem; + background: ${dt('megamenu.background')}; + border: 1px solid ${dt('megamenu.border.color')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + gap: 2px; +} + +.p-megamenu-mobile-active .p-megamenu-root-list { + display: flex; +} + +.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item { + width: 100%; + position: static; +} + +.p-megamenu-mobile .p-megamenu-panel { + position: static; + border: 0 none; + border-radius: 0; + box-shadow: none; +} + +.p-megamenu-mobile .p-megamenu-grid { + flex-wrap: wrap; + overflow: auto; + max-height: 90%; +} + +.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon { + margin-left: auto; + transition: transform 0.2s; +} + +.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon { + transform: rotate(-180deg); +} +`; + const inlineStyles = { submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' }) }; @@ -77,6 +358,7 @@ const classes = { export default BaseStyle.extend({ name: 'megamenu', + theme, classes, inlineStyles }); diff --git a/components/lib/menu/style/MenuStyle.js b/components/lib/menu/style/MenuStyle.js index f9a69d8a2..b3477f7f0 100644 --- a/components/lib/menu/style/MenuStyle.js +++ b/components/lib/menu/style/MenuStyle.js @@ -1,5 +1,95 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-menu { + padding: 0.25rem 0.25rem; + background: ${dt('menu.background')}; + color: ${dt('menu.color')}; + border: 1px solid ${dt('menu.border.color')}; + border-radius: ${dt('rounded.base')}; + min-width: 12.5rem; +} + +.p-menu-list { + margin: 0; + padding: 0; + list-style: none; +} + +.p-menu-item { + margin: 2px 0; +} + +.p-menu-item:first-child { + margin-top: 0; +} + +.p-menu-item:last-child { + margin-bottom: 0; +} + +.p-menu-item-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + color: inherit; + padding: 0.5rem 0.75rem; + user-select: none; +} + +.p-menu-item-content { + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; + color: ${dt('menu.item.color')}; +} + +.p-menu-item-label { + line-height: 1; +} + +.p-menu-item-icon { + color: ${dt('menu.item.icon.color')}; + margin-right: 0.5rem; +} + +.p-menu-item.p-focus .p-menu-item-content { + color: ${dt('menu.item.focus.color')}; + background: ${dt('menu.item.focus.background')}; +} + +.p-menu-item.p-focus .p-menu-item-icon { + color: ${dt('menu.item.icon.focus.color')}; +} + +.p-menu-item:not(.p-disabled) .p-menu-item-content:hover { + color: ${dt('menu.item.focus.color')}; + background: ${dt('menu.item.focus.background')}; +} + +.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon { + color: ${dt('menu.item.icon.focus.color')}; +} + +.p-menu-overlay { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-menu-submenu-item { + margin: 0; + padding: 0.5rem 0.75rem; + color: ${dt('menu.submenu.header.color')}; + font-weight: 600; +} + +.p-menu-separator { + border-top: 1px solid ${dt('menu.separator.border.color.color')}; + margin: 2px 0; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-menu p-component', @@ -28,5 +118,6 @@ const classes = { export default BaseStyle.extend({ name: 'menu', + theme, classes }); diff --git a/components/lib/menubar/style/MenubarStyle.js b/components/lib/menubar/style/MenubarStyle.js index ee3f05f72..bd4c3be59 100644 --- a/components/lib/menubar/style/MenubarStyle.js +++ b/components/lib/menubar/style/MenubarStyle.js @@ -1,5 +1,247 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-menubar { + display: flex; + align-items: center; + padding: 0.5rem 0.5rem; + background: ${dt('menubar.background')}; + color: ${dt('menubar.color')}; + border: 1px solid ${dt('menubar.border.color')}; + border-radius: ${dt('rounded.base')}; +} + +.p-menubar-root-list, +.p-menubar-submenu { + margin: 0; + padding: 0; + list-style: none; + outline: 0 none; +} + +.p-menubar-root-list { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.p-menubar-root-list > .p-menubar-item-active > .p-menubar-submenu { + display: block; +} + +.p-menubar-item-content { + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}); + color: ${dt('menubar.item.color')}; +} + +.p-menubar-item-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + color: inherit; + padding: 0.5rem 0.75rem; + user-select: none; +} + +.p-menubar-item-label { + line-height: 1; +} + +.p-menubar-item-icon { + color: ${dt('menubar.item.icon.color')}; + margin-right: 0.5rem; +} + +.p-menubar-item.p-focus > .p-menubar-item-content { + color: ${dt('menubar.item.focus.color')}; + background: ${dt('menubar.item.focus.background')}; +} + +.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon, +.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon { + color: ${dt('menubar.item.icon.focus.color')}; +} + +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover { + color: ${dt('menubar.item.focus.color')}; + background: ${dt('menubar.item.focus.background')}; +} + +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon, +.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon { + color: ${dt('menubar.item.icon.focus.color')}; +} + +.p-menubar-item-active > .p-menubar-item-content { + color: ${dt('menubar.item.focus.color')}; + background: ${dt('menubar.item.focus.background')}; +} + +.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon, +.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { + color: ${dt('menubar.item.icon.focus.color')}; +} + +.p-menubar-submenu-icon { + color: ${dt('menubar.item.icon.color')}; + margin-left: auto; + font-size: 0.875rem; + width: 0.875rem; + height: 0.875rem; +} + +.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon { + margin-left: 0.5rem; +} + +.p-menubar-submenu { + display: none; + position: absolute; + min-width: 12.5rem; + z-index: 1; + padding: 0.25rem 0.25rem; + background: ${dt('menubar.background')}; + color: ${dt('menubar.color')}; + border: 1px solid ${dt('menubar.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-menubar-submenu .p-menubar-separator { + border-top: 1px solid ${dt('menubar.separator.border.color')}; + margin: 2px 0; +} + +.p-menubar-submenu .p-menubar-item { + position: relative; + margin: 2px 0; +} + +.p-menubar-submenu .p-menubar-item:first-child { + margin-top: 0; +} + +.p-menubar-submenu .p-menubar-item:last-child { + margin-bottom: 0; +} + + .p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu { + display: block; + left: 100%; + top: 0; +} + +.p-menubar-end { + margin-left: auto; + align-self: center; +} + +.p-menubar-button { + display: none; + justify-content: center; + align-items: center; + cursor: pointer; + width: 1.75rem; + height: 1.75rem; + position: relative; + color: ${dt('menubar.mobile.toggle.color')}; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-menubar-button:hover { + color: ${dt('menubar.mobile.toggle.hover.color')}; + background: ${dt('menubar.mobile.toggle.hover.background')}; +} + +.p-menubar-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-menubar-mobile { + position: relative; +} + +.p-menubar-mobile .p-menubar-button { + display: flex; +} + +.p-menubar-mobile .p-menubar-root-list { + position: absolute; + display: none; + width: 100%; + padding: 0.25rem 0.25rem; + background: ${dt('menubar.background')}; + border: 1px solid ${dt('menubar.border.color')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-menubar-mobile-active .p-menubar-root-list { + display: flex; + flex-direction: column; + top: 100%; + left: 0; + z-index: 1; +} + +.p-menubar-mobile .p-menubar-root-list .p-menubar-item { + width: 100%; + position: static; +} + +.p-menubar-mobile .p-menubar-root-list .p-menubar-separator { + border-top: 1px solid #e2e8f0; + margin: 2px 0; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item { + position: relative; + margin: 2px 0; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item:first-child { + margin-top: 0; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item:last-child { + margin-bottom: 0; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon { + margin-left: auto; + transition: transform 0.2s; +} + +.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { + transform: rotate(-180deg); +} + +.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon { + transition: transform 0.2s; + transform: rotate(90deg); +} + +.p-menubar-mobile .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { + transform: rotate(-90deg); +} + +.p-menubar-mobile .p-menubar-submenu { + width: 100%; + position: static; + box-shadow: none; + border: 0 none; + padding-left: 1rem; +} +`; + const inlineStyles = { submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' }) }; @@ -35,6 +277,7 @@ const classes = { export default BaseStyle.extend({ name: 'menubar', + theme, classes, inlineStyles }); diff --git a/components/lib/message/style/MessageStyle.js b/components/lib/message/style/MessageStyle.js index b59544aeb..5d2719d17 100644 --- a/components/lib/message/style/MessageStyle.js +++ b/components/lib/message/style/MessageStyle.js @@ -1,5 +1,181 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-message-content { + display: flex; + align-items: center; + padding: 0.5rem 0.75rem; +} + +.p-message { + margin: 1rem 0; + border-radius: 6px; +} + +.p-message-icon { + flex-shrink: 0; +} + +.p-message-close-button { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + margin: 0 0 0 auto; + overflow: hidden; + position: relative; + width: 1.75rem; + height: 1.75rem; + border-radius: 50%; + background: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + color: inherit; + padding: 0; + border: none; + cursor: pointer; + user-select: none; +} + +.p-message-close-button:focus-visible { + outline-width: ${dt('focus.ring.width')}; + outline-style: ${dt('focus.ring.style')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-message-info { + background: ${dt('message.info.background')}; + border: 1px solid ${dt('message.info.border.color')}; + color: ${dt('message.info.color')}; + box-shadow: ${dt('message.info.box.shadow')}; +} + +.p-message-info .p-message-close-button:focus-visible { + outline-color: ${dt('message.info.color')}; +} + +.p-message-info .p-message-close-button:hover { + background: ${dt('message.info.close.hover.background')}; +} + +.p-message-success { + background: ${dt('message.success.background')}; + border: 1px solid ${dt('message.success.border.color')}; + color: ${dt('message.success.color')}; + box-shadow: ${dt('message.success.box.shadow')}; +} + +.p-message-success .p-message-close-button:focus-visible { + outline-color: ${dt('message.success.color')}; +} + +.p-message-success .p-message-close-button:hover { + background: ${dt('message.success.close.hover.background')}; +} + +.p-message-warn { + background: ${dt('message.warn.background')}; + border: 1px solid ${dt('message.warn.border.color')}; + color: ${dt('message.warn.color')}; + box-shadow: ${dt('message.warn.box.shadow')}; +} + +.p-message-warn .p-message-close-button:focus-visible { + outline-color: ${dt('message.warn.color')}; +} + +.p-message-warn .p-message-close-button:hover { + background: ${dt('message.warn.close.hover.background')}; +} + +.p-message-error { + background: ${dt('message.error.background')}; + border: 1px solid ${dt('message.error.border.color')}; + color: ${dt('message.error.color')}; + box-shadow: ${dt('message.error.box.shadow')}; +} + +.p-message-error .p-message-close-button:focus-visible { + outline-color: ${dt('message.error.color')}; +} + +.p-message-error .p-message-close-button:hover { + background: ${dt('message.error.close.hover.background')}; +} + +.p-message-secondary { + background: ${dt('message.secondary.background')}; + border: 1px solid ${dt('message.secondary.border.color')}; + color: ${dt('message.secondary.color')}; + box-shadow: ${dt('message.secondary.box.shadow')}; +} + +.p-message-secondary .p-message-close-button:focus-visible { + outline-color: ${dt('message.secondary.color')}; +} + +.p-message-secondary .p-message-close-button:hover { + background: ${dt('message.secondary.close.hover.background')}; +} + +.p-message-contrast { + background: ${dt('message.contrast.background')}; + border: 1px solid ${dt('message.contrast.border.color')}; + color: ${dt('message.contrast.color')}; + box-shadow: ${dt('message.contrast.box.shadow')}; +} + +.p-message-contrast .p-message-close-button:focus-visible { + outline-color: ${dt('message.contrast.color')}; +} + +.p-message-contrast .p-message-close-button:hover { + background: ${dt('message.contrast.close.hover.background')}; +} + +.p-message-text { + font-size: 1rem; + font-weight: 500; +} + +.p-message-icon { + font-size: 1rem; + margin-right: 0.5rem; +} + +.p-message .p-icon:not(.p-message-close-button-icon) { + width: 1rem; + height: 1rem; +} + +.p-message-enter-from { + opacity: 0; +} + +.p-message-enter-active { + transition: opacity 0.3s; +} + +.p-message.p-message-leave-from { + max-height: 1000px; +} + +.p-message.p-message-leave-to { + max-height: 0; + opacity: 0; + margin: 0; +} + +.p-message-leave-active { + overflow: hidden; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; +} + +.p-message-leave-active .p-message-close-button { + display: none; +} +`; + const classes = { root: ({ props }) => 'p-message p-component p-message-' + props.severity, content: 'p-message-content', @@ -11,5 +187,6 @@ const classes = { export default BaseStyle.extend({ name: 'message', + theme, classes }); diff --git a/components/lib/metergroup/style/MeterGroupStyle.js b/components/lib/metergroup/style/MeterGroupStyle.js index 13761854b..98b03dc66 100644 --- a/components/lib/metergroup/style/MeterGroupStyle.js +++ b/components/lib/metergroup/style/MeterGroupStyle.js @@ -1,5 +1,97 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-metergroup { + display: flex; + gap: 1rem; +} + +.p-metergroup-meters { + display: flex; + background: ${dt('metergroup.meters.background')}; + border-radius: ${dt('rounded.base')}; +} + +.p-metergroup-meter { + border: 0 none; +} + +.p-metergroup-label-list { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style-type: none; +} + +.p-metergroup-label { + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.p-metergroup-label-marker { + display: inline-flex; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; +} + +.p-metergroup-label-icon { + width: 1rem; + height: 1rem; +} + +.p-metergroup-horizontal { + flex-direction: column; +} + +.p-metergroup-label-list-horizontal { + gap: 1rem; +} + +.p-metergroup-horizontal .p-metergroup-meters { + height: 0.5rem; +} + +.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: ${dt('rounded.base')}; + border-bottom-left-radius: ${dt('rounded.base')}; +} +.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; +} + +.p-metergroup-vertical { + flex-direction: row; +} + +.p-metergroup-label-list-vertical { + flex-direction: column; + gap: 0.5rem; +} + +.p-metergroup-vertical .p-metergroup-meters { + flex-direction: column; + width: 0.5rem; + height: 100%; +} + +.p-metergroup-vertical .p-metergroup-label-list { + align-items: start; +} + +.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: ${dt('rounded.base')}; + border-top-right-radius: ${dt('rounded.base')}; +} +.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; +} +`; + const classes = { root: ({ props }) => [ 'p-metergroup p-component', @@ -25,5 +117,6 @@ const classes = { export default BaseStyle.extend({ name: 'metergroup', + theme, classes }); diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js index 3dad21d6a..7ba948431 100644 --- a/components/lib/multiselect/style/MultiSelectStyle.js +++ b/components/lib/multiselect/style/MultiSelectStyle.js @@ -1,5 +1,208 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-multiselect { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + background: ${dt('multiselect.background')}; + border: 1px solid ${dt('multiselect.border.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + box-shadow: ${dt('multiselect.box.shadow')}; +} + +.p-multiselect:not(.p-disabled):hover { + border-color: ${dt('multiselect.hover.border.color')}; +} + +.p-multiselect:not(.p-disabled).p-focus { + border-color: ${dt('multiselect.focus.border.color')}; + outline: 0 none; +} + +.p-multiselect.p-variant-filled { + background: ${dt('multiselect.filled.background')}; +} + +.p-multiselect.p-variant-filled.p-focus { + background: ${dt('multiselect.filled.focus.background')}; +} + +.p-multiselect.p-invalid { + border-color: ${dt('multiselect.invalid.border.color')}; +} + +.p-multiselect.p-disabled { + opacity: 1; + background: ${dt('multiselect.disabled.background')}; +} + +.p-multiselect-dropdown { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + background: transparent; + color: ${dt('multiselect.toggle.color')}; + width: 2.5rem; + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; +} + +.p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; +} + +.p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + padding: 0.5rem 0.75rem; + color: ${dt('multiselect.color')}; +} + +.p-multiselect-label.p-placeholder { + color: ${dt('multiselect.placeholder.color')}; +} + +.p-multiselect.p-disabled .p-multiselect-label { + color: ${dt('multiselect.disabled.color')}; +} + +.p-inputwrapper-filled.p-multiselect.p-multiselect-display-chip .p-multiselect-label { + padding: 0.25rem 0.25rem; +} + +.p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; +} + +.p-multiselect .p-multiselect-overlay { + min-width: 100%; +} + +.p-multiselect-overlay { + position: absolute; + top: 0; + left: 0; + background: ${dt('multiselect.overlay.background')}; + color: ${dt('multiselect.overlay.color')}; + border: 1px solid ${dt('multiselect.overlay.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.5rem 1rem 0 1rem; +} + +.p-multiselect-header .p-checkbox { + margin-right: 0.5rem; +} + +.p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; +} + +.p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + right: 0.75rem; + color: ${dt('multiselect.filter.icon.color')}; +} + +.p-multiselect-filter-container .p-inputtext { + width: 100%; + padding-right: 1.75rem; +} + +.p-multiselect-list-container { + overflow: auto; +} + +.p-multiselect-list { + margin: 0; + padding: 0; + list-style-type: none; + padding: 0.25rem 0.25rem; +} + +.p-multiselect-option { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: ${dt('multiselect.item.color')}; + background: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; +} + +.p-multiselect-option:first-child { + margin-top: 0; +} + +.p-multiselect-option:last-child { + margin-bottom: 0; +} + +.p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled).p-focus { + background: ${dt('multiselect.item.focus.background')}; + color: ${dt('multiselect.item.focus.color')}; +} + +.p-multiselect-option.p-multiselect-option-selected { + background: ${dt('multiselect.item.selected.background')}; + color: ${dt('multiselect.item.selected.color')}; +} + +.p-multiselect-option.p-multiselect-option-selected.p-focus { + background: ${dt('multiselect.item.selected.focus.background')}; + color: ${dt('multiselect.item.selected.focus.color')}; +} + +.p-multiselect-option .p-checkbox { + margin-right: 0.5rem; +} + +.p-multiselect-option-group { + cursor: auto; + margin: 0; + padding: 0.5rem 0.75rem; + color: ${dt('multiselect.item.group.color')}; + background: ${dt('multiselect.item.group.background')}; + font-weight: 600; +} + +.p-multiselect-empty-message { + padding: 0.5rem 0.75rem; + background: transparent; +} + +.p-fluid .p-multiselect { + display: flex; +} +`; + const inlineStyles = { root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined }) }; @@ -58,6 +261,7 @@ const classes = { export default BaseStyle.extend({ name: 'multiselect', + theme, classes, inlineStyles }); diff --git a/components/lib/orderlist/style/OrderListStyle.js b/components/lib/orderlist/style/OrderListStyle.js index a59ad56da..5966c5280 100644 --- a/components/lib/orderlist/style/OrderListStyle.js +++ b/components/lib/orderlist/style/OrderListStyle.js @@ -1,5 +1,19 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-orderlist { + display: flex; + gap: 1.125rem; +} + +.p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.5rem; +} +`; + const classes = { root: 'p-orderlist p-component', controls: 'p-orderlist-controls' @@ -7,5 +21,6 @@ const classes = { export default BaseStyle.extend({ name: 'orderlist', + theme, classes }); diff --git a/components/lib/organizationchart/style/OrganizationChartStyle.js b/components/lib/organizationchart/style/OrganizationChartStyle.js index 80c9d0fa1..6aeb7e5c6 100644 --- a/components/lib/organizationchart/style/OrganizationChartStyle.js +++ b/components/lib/organizationchart/style/OrganizationChartStyle.js @@ -1,5 +1,115 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-organizationchart-table { + border-spacing: 0; + border-collapse: separate; + margin: 0 auto; +} + +.p-organizationchart-table > tbody > tr > td { + text-align: center; + vertical-align: top; + padding: 0 0.75rem; +} + +.p-organizationchart-node { + display: inline-block; + position: relative; + border: 1px solid ${dt('organizationchart.node.border.color')}; + background: ${dt('organizationchart.node.background')}; + color: ${dt('organizationchart.node.color')}; + padding: 0.75rem 1rem; + border-radius: ${dt('rounded.base')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; +} + +.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) { + padding: 0.75rem 1rem 1.25rem 1rem; +} + +.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-highlight):hover { + background: ${dt('organizationchart.node.hover.background')}; + color: ${dt('organizationchart.node.hover.color')}; +} + +.p-organizationchart-node.p-highlight { + background: ${dt('highlight.background')}; + color: ${dt('highlight.color')}; +} + +.p-organizationchart-node-toggle-button { + position: absolute; + bottom: -0.75rem; + margin-left: -0.75rem; + z-index: 2; + left: 50%; + user-select: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + text-decoration: none; + background: ${dt('organizationchart.toggle.icon.background')}; + color: ${dt('organizationchart.toggle.icon.color')}; + border-radius: 50%; + border: 1px solid ${dt('organizationchart.toggle.icon.border.color')}; + display: inline-flex; + justify-content: center; + align-items: center; + outline-color: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-organizationchart-node-toggle-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-organizationchart-node-toggle-button-icon { + position: relative; + top: 1px; +} + +.p-organizationchart-connector-down { + margin: 0 auto; + height: 20px; + width: 1px; + background: ${dt('organizationchart.connector.color')}; +} + +.p-organizationchart-connector-right { + border-radius: 0; + border-left: 1px solid ${dt('organizationchart.connector.color')}; + border-top-left-radius: ${dt('rounded.base')}; +} + +.p-organizationchart-connector-left { + border-radius: 0; + border-right: 1px solid ${dt('organizationchart.connector.color')}; +} + +.p-organizationchart-connector-top { + border-top: 1px solid ${dt('organizationchart.connector.color')}; +} + +.p-organizationchart-node-selectable { + cursor: pointer; +} + +.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) { + border-right: 0 none; +} + +.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) { + border-top-right-radius: ${dt('rounded.base')}; +} + +.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) { + border-left: 1px solid ${dt('organizationchart.connector.color')}; + border-top-left-radius: ${dt('rounded.base')}; +} +`; + const classes = { root: 'p-organizationchart p-component', table: 'p-organizationchart-table', @@ -15,5 +125,6 @@ const classes = { export default BaseStyle.extend({ name: 'organizationchart', + theme, classes }); diff --git a/components/lib/paginator/style/PaginatorStyle.js b/components/lib/paginator/style/PaginatorStyle.js index 0464029e2..2ec5a79c5 100644 --- a/components/lib/paginator/style/PaginatorStyle.js +++ b/components/lib/paginator/style/PaginatorStyle.js @@ -1,5 +1,80 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-paginator { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + background: ${dt('paginator.background')}; + color: ${dt('paginator.color')}; + border: 0 none; + padding: 0.5rem 1rem; + border-radius: ${dt('rounded.base')}; + gap: 0.25rem; +} + +.p-paginator-content-start { + margin-right: auto; +} + +.p-paginator-content-end { + margin-left: auto; +} + +.p-paginator-page, +.p-paginator-next, +.p-paginator-last, +.p-paginator-first, +.p-paginator-prev { + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + user-select: none; + overflow: hidden; + position: relative; + background: transparent; + border: 0 none; + color: ${dt('paginator.navigator.color')}; + min-width: 2.5rem; + height: 2.5rem; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: 50%; + padding: 0; + margin: 0; +} + +.p-paginator-page:not(.p-disabled):not(.p-paginator-page-active):hover, +.p-paginator-first:not(.p-disabled):hover, +.p-paginator-prev:not(.p-disabled):hover, +.p-paginator-next:not(.p-disabled):hover, +.p-paginator-last:not(.p-disabled):hover { + background: ${dt('paginator.navigator.hover.background')}; + color: ${dt('paginator.navigator.hover.color')}; +} + +.p-paginator-current { + color: ${dt('paginator.current.page.report.color')}; +} + +.p-paginator-pages { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.p-paginator-page.p-paginator-page-active { + background: ${dt('highlight.background')}; + color: ${dt('highlight.color')}; +} + +.p-paginator-jtp-input .p-inputtext { + max-width: 2.5rem; +} +`; + const classes = { paginator: ({ instance, key }) => [ 'p-paginator p-component', @@ -53,5 +128,6 @@ const classes = { export default BaseStyle.extend({ name: 'paginator', + theme, classes }); diff --git a/components/lib/panel/style/PanelStyle.js b/components/lib/panel/style/PanelStyle.js index 430c4b82a..b6b33dc6c 100644 --- a/components/lib/panel/style/PanelStyle.js +++ b/components/lib/panel/style/PanelStyle.js @@ -1,5 +1,38 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-panel { + border: 1px solid ${dt('panel.border.color')}; + border-radius: ${dt('rounded.base')}; + background: ${dt('panel.background')}; + color: ${dt('panel.color')}; +} + +.p-panel-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.125rem; +} + +.p-panel-toggleable .p-panel-header { + padding: 0.75rem 1.125rem; +} + +.p-panel-title { + line-height: 1; + font-weight: 600; +} + +.p-panel-content { + padding: 0 1.125rem 1.125rem 1.125rem; +} + +.p-panel-footer { + padding: 0 1.125rem 1.125rem 1.125rem; +} +`; + const classes = { root: ({ props }) => [ 'p-panel p-component', @@ -18,5 +51,6 @@ const classes = { export default BaseStyle.extend({ name: 'panel', + theme, classes }); diff --git a/components/lib/panelmenu/style/PanelMenuStyle.js b/components/lib/panelmenu/style/PanelMenuStyle.js index 673195f19..b61c20480 100644 --- a/components/lib/panelmenu/style/PanelMenuStyle.js +++ b/components/lib/panelmenu/style/PanelMenuStyle.js @@ -1,5 +1,133 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-panelmenu { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.p-panelmenu-panel { + background: ${dt('panelmenu.panel.background')}; + border: 1px solid ${dt('panelmenu.panel.border.color')}; + color: ${dt('panelmenu.panel.color')}; + border-radius: ${dt('rounded.base')}; + padding: 0.25rem 0.25rem; +} + +.p-panelmenu-header { + outline: 0 none; + border: 0 none; +} + +.p-panelmenu-header-content { + border: 0 none; + color: ${dt('panelmenu.item.color')}; + border-radius: ${dt('rounded.base')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-panelmenu-header-link { + display: flex; + gap: 0.5rem; + align-items: center; + user-select: none; + cursor: pointer; + position: relative; + text-decoration: none; + color: inherit; + padding: 0.5rem 0.75rem; + font-weight: 600; +} + +.p-panelmenu-header-icon, +.p-panelmenu-item-icon, +.p-panelmenu-submenu-icon { + color: ${dt('panelmenu.item.icon.color')}; +} + +.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { + background: ${dt('panelmenu.item.focus.background')}; + color: ${dt('panelmenu.item.focus.color')}; +} + +.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon, +.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon { + color: ${dt('panelmenu.item.icon.focus.color')}; +} + +.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover { + background: ${dt('panelmenu.item.focus.background')}; + color: ${dt('panelmenu.item.focus.color')}; +} + +.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon, +.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon { + color: ${dt('panelmenu.item.icon.focus.color')}; +} + +.p-panelmenu .p-panelmenu-item { + margin: 2px 0; +} + +.p-panelmenu .p-panelmenu-item:first-child { + margin-top: 0; +} + +.p-panelmenu .p-panelmenu-item:last-child { + margin-bottom: 0; +} + +.p-panelmenu-submenu { + margin: 4px 0 0 0; + padding: 0 0 0 1rem; + list-style: none; +} + +.p-panelmenu-item-link { + display: flex; + gap: 0.5rem; + align-items: center; + user-select: none; + cursor: pointer; + text-decoration: none; + color: inherit; + position: relative; + overflow: hidden; + padding: 0.5rem 0.75rem; +} + +.p-panelmenu-item-label { + line-height: 1; +} + +.p-panelmenu-item-content { + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; + color: ${dt('panelmenu.item.color')}; +} + +.p-panelmenu-item.p-focus > .p-panelmenu-item-content { + background: ${dt('panelmenu.item.focus.background')}; + color: ${dt('panelmenu.item.focus.color')}; +} + +.p-panelmenu-item.p-focus > .p-panelmenu-item-icon { + color: ${dt('panelmenu.item.focus.color')}; +} + +.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover { + background: ${dt('panelmenu.item.focus.background')}; + color: ${dt('panelmenu.item.focus.color')}; +} + +.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon, +.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon { + color: ${dt('panelmenu.item.icon.focus.color')}; +} +`; + const classes = { root: 'p-panelmenu p-component', panel: 'p-panelmenu-panel', @@ -35,5 +163,6 @@ const classes = { export default BaseStyle.extend({ name: 'panelmenu', + theme, classes }); diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js index 153202513..842f84f6f 100644 --- a/components/lib/password/style/PasswordStyle.js +++ b/components/lib/password/style/PasswordStyle.js @@ -1,5 +1,74 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-password { + display: inline-flex; + position: relative; +} + +.p-password .p-password-overlay { + min-width: 100%; +} + +.p-password-meter { + height: 10px; + margin-bottom: 0.75rem; + background: ${dt('password.meter.border.color')}; + border-radius: ${dt('rounded.base')}; +} + +.p-password-meter-value { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + border-radius: ${dt('rounded.base')}; +} + +.p-password-meter-weak { + background: ${dt('password.strength.weak.background')}; +} + +.p-password-meter-medium { + background: ${dt('password.strength.medium.background')}; +} + +.p-password-meter-strong { + background: ${dt('password.strength.strong.background')}; +} + +.p-fluid .p-password { + display: flex; +} + +.p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; +} + +.p-password-overlay { + padding: 0.75rem; + background: ${dt('password.overlay.background')}; + color: ${dt('password.overlay.color')}; + border: 1px solid ${dt('password.overlay.border.color')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: ${dt('rounded.base')}; +} + +.p-password-toggle-mask-icon { + right: 0.75rem; + color: ${dt('password.icon.color')}; + position: absolute; + top: 50%; + margin-top: -0.5rem; + width: 1rem; + height: 1rem; +} + +.p-password:has(.p-password-toggle-mask-icon) .p-password-input { + padding-right: 2.5rem; +} +`; + const inlineStyles = { root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined }) }; @@ -28,6 +97,7 @@ const classes = { export default BaseStyle.extend({ name: 'password', + theme, classes, inlineStyles }); diff --git a/components/lib/picklist/style/PickListStyle.js b/components/lib/picklist/style/PickListStyle.js index 5872e0a21..6467ff6e0 100644 --- a/components/lib/picklist/style/PickListStyle.js +++ b/components/lib/picklist/style/PickListStyle.js @@ -1,5 +1,27 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-picklist { + display: flex; + gap: 1.125rem; +} + +.p-picklist-controls { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.5rem; +} + +.p-picklist-list-container { + flex: 1 1 50%; +} + +.p-picklist .p-listbox { + height: 100%; +} +`; + const classes = { root: 'p-picklist p-component', sourceControls: 'p-picklist-controls p-picklist-source-controls', @@ -11,5 +33,6 @@ const classes = { export default BaseStyle.extend({ name: 'picklist', + theme, classes }); diff --git a/components/lib/popover/style/PopoverStyle.js b/components/lib/popover/style/PopoverStyle.js index 8a2a66815..978c71a49 100644 --- a/components/lib/popover/style/PopoverStyle.js +++ b/components/lib/popover/style/PopoverStyle.js @@ -1,5 +1,85 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-popover { + margin-top: 10px; + background: ${dt('popover.background')}; + color: ${dt('popover.color')}; + border: 1px solid ${dt('popover.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-popover-content { + padding: 0.75rem; +} + +.p-popover-flipped { + margin-top: 0; + margin-bottom: 10px; +} + +.p-popover-enter-from { + opacity: 0; + transform: scaleY(0.8); +} + +.p-popover-leave-to { + opacity: 0; +} + +.p-popover-enter-active { + transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); +} + +.p-popover-leave-active { + transition: opacity 0.1s linear; +} + +.p-popover:after, +.p-popover:before { + bottom: 100%; + left: ${dt('{overlay.arrow.left} + 1.25rem', 0)}; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; +} + +.p-popover:after { + border-width: 8px; + margin-left: -8px; + border-style: solid; + border-color: transparent; + border-bottom-color: ${dt('popover.background')}; +} + +.p-popover:before { + border-width: 10px; + margin-left: -10px; + border-style: solid; + border-color: transparent; + border-bottom-color: ${dt('popover.border.color')}; +} + +.p-popover-flipped:after, +.p-popover-flipped:before { + bottom: auto; + top: 100%; +} + +.p-popover.p-popover-flipped:after { + border-bottom-color: transparent; + border-top-color: ${dt('popover.background')}; +} + +.p-popover.p-popover-flipped:before { + border-bottom-color: transparent; + border-top-color: ${dt('popover.border.color')}; +} +`; + const classes = { root: ({ instance }) => [ 'p-popover p-component', @@ -12,5 +92,6 @@ const classes = { export default BaseStyle.extend({ name: 'popover', + theme, classes }); diff --git a/components/lib/progressspinner/style/ProgressSpinnerStyle.js b/components/lib/progressspinner/style/ProgressSpinnerStyle.js index 0bd653a9d..b407a0402 100644 --- a/components/lib/progressspinner/style/ProgressSpinnerStyle.js +++ b/components/lib/progressspinner/style/ProgressSpinnerStyle.js @@ -1,5 +1,78 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-progressspinner { + position: relative; + margin: 0 auto; + width: 100px; + height: 100px; + display: inline-block; +} + +.p-progressspinner::before { + content: ""; + display: block; + padding-top: 100%; +} + +.p-progressspinner-spin { + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + animation: p-progressspinner-rotate 2s linear infinite; +} + +.p-progressspinner-circle { + stroke-dasharray: 89, 200; + stroke-dashoffset: 0; + stroke: ${dt('progressspinner.color-1')}; + animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes p-progressspinner-rotate { + 100% { + transform: rotate(360deg); + } +} +@keyframes p-progressspinner-dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} +@keyframes p-progressspinner-color { + 100%, + 0% { + stroke: ${dt('progressspinner.color-1')}; + } + 40% { + stroke: ${dt('progressspinner.color-2')}; + } + 66% { + stroke: ${dt('progressspinner.color-3')}; + } + 80%, + 90% { + stroke: ${dt('progressspinner.color-4')}; + } +} +`; + const classes = { root: 'p-progressspinner', spin: 'p-progressspinner-spin', @@ -8,5 +81,6 @@ const classes = { export default BaseStyle.extend({ name: 'progressspinner', + theme, classes }); diff --git a/components/lib/radiobutton/style/RadioButtonStyle.js b/components/lib/radiobutton/style/RadioButtonStyle.js index 7150218a1..c5671986c 100644 --- a/components/lib/radiobutton/style/RadioButtonStyle.js +++ b/components/lib/radiobutton/style/RadioButtonStyle.js @@ -1,5 +1,115 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + width: ${dt('radiobutton.width')}; + height: ${dt('radiobutton.height')}; +} + +.p-radiobutton-input { + cursor: pointer; + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border: 1px solid transparent; + border-radius: 50%; +} + +.p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + border: 1px solid ${dt('radiobutton.border.color')}; + background: ${dt('radiobutton.background')}; + width: ${dt('radiobutton.width')}; + height: ${dt('radiobutton.height')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + box-shadow: ${dt('radiobutton.box.shadow')}; +} + +.p-radiobutton-icon { + transition-duration: ${dt('transition.duration')}; + background: transparent; + font-size: ${dt('radiobutton.icon.size')}; + width: ${dt('radiobutton.icon.size')}; + height: ${dt('radiobutton.icon.size')}; + border-radius: 50%; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: ${dt('radiobutton.hover.border.color')}; +} + +.p-radiobutton.p-radiobutton-checked .p-radiobutton-box { + border-color: ${dt('radiobutton.checked.border.color')}; + background: ${dt('radiobutton.checked.background')}; +} + +.p-radiobutton.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { + background: ${dt('radiobutton.icon.checked.color')}; + transform: translateZ(0) scale(1, 1); + visibility: visible; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box { + border-color: ${dt('radiobutton.checked.hover.border.color')}; + background: ${dt('radiobutton.checked.hover.background')}; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { + background: ${dt('radiobutton.icon.checked.hover.color')}; +} + +.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-radiobutton.p-invalid > .p-radiobutton-box { + border-color: ${dt('radiobutton.invalid.border.color')}; +} + +.p-radiobutton.p-variant-filled .p-radiobutton-box { + background: ${dt('radiobutton.filled.background')}; +} + +.p-radiobutton.p-variant-filled.p-radiobutton-checked .p-radiobutton-box { + background: ${dt('radiobutton.checked.background')}; +} + +.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box { + background: ${dt('radiobutton.checked.hover.background')}; +} + +.p-radiobutton.p-disabled { + opacity: 1; +} + +.p-radiobutton.p-disabled .p-radiobutton-box { + background: ${dt('radiobutton.disabled.background')}; +} + +.p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { + color: ${dt('radiobutton.icon.disabled.color')}; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-radiobutton p-component', @@ -17,5 +127,6 @@ const classes = { export default BaseStyle.extend({ name: 'radiobutton', + theme, classes }); diff --git a/components/lib/rating/style/RatingStyle.js b/components/lib/rating/style/RatingStyle.js index c62ff25f4..2809a241d 100644 --- a/components/lib/rating/style/RatingStyle.js +++ b/components/lib/rating/style/RatingStyle.js @@ -1,5 +1,44 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-rating { + position: relative; + display: flex; + align-items: center; + gap: 0.25rem; +} + +.p-rating-option { + display: inline-flex; + align-items: center; + cursor: pointer; + outline-color: transparent; + border-radius: 50%; + cursor: pointer; +} + +.p-rating-option.p-focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-rating-icon { + color: ${dt('rating.icon.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + font-size: 1rem; + width: 1rem; + height: 1rem; +} + +.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon { + color: ${dt('rating.icon.hover.color')}; +} + +.p-rating-option-active .p-rating-icon { + color: ${dt('rating.icon.active.color')}; +} +`; + const classes = { root: ({ props }) => [ 'p-rating', @@ -21,5 +60,6 @@ const classes = { export default BaseStyle.extend({ name: 'rating', + theme, classes }); diff --git a/components/lib/scrollpanel/style/ScrollPanelStyle.js b/components/lib/scrollpanel/style/ScrollPanelStyle.js index 99e9cc425..a0b73591a 100644 --- a/components/lib/scrollpanel/style/ScrollPanelStyle.js +++ b/components/lib/scrollpanel/style/ScrollPanelStyle.js @@ -1,5 +1,71 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-scrollpanel-content-container { + overflow: hidden; + width: 100%; + height: 100%; + position: relative; + z-index: 1; + float: left; +} + +.p-scrollpanel-content { + height: calc(100% + 18px); + width: calc(100% + 18px); + padding: 0 18px 18px 0; + position: relative; + overflow: auto; + box-sizing: border-box; + scrollbar-width: none; +} + +.p-scrollpanel-content::-webkit-scrollbar { + display: none; +} + +.p-scrollpanel-bar { + position: relative; + border-radius: 3px; + z-index: 2; + cursor: pointer; + opacity: 0; + outline-color: transparent; + transition: outline-color ${dt('transition.duration')}; + background: ${dt('scrollpanel.bar.background')}; + border: 0 none; + transition: outline-color ${dt('transition.duration')}, opacity ${dt('transition.duration')}; +} + +.p-scrollpanel-bar:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-scrollpanel-bar-y { + width: 9px; + top: 0; +} + +.p-scrollpanel-bar-x { + height: 9px; + bottom: 0; +} + +.p-scrollpanel-hidden { + visibility: hidden; +} + +.p-scrollpanel:hover .p-scrollpanel-bar, +.p-scrollpanel:active .p-scrollpanel-bar { + opacity: 1; +} + +.p-scrollpanel-grabbed { + user-select: none; +} +`; + const classes = { root: 'p-scrollpanel p-component', contentContainer: 'p-scrollpanel-content-container', @@ -10,5 +76,6 @@ const classes = { export default BaseStyle.extend({ name: 'scrollpanel', + theme, classes }); diff --git a/components/lib/scrolltop/style/ScrollTopStyle.js b/components/lib/scrolltop/style/ScrollTopStyle.js index 8ce06d3ac..c6455366d 100644 --- a/components/lib/scrolltop/style/ScrollTopStyle.js +++ b/components/lib/scrolltop/style/ScrollTopStyle.js @@ -1,5 +1,62 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-scrolltop { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + align-items: center; + justify-content: center; + background: ${dt('scrolltop.background')}; + color: ${dt('scrolltop.color')}; +} + +.p-scrolltop:hover { + background: ${dt('scrolltop.hover.background')}; + color: ${dt('scrolltop.hover.text')}; +} + +.p-scrolltop-icon { + font-size: 1.5rem; + width: 1.5rem; + height: 1.5rem; +} + +.p-scrolltop-sticky { + position: sticky; +} + +.p-scrolltop-sticky { + margin-left: auto; +} + +.p-scrolltop-enter-from { + opacity: 0; +} + +.p-scrolltop-enter-active { + transition: opacity 0.15s; +} + +.p-scrolltop.p-scrolltop-leave-to { + opacity: 0; +} + +.p-scrolltop-leave-active { + transition: opacity 0.15s; +} + +.p-scrolltop { + width: 3rem; + height: 3rem; + border-radius: 50%; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} +`; + const classes = { root: ({ props }) => ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': props.target !== 'window' }], icon: 'p-scrolltop-icon' @@ -7,5 +64,6 @@ const classes = { export default BaseStyle.extend({ name: 'scrolltop', + theme, classes }); diff --git a/components/lib/select/style/SelectStyle.js b/components/lib/select/style/SelectStyle.js index 9112aeba3..7ca8a4320 100644 --- a/components/lib/select/style/SelectStyle.js +++ b/components/lib/select/style/SelectStyle.js @@ -1,5 +1,219 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-select { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + background: ${dt('select.background')}; + border: 1px solid ${dt('select.border.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + box-shadow: ${dt('select.box.shadow')}; +} + +.p-select:not(.p-disabled):hover { + border-color: ${dt('select.hover.border.color')}; +} + +.p-select:not(.p-disabled).p-focus { + border-color:${dt('select.focus.border.color')}; + outline: 0 none; +} + +.p-select.p-variant-filled { + background: ${dt('select.filled.background')}; +} + +.p-select.p-variant-filled.p-focus { + background: ${dt('select.filled.focus.background')}; +} + +.p-select.p-invalid { + border-color: ${dt('select.invalid.border.color')}; +} + +.p-select.p-disabled { + opacity: 1; + background: ${dt('select.disabled.background')}; +} + +.p-select-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + color: #94a3b8; + right: 2.5rem; +} + +.p-select-dropdown { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + background: transparent; + color: ${dt('select.toggle.color')}; + width: 2.5rem; + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; +} + +.p-select-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + padding: 0.5rem 0.75rem; + text-overflow: ellipsis; + cursor: pointer; + color: ${dt('select.color')}; + background: transparent; + border: 0 none; + outline: 0 none; +} + +.p-select-label.p-placeholder { + color: ${dt('select.placeholder.color')}; +} + +.p-select:has(.p-select-clear-icon) .p-select-label { + padding-right: 1.75rem; +} + +.p-select.p-disabled .p-select-label { + color: ${dt('select.disabled.color')}; +} + +.p-select-label-empty { + overflow: hidden; + opacity: 0; +} + +input.p-select-label { + cursor: default; +} + +.p-select .p-select-overlay { + min-width: 100%; +} + +.p-select-overlay { + position: absolute; + top: 0; + left: 0; + background: ${dt('select.overlay.background')}; + color: ${dt('select.overlay.color')}; + border: 1px solid ${dt('select.overlay.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-select-header { + padding: 0.5rem 0.5rem 0 0.5rem; +} + +.p-select-filter { + width: 100%; + padding-right: 1.75rem; + margin-right: -1.75rem; +} + +.p-select-filter-container { + position: relative; +} + +.p-select-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + right: 0.75rem; + color: ${dt('select.filter.icon.color')}; +} + +.p-select-list-container { + overflow: auto; +} + +.p-select-option-group { + cursor: auto; + margin: 0; + padding: 0.5rem 0.75rem; + background: ${dt('select.item.group.background')}; + color: ${dt('select.item.group.color')}; + font-weight: 600; +} + +.p-select-list { + margin: 0; + padding: 0; + list-style-type: none; + padding: 0.25rem 0.25rem; +} + +.p-select-option { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + margin: 2px 0; + padding: 0.5rem 0.75rem; + border: 0 none; + color: ${dt('select.item.color')}; + background: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; +} + +.p-select-option:first-child { + margin-top: 0; +} + +.p-select-option:last-child { + margin-bottom: 0; +} + +.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus { + background: ${dt('select.item.focus.background')}; + color: ${dt('select.item.focus.color')}; +} + +.p-select-option.p-select-option-selected { + background: ${dt('select.item.selected.background')}; + color: ${dt('select.item.selected.color')}; +} + +.p-select-option.p-select-option-selected.p-focus { + background: ${dt('select.item.selected.focus.background')}; + color: ${dt('select.item.selected.focus.color')}; +} + +.p-select-option-check-icon { + position: relative; + margin-left: -0.375rem; + margin-right: 0.375rem; + color: ${dt('select.checkmark.color')}; +} + +.p-select-empty-message { + padding: 0.5rem 0.75rem; + background: transparent; +} + +.p-fluid .p-select { + display: flex; +} + +.p-fluid .p-select .p-select-label { + width: 1%; +} +`; + const classes = { root: ({ instance, props, state }) => [ 'p-select p-component p-inputwrapper', @@ -54,5 +268,6 @@ const classes = { export default BaseStyle.extend({ name: 'select', + theme, classes }); diff --git a/components/lib/selectbutton/style/SelectButtonStyle.js b/components/lib/selectbutton/style/SelectButtonStyle.js index 526a2f09c..af6092e56 100644 --- a/components/lib/selectbutton/style/SelectButtonStyle.js +++ b/components/lib/selectbutton/style/SelectButtonStyle.js @@ -1,5 +1,39 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-selectbutton { + display: inline-flex; + user-select: none; + vertical-align: bottom; + outline-color: transparent; + border-radius: ${dt('rounded.base')}; +} + +.p-selectbutton .p-togglebutton { + border-radius: 0; +} + +.p-selectbutton .p-togglebutton:focus-visible { + position: relative; + z-index: 1; +} + +.p-selectbutton .p-togglebutton:first-child { + border-top-left-radius: ${dt('rounded.base')}; + border-bottom-left-radius: ${dt('rounded.base')}; +} + +.p-selectbutton .p-togglebutton:last-child { + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; +} + +.p-selectbutton.p-invalid { + outline: 1px solid ${dt('selectbutton.invalid.border.color')}; + outline-offset: 0; +} +`; + const classes = { root: ({ props }) => [ 'p-selectbutton p-component', @@ -11,5 +45,6 @@ const classes = { export default BaseStyle.extend({ name: 'selectbutton', + theme, classes }); diff --git a/components/lib/skeleton/style/SkeletonStyle.js b/components/lib/skeleton/style/SkeletonStyle.js index 3cb1f090d..4bb0804ce 100644 --- a/components/lib/skeleton/style/SkeletonStyle.js +++ b/components/lib/skeleton/style/SkeletonStyle.js @@ -1,5 +1,43 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-skeleton { + overflow: hidden; + background-color: ${dt('skeleton.background')}; + border-radius: ${dt('rounded.base')}; +} + +.p-skeleton::after { + content: ""; + animation: p-skeleton-animation 1.2s infinite; + height: 100%; + left: 0; + position: absolute; + right: 0; + top: 0; + transform: translateX(-100%); + z-index: 1; + background: linear-gradient( 90deg, rgba(255, 255, 255, 0), ${dt('skeleton.animation.background')}, rgba(255, 255, 255, 0) ); +} + +.p-skeleton-circle { + border-radius: 50%; +} + +.p-skeleton-animation-none::after { + animation: none; +} + +@keyframes p-skeleton-animation { + from { + transform: translateX(-100%); + } + to { + transform: translateX(100%); + } +} +`; + const inlineStyles = { root: { position: 'relative' } }; @@ -16,6 +54,7 @@ const classes = { export default BaseStyle.extend({ name: 'skeleton', + theme, classes, inlineStyles }); diff --git a/components/lib/slider/style/SliderStyle.js b/components/lib/slider/style/SliderStyle.js index c065d7c3e..8cf9af22b 100644 --- a/components/lib/slider/style/SliderStyle.js +++ b/components/lib/slider/style/SliderStyle.js @@ -1,5 +1,87 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-slider { + position: relative; + background: ${dt('slider.track.background')}; + border-radius: ${dt('rounded.base')}; +} + +.p-slider-handle { + cursor: grab; + touch-action: none; + display: flex; + justify-content: center; + align-items: center; + height: 20px; + width: 20px; + background: ${dt('slider.handle.background')}; + border: 0 none; + border-radius: 50%; + transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-slider-handle::before { + content: ""; + width: 16px; + height: 16px; + display: block; + background-color: ${dt('slider.handle.content.background')}; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); +} + +.p-slider:not(.p-disabled) .p-slider-handle:hover { + background: ${dt('slider.handle.hover.background')}; + border-color: transparent; +} + +.p-slider-handle:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: 0; +} + +.p-slider-range { + display: block; + background: ${dt('slider.range.background')}; + border-radius: ${dt('rounded.base')}; +} + +.p-slider.p-slider-horizontal { + height: 3px; +} + +.p-slider-horizontal .p-slider-range { + top: 0; + left: 0; + height: 100%; +} + +.p-slider-horizontal .p-slider-handle { + top: 50%; + margin-top: -10px; + margin-left: -10px; +} + +.p-slider-vertical { + height: 100px; + width: 3px; +} + +.p-slider-vertical .p-slider-handle { + left: 50%; + margin-left: -10px; + margin-bottom: -10px; +} + +.p-slider-vertical .p-slider-range { + bottom: 0; + left: 0; + width: 100%; +} +`; + const inlineStyles = { handle: { position: 'absolute' }, range: { position: 'absolute' } @@ -20,6 +102,7 @@ const classes = { export default BaseStyle.extend({ name: 'slider', + theme, classes, inlineStyles }); diff --git a/components/lib/speeddial/style/SpeedDialStyle.js b/components/lib/speeddial/style/SpeedDialStyle.js index b02d71758..609caa2ba 100644 --- a/components/lib/speeddial/style/SpeedDialStyle.js +++ b/components/lib/speeddial/style/SpeedDialStyle.js @@ -1,5 +1,84 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-speeddial { + position: static; + display: flex; + gap: 0.25rem; +} + +.p-speeddial-button { + z-index: 1; + width: 2.5rem; + height: 2.5rem; +} + +.p-speeddial-button.p-speeddial-rotate { + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt( + 'transition.duration' +)}, outline-color ${dt('transition.duration')}; + will-change: transform; +} + +.p-speeddial-list { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + justify-content: center; + transition: top 0s linear ${dt('transition.duration')}; + pointer-events: none; + outline: 0 none; + z-index: 2; + gap: 0.25rem; +} + +.p-speeddial-item { + transform: scale(0); + opacity: 0; + transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; + will-change: transform; +} + +.p-speeddial-circle .p-speeddial-item, +.p-speeddial-semi-circle .p-speeddial-item, +.p-speeddial-quarter-circle .p-speeddial-item { + position: absolute; +} + +.p-speeddial-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + background-color: ${dt('mask.background')}; + border-radius: 6px; + transition: opacity 150ms; +} + +.p-speeddial-mask-visible { + pointer-events: none; + opacity: 1; + transition: opacity 150ms; +} + +.p-speeddial-open .p-speeddial-list { + pointer-events: auto; +} + +.p-speeddial-open .p-speeddial-item { + transform: scale(1); + opacity: 1; +} + +.p-speeddial-open .p-speeddial-rotate { + transform: rotate(45deg); +} +`; + /* Direction */ const inlineStyles = { root: ({ props }) => ({ @@ -41,6 +120,7 @@ const classes = { export default BaseStyle.extend({ name: 'speeddial', + theme, classes, inlineStyles }); diff --git a/components/lib/splitbutton/style/SplitButtonStyle.js b/components/lib/splitbutton/style/SplitButtonStyle.js index 5474140bc..f1acb1e94 100644 --- a/components/lib/splitbutton/style/SplitButtonStyle.js +++ b/components/lib/splitbutton/style/SplitButtonStyle.js @@ -1,5 +1,75 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-splitbutton { + display: inline-flex; + position: relative; + border-radius: ${dt('rounded.base')}; +} + +.p-splitbutton-button { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; +} + +.p-splitbutton-button:not(:disabled):hover, +.p-splitbutton-button:not(:disabled):active { + border-right: 0 none; +} + +.p-splitbutton-dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.p-splitbutton .p-menu { + min-width: 100%; +} + +.p-fluid .p-splitbutton { + display: flex; +} + +.p-splitbutton.p-button-rounded .p-splitbutton-button { + border-top-left-radius: 2rem; + border-bottom-left-radius: 2rem;; +} + +.p-splitbutton.p-button-rounded .p-splitbutton-dropdown { + border-top-right-radius: 2rem; + border-bottom-right-radius: 2rem;; +} + +.p-splitbutton.p-button-raised { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); +} + +/* +.p-splitbutton .p-splitbutton-button, +.p-splitbutton.p-button-rounded > .p-splitbutton-button.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-button.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-button.p-button-outlined.p-button:hover { + flex: 1 1 auto; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: 0 none; +} + +.p-splitbutton-dropdown, +.p-splitbutton.p-button-rounded > .p-splitbutton-dropdown.p-button, +.p-splitbutton.p-button-outlined > .p-splitbutton-dropdown.p-button { + display: flex; + align-items: center; + justify-content: center; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + + +*/ +`; + const classes = { root: 'p-splitbutton p-component', button: 'p-splitbutton-button', @@ -8,5 +78,6 @@ const classes = { export default BaseStyle.extend({ name: 'splitbutton', + theme, classes }); diff --git a/components/lib/splitter/style/SplitterStyle.js b/components/lib/splitter/style/SplitterStyle.js index c15ca7564..bfa3e37ee 100644 --- a/components/lib/splitter/style/SplitterStyle.js +++ b/components/lib/splitter/style/SplitterStyle.js @@ -1,5 +1,84 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-splitter { + display: flex; + flex-wrap: nowrap; + border: 1px solid ${dt('splitter.border.color')}; + background: ${dt('splitter.background')}; + border-radius: ${dt('rounded.base')}; + color: ${dt('splitter.color')}; +} + +.p-splitter-vertical { + flex-direction: column; +} + +.p-splitter-gutter { + flex-grow: 0; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; + background: ${dt('splitter.gutter.background')}; +} + +.p-splitter-gutter-handle { + border-radius: ${dt('rounded.base')}; + background: transparent; + transition: outline-color ${dt('transition.duration')}; + outline-color: transparent; +} + +.p-splitter-gutter-handle:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-splitter-horizontal.p-splitter-resizing { + cursor: col-resize; + user-select: none; +} + +.p-splitter-vertical.p-splitter-resizing { + cursor: row-resize; + user-select: none; +} + +.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { + height: 24px; + width: 100%; +} + +.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { + width: 24px; + height: 100%; +} + +.p-splitter-horizontal > .p-splitter-gutter { + cursor: col-resize; +} + +.p-splitter-vertical > .p-splitter-gutter { + cursor: row-resize; +} + +.p-splitter-panel { + flex-grow: 1; + overflow: hidden; +} + +.p-splitter-panel-nested { + display: flex; +} + +.p-splitter-panel .p-splitter { + flex-grow: 1; + border: 0 none; +} +`; + const classes = { root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout], gutter: 'p-splitter-gutter', @@ -12,6 +91,7 @@ const inlineStyles = { export default BaseStyle.extend({ name: 'splitter', + theme, classes, inlineStyles }); diff --git a/components/lib/stepper/style/StepperStyle.js b/components/lib/stepper/style/StepperStyle.js index decf456cb..47ac48a45 100644 --- a/components/lib/stepper/style/StepperStyle.js +++ b/components/lib/stepper/style/StepperStyle.js @@ -1,5 +1,174 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-stepper-list { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0; + padding: 0; + list-style-type: none; + overflow-x: auto; +} + +.p-stepper-item { + position: relative; + display: flex; + flex: 1 1 auto; + align-items: center; + padding: 0.5rem; +} + +.p-stepper-item:last-of-type { + flex: initial; +} + +.p-stepper-item-header { + border: 0 none; + display: inline-flex; + align-items: center; + text-decoration: none; + cursor: pointer; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + background: transparent; +} + +.p-stepper-item .p-stepper-item-header:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-stepper.p-stepper-readonly .p-stepper-item { + cursor: auto; +} + +.p-stepper-item-title { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + margin-left: 0.5rem; + color: ${dt('stepper.title.color')}; + font-weight: 500; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-stepper-item-number { + display: flex; + align-items: center; + justify-content: center; + position: relative; + color: ${dt('stepper.marker.color')}; + border: 1px solid ${dt('stepper.marker.border.color')}; + border-width: 2px; + background: ${dt('stepper.marker.background')}; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-stepper-item-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); +} + +.p-stepper-item-active .p-stepper-item-header { + cursor: default; +} + +.p-stepper-item-active .p-stepper-item-number { + background: ${dt('stepper.marker.active.background')}; + color: ${dt('stepper.marker.active.color')}; +} + +.p-stepper-item-active .p-stepper-item-title { + color: ${dt('stepper.title.active.color')}; +} + +.p-stepper-item:not(.p-disabled):focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-stepper-item:has(~ .p-stepper-item-active) .p-stepper-separator { + background: ${dt('stepper.connector.active.background')}; +} + +.p-stepper-separator { + flex: 1 1 0; + background: ${dt('stepper.connector.background')}; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-stepper-panels { + background: ${dt('stepper.content.background')}; + color: ${dt('stepper.content.color')}; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; +} + +.p-stepper-vertical .p-stepper-list { + flex-direction: column; +} + +.p-stepper-vertical { + display: flex; + flex-direction: column; +} + +.p-stepper-vertical .p-stepper-panel-content-container { + display: flex; + flex: 1 1 auto; +} + +.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; +} + +.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; +} + +.p-stepper-vertical .p-stepper-panel .p-stepper-item { + flex: initial; +} + +.p-stepper-vertical .p-stepper-panel .p-stepper-panel-content { + width: 100%; + padding-left: 1rem; +} + +.p-stepper-vertical .p-stepper-panel .p-stepper-separator { + flex: 0 0 auto; + width: 2px; + height: auto; + margin-inline-start: calc(1.75rem + 2px); +} + +.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background: ${dt('stepper.connector.active.background')}; +} + +.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-panel-content { + padding-left: 3rem; +} +`; + const classes = { root: ({ props }) => [ 'p-stepper p-component', @@ -36,5 +205,6 @@ const classes = { export default BaseStyle.extend({ name: 'stepper', + theme, classes }); diff --git a/components/lib/steps/style/StepsStyle.js b/components/lib/steps/style/StepsStyle.js index d941d38c7..aff245998 100644 --- a/components/lib/steps/style/StepsStyle.js +++ b/components/lib/steps/style/StepsStyle.js @@ -1,5 +1,121 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-steps { + position: relative; +} + +.p-steps-list { + padding: 0; + margin: 0; + list-style-type: none; + display: flex; +} + +.p-steps-item { + position: relative; + display: flex; + justify-content: center; + flex: 1 1 auto; +} + +.p-steps-item.p-disabled, +.p-steps-item.p-disabled * { + opacity: 1; + pointer-events: auto; + user-select: auto; + cursor: auto; +} + +.p-steps-item:before { + content: " "; + border-top: 2px solid ${dt('steps.connector.border.color')}; + width: 100%; + top: 50%; + left: 0; + display: block; + position: absolute; + margin-top: -1rem; + margin-top: calc(-1rem + 1px); +} + +.p-steps-item:first-child::before { + width: calc(50% + 1rem); + transform: translateX(100%); +} + +.p-steps-item:last-child::before { + width: 50%; +} + +.p-steps-item-link { + display: inline-flex; + flex-direction: column; + align-items: center; + overflow: hidden; + text-decoration: none; + transition: outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; +} + +.p-steps-item-link:not(.p-disabled):focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-steps-item-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + margin-top: 0.5rem; + color: ${dt('steps.item.color')}; + display: block; + font-weight: 500; +} + +.p-steps-item-number { + display: flex; + align-items: center; + justify-content: center; + color: ${dt('steps.marker.color')}; + border: 2px solid ${dt('steps.marker.border.color')}; + background: ${dt('steps.marker.background')}; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + z-index: 1; + border-radius: 50%; + position: relative; + font-weight: 500; +} + +.p-steps-item-number::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); +} + +.p-steps:not(.p-readonly) .p-steps-item { + cursor: pointer; +} + +.p-steps-item-active .p-steps-item-number { + background: ${dt('steps.marker.active.background')}; + color: ${dt('steps.marker.active.color')}; +} + +.p-steps-item-active .p-steps-item-label { + font-weight: 500; + color: ${dt('steps.item.active.color')}; +} +`; + const classes = { root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }], list: 'p-steps-list', @@ -17,5 +133,6 @@ const classes = { export default BaseStyle.extend({ name: 'steps', + theme, classes }); diff --git a/components/lib/styled/PrimeVueStyled.js b/components/lib/styled/PrimeVueStyled.js index 8a62e93df..9bb5f62e4 100644 --- a/components/lib/styled/PrimeVueStyled.js +++ b/components/lib/styled/PrimeVueStyled.js @@ -1,11 +1,9 @@ import * as PrimeVueConfig from 'primevue/config'; -import PrimeOne from 'primevue/themes/primeone'; -import Aura from 'primevue/themes/primeone/aura'; +import Aura from 'primevue/themes/aura'; export const defaultOptions = { ...PrimeVueConfig.defaultOptions, theme: { - base: PrimeOne, preset: Aura, options: { prefix: 'p', diff --git a/components/lib/tabmenu/style/TabMenuStyle.js b/components/lib/tabmenu/style/TabMenuStyle.js index fd584382a..07b7955e9 100644 --- a/components/lib/tabmenu/style/TabMenuStyle.js +++ b/components/lib/tabmenu/style/TabMenuStyle.js @@ -1,5 +1,78 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-tabmenu { + overflow-x: auto; +} + +.p-tabmenu-tablist { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + background: ${dt('tabmenu.nav.background')}; + border: 1px solid ${dt('tabmenu.nav.border.color')}; + border-width: 0 0 1px 0; + position: relative; +} + +.p-tabmenu-item-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + text-decoration: none; + position: relative; + overflow: hidden; + border-style: solid; + border-width: 0 0 1px 0; + border-color: transparent transparent ${dt('tabmenu.header.border.color')} transparent; + color: ${dt('tabmenu.header.color')}; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: ${dt('rounded.base')}; + border-top-left-radius: ${dt('rounded.base')}; + transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + margin: 0 0 -1px 0; + outline-color: transparent; +} + +.p-tabmenu-item-link:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-tabmenu-item-icon { + margin-right: 0.5rem; +} + +.p-tabmenu-item-label { + line-height: 1; +} +.p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-link { + color: ${dt('tabmenu.header.hover.color')}; +} + +.p-tabmenu-item-active .p-tabmenu-item-link { + color: ${dt('tabmenu.header.active.border.color')}; +} + +.p-tabmenu-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: ${dt('tabmenu.header.active.border.color')}; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); +} + +.p-tabmenu::-webkit-scrollbar { + display: none; +} +`; + const classes = { root: 'p-tabmenu p-component', tablist: 'p-tabmenu-tablist', @@ -18,5 +91,6 @@ const classes = { export default BaseStyle.extend({ name: 'tabmenu', + theme, classes }); diff --git a/components/lib/tabs/style/TabsStyle.js b/components/lib/tabs/style/TabsStyle.js index bdce6ce21..6137d234b 100644 --- a/components/lib/tabs/style/TabsStyle.js +++ b/components/lib/tabs/style/TabsStyle.js @@ -1,5 +1,124 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-tabs { + display: flex; + flex-direction: column; +} + +.p-tablist { + position: relative; +} + +.p-tabs-scrollable > .p-tablist { + overflow: hidden; +} + +.p-tablist-viewport { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; +} + +.p-tablist-viewport::-webkit-scrollbar { + display: none; +} + +.p-tablist-tab-list { + position: relative; + display: flex; + background: ${dt('tabs.nav.background')}; + border: 1px solid ${dt('tabs.nav.border.color')}; + border-width: 0 0 1px 0; +} + +.p-tablist-prev-button, +.p-tablist-next-button { + all: unset; + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: ${dt('tabs.navigator.icon.background')}; + color: ${dt('tabs.navigator.icon.color')}; + width: 2.5rem; + transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + box-shadow: ${dt('tabs.navigator.icon.box.shadow')}; + cursor: pointer; +} + +.p-tablist-prev-button:focus-visible, +.p-tablist-next-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-tablist-prev-button:hover, +.p-tablist-next-button:hover { + color: ${dt('tabs.navigator.icon.hover.color')}; +} + +.p-tablist-prev-button { + left: 0; +} + +.p-tablist-next-button { + right: 0; +} + +.p-tab { + cursor: pointer; + border-style: solid; + border-width: 0 0 1px 0; + border-color: transparent transparent ${dt('tabs.header.border.color')} transparent; + color: ${dt('tabs.header.color')}; + background: ${dt('tabs.nav.background')}; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: ${dt('rounded.base')}; + border-top-left-radius: ${dt('rounded.base')}; + transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + margin: 0 0 -1px 0; + outline-color: transparent; + line-height: 1; + white-space: nowrap; +} + +.p-tab:not(.p-disabled):focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-tab:not(.p-tab-active):not(.p-disabled):hover { + color: ${dt('tabs.header.hover.color')}; +} + +.p-tab-active { + color: ${dt('tabs.header.active.color')}; +} + +.p-tabpanels { + background: ${dt('tabs.navigator.content.background')}; + color: ${dt('tabs.navigator.content.color')}; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; +} + +.p-tablist-active-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: ${dt('tabs.header.active.border.color')}; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); +} +`; + const classes = { root: ({ props }) => [ 'p-tabs p-component', @@ -11,5 +130,6 @@ const classes = { export default BaseStyle.extend({ name: 'tabs', + theme, classes }); diff --git a/components/lib/tabview/style/TabViewStyle.js b/components/lib/tabview/style/TabViewStyle.js index b20ea5688..21908c285 100644 --- a/components/lib/tabview/style/TabViewStyle.js +++ b/components/lib/tabview/style/TabViewStyle.js @@ -1,5 +1,136 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-tabview-tablist-container { + position: relative; +} + +.p-tabview-scrollable > .p-tabview-tablist-container { + overflow: hidden; +} + +.p-tabview-tablist-scroll-container { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; +} + +.p-tabview-tablist-scroll-container::-webkit-scrollbar { + display: none; +} + +.p-tabview-tablist { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + background: ${dt('tabview.nav.background')}; + border: 1px solid ${dt('tabview.nav.border.color')}; + border-width: 0 0 1px 0; + position: relative; +} + +.p-tabview-tab-header { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + text-decoration: none; + position: relative; + overflow: hidden; + border-style: solid; + border-width: 0 0 1px 0; + border-color: transparent transparent ${dt('tabview.header.border.color')} transparent; + color: ${dt('tabview.header.color')}; + padding: 1rem 1.125rem; + font-weight: 600; + border-top-right-radius: ${dt('rounded.base')}; + border-top-left-radius: ${dt('rounded.base')}; + transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + margin: 0 0 -1px 0; + outline-color: transparent; +} + +.p-tabview-tablist-item:not(.p-disabled) .p-tabview-tab-header:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-tabview-tablist-item:not(.p-highlight):not(.p-disabled):hover > .p-tabview-tab-header { + color: ${dt('tabview.header.hover.color')}; +} + +.p-tabview-tablist-item.p-highlight > .p-tabview-tab-header { + color: ${dt('tabview.header.active.color')}; +} + +.p-tabview-tab-title { + line-height: 1; + white-space: nowrap; +} + +.p-tabview-next-button, +.p-tabview-prev-button { + position: absolute; + top: 0; + margin: 0; + padding: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: ${dt('tabview.navigator.icon.background')}; + color: ${dt('tabview.navigator.icon.color')}; + width: 2.5rem; + border-radius: 0; + outline-color: transparent; + transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + box-shadow: ${dt('tabview.navigator.icon.box.shadow')}; + border: none; + cursor: pointer; + user-select: none; +} + +.p-tabview-next-button:focus-visible, +.p-tabview-prev-button:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-tabview-next-button:hover, +.p-tabview-prev-button:hover { + color: ${dt('tabview.navigator.icon.hover.color')}; +} + +.p-tabview-prev-button { + left: 0; +} + +.p-tabview-next-button { + right: 0; +} + +.p-tabview-panels { + background: ${dt('tabview.navigator.content.background')}; + color: ${dt('tabview.navigator.content.color')}; + padding: 0.875rem 1.125rem 1.125rem 1.125rem; +} + +.p-tabview-ink-bar { + z-index: 1; + display: block; + position: absolute; + bottom: -1px; + height: 1px; + background-color: ${dt('tabview.header.active.border.color')}; + transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); +} +`; + const classes = { root: ({ props }) => [ 'p-tabview p-component', @@ -31,5 +162,6 @@ const classes = { export default BaseStyle.extend({ name: 'tabview', + theme, classes }); diff --git a/components/lib/tag/style/TagStyle.js b/components/lib/tag/style/TagStyle.js index ec229cf41..f825d4a94 100644 --- a/components/lib/tag/style/TagStyle.js +++ b/components/lib/tag/style/TagStyle.js @@ -1,5 +1,60 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-tag { + display: inline-flex; + align-items: center; + justify-content: center; + background: ${dt('tag.primary.background')}; + color: ${dt('tag.primary.color')}; + font-size: 0.875rem; + font-weight: 700; + padding: 0.25rem 0.4rem; + border-radius: ${dt('rounded.base')}; + gap: 0.25rem; +} + +.p-tag-icon { + font-size: 0.75rem; + width: 0.75rem; + height: 0.75rem; +} + +.p-tag-rounded { + border-radius: 10rem; +} + +.p-tag-success { + background: ${dt('tag.success.background')}; + color: ${dt('tag.success.color')}; +} + +.p-tag-info { + background: ${dt('tag.info.background')}; + color: ${dt('tag.info.color')}; +} + +.p-tag-warn { + background: ${dt('tag.warn.background')}; + color: ${dt('tag.warn.color')}; +} + +.p-tag-danger { + background: ${dt('tag.danger.background')}; + color: ${dt('tag.danger.color')}; +} + +.p-tag-secondary { + background: ${dt('tag.secondary.background')}; + color: ${dt('tag.secondary.color')}; +} + +.p-tag-contrast { + background: ${dt('tag.contrast.background')}; + color: ${dt('tag.contrast.color')}; +} +`; + const classes = { root: ({ props }) => [ 'p-tag p-component', @@ -19,5 +74,6 @@ const classes = { export default BaseStyle.extend({ name: 'tag', + theme, classes }); diff --git a/components/lib/terminal/style/TerminalStyle.js b/components/lib/terminal/style/TerminalStyle.js index 71e2132f1..804c6f02b 100644 --- a/components/lib/terminal/style/TerminalStyle.js +++ b/components/lib/terminal/style/TerminalStyle.js @@ -1,5 +1,46 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-terminal { + height: 18rem; + overflow: auto; + background: ${dt('terminal.background')}; + color: ${dt('terminal.color')}; + border: 1px solid ${dt('terminal.border.color')}; + padding: 0.5rem 0.75rem; + border-radius: ${dt('rounded.base')}; +} + +.p-terminal-prompt { + display: flex; + align-items: center; +} + +.p-terminal-prompt-value { + flex: 1 1 auto; + border: 0 none; + background-color: transparent; + color: inherit; + padding: 0; + outline: 0 none; + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; +} + +.p-terminal-prompt-label { + margin-right: 0.25rem; +} + +.p-terminal-input::-ms-clear { + display: none; +} + +.p-terminal-command-response { + margin: 2px 0; +} +`; + const classes = { root: 'p-terminal p-component', welcomeMessage: 'p-terminal-welcome-message', @@ -14,5 +55,6 @@ const classes = { export default BaseStyle.extend({ name: 'terminal', + theme, classes }); diff --git a/components/lib/textarea/style/TextareaStyle.js b/components/lib/textarea/style/TextareaStyle.js index 04d96c6d4..a40968665 100644 --- a/components/lib/textarea/style/TextareaStyle.js +++ b/components/lib/textarea/style/TextareaStyle.js @@ -1,5 +1,62 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-inputtextarea { + font-family: inherit; + font-feature-settings: inherit; + font-size: 1rem; + color: ${dt('textarea.color')}; + background: ${dt('textarea.background')}; + padding: 0.5rem 0.75rem; + border: 1px solid ${dt('textarea.border.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + appearance: none; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + box-shadow: ${dt('textarea.box.shadow')}; +} + +.p-inputtextarea:enabled:hover { + border-color: ${dt('textarea.hover.border.color')}; +} + +.p-inputtextarea:enabled:focus { + border-color: ${dt('textarea.focus.border.color')}; + outline: 0 none; +} + +.p-inputtextarea.p-invalid { + border-color: ${dt('textarea.invalid.border.color')}; +} + +.p-inputtextarea.p-variant-filled { + background-color: ${dt('textarea.filled.background')}; +} + +.p-inputtextarea.p-variant-filled:enabled:focus { + background-color: ${dt('textarea.filled.focus.background')}; +} + +.p-inputtextarea:disabled { + opacity: 1; + background: ${dt('textarea.disabled.background')}; + color: ${dt('textarea.disabled.color')}; +} + +.p-inputtextarea::placeholder { + color: ${dt('textarea.placeholder.color')}; +} + +.p-fluid .p-inputtextarea { + width: 100%; +} + +.p-inputtextarea-resizable { + overflow: hidden; + resize: none; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-inputtextarea p-component', @@ -14,5 +71,6 @@ const classes = { export default BaseStyle.extend({ name: 'textarea', + theme, classes }); diff --git a/components/lib/themes/primeone/presets/aura/accordion/index.js b/components/lib/themes/aura/accordion/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/accordion/index.js rename to components/lib/themes/aura/accordion/index.js diff --git a/components/lib/themes/primeone/aura/package.json b/components/lib/themes/aura/accordion/package.json similarity index 100% rename from components/lib/themes/primeone/aura/package.json rename to components/lib/themes/aura/accordion/package.json diff --git a/components/lib/themes/primeone/presets/aura/autocomplete/index.js b/components/lib/themes/aura/autocomplete/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/autocomplete/index.js rename to components/lib/themes/aura/autocomplete/index.js diff --git a/components/lib/themes/primeone/base/accordion/package.json b/components/lib/themes/aura/autocomplete/package.json similarity index 100% rename from components/lib/themes/primeone/base/accordion/package.json rename to components/lib/themes/aura/autocomplete/package.json diff --git a/components/lib/themes/primeone/presets/aura/avatar/index.js b/components/lib/themes/aura/avatar/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/avatar/index.js rename to components/lib/themes/aura/avatar/index.js diff --git a/components/lib/themes/primeone/base/autocomplete/package.json b/components/lib/themes/aura/avatar/package.json similarity index 100% rename from components/lib/themes/primeone/base/autocomplete/package.json rename to components/lib/themes/aura/avatar/package.json diff --git a/components/lib/themes/primeone/presets/aura/badge/index.js b/components/lib/themes/aura/badge/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/badge/index.js rename to components/lib/themes/aura/badge/index.js diff --git a/components/lib/themes/primeone/base/avatar/package.json b/components/lib/themes/aura/badge/package.json similarity index 100% rename from components/lib/themes/primeone/base/avatar/package.json rename to components/lib/themes/aura/badge/package.json diff --git a/components/lib/themes/primeone/presets/aura/blockui/index.js b/components/lib/themes/aura/blockui/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/blockui/index.js rename to components/lib/themes/aura/blockui/index.js diff --git a/components/lib/themes/primeone/base/badge/package.json b/components/lib/themes/aura/blockui/package.json similarity index 100% rename from components/lib/themes/primeone/base/badge/package.json rename to components/lib/themes/aura/blockui/package.json diff --git a/components/lib/themes/primeone/presets/aura/breadcrumb/index.js b/components/lib/themes/aura/breadcrumb/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/breadcrumb/index.js rename to components/lib/themes/aura/breadcrumb/index.js diff --git a/components/lib/themes/primeone/base/blockui/package.json b/components/lib/themes/aura/breadcrumb/package.json similarity index 100% rename from components/lib/themes/primeone/base/blockui/package.json rename to components/lib/themes/aura/breadcrumb/package.json diff --git a/components/lib/themes/primeone/presets/aura/button/index.js b/components/lib/themes/aura/button/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/button/index.js rename to components/lib/themes/aura/button/index.js diff --git a/components/lib/themes/primeone/base/breadcrumb/package.json b/components/lib/themes/aura/button/package.json similarity index 100% rename from components/lib/themes/primeone/base/breadcrumb/package.json rename to components/lib/themes/aura/button/package.json diff --git a/components/lib/themes/primeone/presets/aura/buttongroup/index.js b/components/lib/themes/aura/buttongroup/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/buttongroup/index.js rename to components/lib/themes/aura/buttongroup/index.js diff --git a/components/lib/themes/primeone/base/button/package.json b/components/lib/themes/aura/buttongroup/package.json similarity index 100% rename from components/lib/themes/primeone/base/button/package.json rename to components/lib/themes/aura/buttongroup/package.json diff --git a/components/lib/themes/primeone/presets/aura/card/index.js b/components/lib/themes/aura/card/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/card/index.js rename to components/lib/themes/aura/card/index.js diff --git a/components/lib/themes/primeone/base/buttongroup/package.json b/components/lib/themes/aura/card/package.json similarity index 100% rename from components/lib/themes/primeone/base/buttongroup/package.json rename to components/lib/themes/aura/card/package.json diff --git a/components/lib/themes/primeone/presets/aura/carousel/index.js b/components/lib/themes/aura/carousel/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/carousel/index.js rename to components/lib/themes/aura/carousel/index.js diff --git a/components/lib/themes/primeone/base/card/package.json b/components/lib/themes/aura/carousel/package.json similarity index 100% rename from components/lib/themes/primeone/base/card/package.json rename to components/lib/themes/aura/carousel/package.json diff --git a/components/lib/themes/primeone/presets/aura/cascadeselect/index.js b/components/lib/themes/aura/cascadeselect/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/cascadeselect/index.js rename to components/lib/themes/aura/cascadeselect/index.js diff --git a/components/lib/themes/primeone/base/carousel/package.json b/components/lib/themes/aura/cascadeselect/package.json similarity index 100% rename from components/lib/themes/primeone/base/carousel/package.json rename to components/lib/themes/aura/cascadeselect/package.json diff --git a/components/lib/themes/primeone/presets/aura/checkbox/index.js b/components/lib/themes/aura/checkbox/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/checkbox/index.js rename to components/lib/themes/aura/checkbox/index.js diff --git a/components/lib/themes/primeone/base/cascadeselect/package.json b/components/lib/themes/aura/checkbox/package.json similarity index 100% rename from components/lib/themes/primeone/base/cascadeselect/package.json rename to components/lib/themes/aura/checkbox/package.json diff --git a/components/lib/themes/primeone/presets/aura/chip/index.js b/components/lib/themes/aura/chip/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/chip/index.js rename to components/lib/themes/aura/chip/index.js diff --git a/components/lib/themes/primeone/base/checkbox/package.json b/components/lib/themes/aura/chip/package.json similarity index 100% rename from components/lib/themes/primeone/base/checkbox/package.json rename to components/lib/themes/aura/chip/package.json diff --git a/components/lib/themes/primeone/presets/aura/colorpicker/index.js b/components/lib/themes/aura/colorpicker/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/colorpicker/index.js rename to components/lib/themes/aura/colorpicker/index.js diff --git a/components/lib/themes/primeone/base/chip/package.json b/components/lib/themes/aura/colorpicker/package.json similarity index 100% rename from components/lib/themes/primeone/base/chip/package.json rename to components/lib/themes/aura/colorpicker/package.json diff --git a/components/lib/themes/primeone/presets/aura/confirmdialog/index.js b/components/lib/themes/aura/confirmdialog/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/confirmdialog/index.js rename to components/lib/themes/aura/confirmdialog/index.js diff --git a/components/lib/themes/primeone/base/colorpicker/package.json b/components/lib/themes/aura/confirmdialog/package.json similarity index 100% rename from components/lib/themes/primeone/base/colorpicker/package.json rename to components/lib/themes/aura/confirmdialog/package.json diff --git a/components/lib/themes/primeone/presets/aura/confirmpopup/index.js b/components/lib/themes/aura/confirmpopup/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/confirmpopup/index.js rename to components/lib/themes/aura/confirmpopup/index.js diff --git a/components/lib/themes/primeone/base/confirmdialog/package.json b/components/lib/themes/aura/confirmpopup/package.json similarity index 100% rename from components/lib/themes/primeone/base/confirmdialog/package.json rename to components/lib/themes/aura/confirmpopup/package.json diff --git a/components/lib/themes/primeone/presets/aura/contextmenu/index.js b/components/lib/themes/aura/contextmenu/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/contextmenu/index.js rename to components/lib/themes/aura/contextmenu/index.js diff --git a/components/lib/themes/primeone/base/confirmpopup/package.json b/components/lib/themes/aura/contextmenu/package.json similarity index 100% rename from components/lib/themes/primeone/base/confirmpopup/package.json rename to components/lib/themes/aura/contextmenu/package.json diff --git a/components/lib/themes/primeone/presets/aura/datatable/index.js b/components/lib/themes/aura/datatable/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/datatable/index.js rename to components/lib/themes/aura/datatable/index.js diff --git a/components/lib/themes/primeone/base/contextmenu/package.json b/components/lib/themes/aura/datatable/package.json similarity index 100% rename from components/lib/themes/primeone/base/contextmenu/package.json rename to components/lib/themes/aura/datatable/package.json diff --git a/components/lib/themes/primeone/presets/aura/dataview/index.js b/components/lib/themes/aura/dataview/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/dataview/index.js rename to components/lib/themes/aura/dataview/index.js diff --git a/components/lib/themes/primeone/base/datatable/package.json b/components/lib/themes/aura/dataview/package.json similarity index 100% rename from components/lib/themes/primeone/base/datatable/package.json rename to components/lib/themes/aura/dataview/package.json diff --git a/components/lib/themes/primeone/presets/aura/datepicker/index.js b/components/lib/themes/aura/datepicker/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/datepicker/index.js rename to components/lib/themes/aura/datepicker/index.js diff --git a/components/lib/themes/primeone/base/dataview/package.json b/components/lib/themes/aura/datepicker/package.json similarity index 100% rename from components/lib/themes/primeone/base/dataview/package.json rename to components/lib/themes/aura/datepicker/package.json diff --git a/components/lib/themes/primeone/presets/aura/dialog/index.js b/components/lib/themes/aura/dialog/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/dialog/index.js rename to components/lib/themes/aura/dialog/index.js diff --git a/components/lib/themes/primeone/base/datepicker/package.json b/components/lib/themes/aura/dialog/package.json similarity index 100% rename from components/lib/themes/primeone/base/datepicker/package.json rename to components/lib/themes/aura/dialog/package.json diff --git a/components/lib/themes/primeone/presets/aura/divider/index.js b/components/lib/themes/aura/divider/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/divider/index.js rename to components/lib/themes/aura/divider/index.js diff --git a/components/lib/themes/primeone/base/dialog/package.json b/components/lib/themes/aura/divider/package.json similarity index 100% rename from components/lib/themes/primeone/base/dialog/package.json rename to components/lib/themes/aura/divider/package.json diff --git a/components/lib/themes/primeone/presets/aura/dock/index.js b/components/lib/themes/aura/dock/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/dock/index.js rename to components/lib/themes/aura/dock/index.js diff --git a/components/lib/themes/primeone/base/divider/package.json b/components/lib/themes/aura/dock/package.json similarity index 100% rename from components/lib/themes/primeone/base/divider/package.json rename to components/lib/themes/aura/dock/package.json diff --git a/components/lib/themes/primeone/presets/aura/drawer/index.js b/components/lib/themes/aura/drawer/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/drawer/index.js rename to components/lib/themes/aura/drawer/index.js diff --git a/components/lib/themes/primeone/base/dock/package.json b/components/lib/themes/aura/drawer/package.json similarity index 100% rename from components/lib/themes/primeone/base/dock/package.json rename to components/lib/themes/aura/drawer/package.json diff --git a/components/lib/themes/primeone/presets/aura/editor/index.js b/components/lib/themes/aura/editor/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/editor/index.js rename to components/lib/themes/aura/editor/index.js diff --git a/components/lib/themes/primeone/base/drawer/package.json b/components/lib/themes/aura/editor/package.json similarity index 100% rename from components/lib/themes/primeone/base/drawer/package.json rename to components/lib/themes/aura/editor/package.json diff --git a/components/lib/themes/primeone/presets/aura/fieldset/index.js b/components/lib/themes/aura/fieldset/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/fieldset/index.js rename to components/lib/themes/aura/fieldset/index.js diff --git a/components/lib/themes/primeone/base/editor/package.json b/components/lib/themes/aura/fieldset/package.json similarity index 100% rename from components/lib/themes/primeone/base/editor/package.json rename to components/lib/themes/aura/fieldset/package.json diff --git a/components/lib/themes/primeone/presets/aura/fileupload/index.js b/components/lib/themes/aura/fileupload/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/fileupload/index.js rename to components/lib/themes/aura/fileupload/index.js diff --git a/components/lib/themes/primeone/base/fieldset/package.json b/components/lib/themes/aura/fileupload/package.json similarity index 100% rename from components/lib/themes/primeone/base/fieldset/package.json rename to components/lib/themes/aura/fileupload/package.json diff --git a/components/lib/themes/primeone/presets/aura/floatlabel/index.js b/components/lib/themes/aura/floatlabel/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/floatlabel/index.js rename to components/lib/themes/aura/floatlabel/index.js diff --git a/components/lib/themes/primeone/base/fileupload/package.json b/components/lib/themes/aura/floatlabel/package.json similarity index 100% rename from components/lib/themes/primeone/base/fileupload/package.json rename to components/lib/themes/aura/floatlabel/package.json diff --git a/components/lib/themes/primeone/presets/aura/galleria/index.js b/components/lib/themes/aura/galleria/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/galleria/index.js rename to components/lib/themes/aura/galleria/index.js diff --git a/components/lib/themes/primeone/base/floatlabel/package.json b/components/lib/themes/aura/galleria/package.json similarity index 100% rename from components/lib/themes/primeone/base/floatlabel/package.json rename to components/lib/themes/aura/galleria/package.json diff --git a/components/lib/themes/primeone/presets/aura/iconfield/index.js b/components/lib/themes/aura/iconfield/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/iconfield/index.js rename to components/lib/themes/aura/iconfield/index.js diff --git a/components/lib/themes/primeone/base/galleria/package.json b/components/lib/themes/aura/iconfield/package.json similarity index 100% rename from components/lib/themes/primeone/base/galleria/package.json rename to components/lib/themes/aura/iconfield/package.json diff --git a/components/lib/themes/primeone/presets/aura/image/index.js b/components/lib/themes/aura/image/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/image/index.js rename to components/lib/themes/aura/image/index.js diff --git a/components/lib/themes/primeone/base/global/package.json b/components/lib/themes/aura/image/package.json similarity index 100% rename from components/lib/themes/primeone/base/global/package.json rename to components/lib/themes/aura/image/package.json diff --git a/components/lib/themes/primeone/presets/aura/index.js b/components/lib/themes/aura/index.js similarity index 63% rename from components/lib/themes/primeone/presets/aura/index.js rename to components/lib/themes/aura/index.js index a1c4d3625..83b7f0314 100644 --- a/components/lib/themes/primeone/presets/aura/index.js +++ b/components/lib/themes/aura/index.js @@ -1,88 +1,88 @@ -import accordion from 'primevue/themes/primeone/presets/aura/accordion'; -import autocomplete from 'primevue/themes/primeone/presets/aura/autocomplete'; -import avatar from 'primevue/themes/primeone/presets/aura/avatar'; -import badge from 'primevue/themes/primeone/presets/aura/badge'; -import blockui from 'primevue/themes/primeone/presets/aura/blockui'; -import breadcrumb from 'primevue/themes/primeone/presets/aura/breadcrumb'; -import button from 'primevue/themes/primeone/presets/aura/button'; -import buttongroup from 'primevue/themes/primeone/presets/aura/buttongroup'; -import card from 'primevue/themes/primeone/presets/aura/card'; -import carousel from 'primevue/themes/primeone/presets/aura/carousel'; -import cascadeselect from 'primevue/themes/primeone/presets/aura/cascadeselect'; -import checkbox from 'primevue/themes/primeone/presets/aura/checkbox'; -import chip from 'primevue/themes/primeone/presets/aura/chip'; -import colorpicker from 'primevue/themes/primeone/presets/aura/colorpicker'; -import confirmdialog from 'primevue/themes/primeone/presets/aura/confirmdialog'; -import confirmpopup from 'primevue/themes/primeone/presets/aura/confirmpopup'; -import contextmenu from 'primevue/themes/primeone/presets/aura/contextmenu'; -import datatable from 'primevue/themes/primeone/presets/aura/datatable'; -import dataview from 'primevue/themes/primeone/presets/aura/dataview'; -import datepicker from 'primevue/themes/primeone/presets/aura/datepicker'; -import dialog from 'primevue/themes/primeone/presets/aura/dialog'; -import divider from 'primevue/themes/primeone/presets/aura/divider'; -import dock from 'primevue/themes/primeone/presets/aura/dock'; -import drawer from 'primevue/themes/primeone/presets/aura/drawer'; -import editor from 'primevue/themes/primeone/presets/aura/editor'; -import fieldset from 'primevue/themes/primeone/presets/aura/fieldset'; -import fileupload from 'primevue/themes/primeone/presets/aura/fileupload'; -import floatlabel from 'primevue/themes/primeone/presets/aura/floatlabel'; -import galleria from 'primevue/themes/primeone/presets/aura/galleria'; -import iconfield from 'primevue/themes/primeone/presets/aura/iconfield'; -import image from 'primevue/themes/primeone/presets/aura/image'; -import inlinemessage from 'primevue/themes/primeone/presets/aura/inlinemessage'; -import inplace from 'primevue/themes/primeone/presets/aura/inplace'; -import inputchips from 'primevue/themes/primeone/presets/aura/inputchips'; -import inputgroup from 'primevue/themes/primeone/presets/aura/inputgroup'; -import inputnumber from 'primevue/themes/primeone/presets/aura/inputnumber'; -import inputotp from 'primevue/themes/primeone/presets/aura/inputotp'; -import inputtext from 'primevue/themes/primeone/presets/aura/inputtext'; -import knob from 'primevue/themes/primeone/presets/aura/knob'; -import listbox from 'primevue/themes/primeone/presets/aura/listbox'; -import megamenu from 'primevue/themes/primeone/presets/aura/megamenu'; -import menu from 'primevue/themes/primeone/presets/aura/menu'; -import menubar from 'primevue/themes/primeone/presets/aura/menubar'; -import message from 'primevue/themes/primeone/presets/aura/message'; -import metergroup from 'primevue/themes/primeone/presets/aura/metergroup'; -import multiselect from 'primevue/themes/primeone/presets/aura/multiselect'; -import orderlist from 'primevue/themes/primeone/presets/aura/orderlist'; -import organizationchart from 'primevue/themes/primeone/presets/aura/organizationchart'; -import paginator from 'primevue/themes/primeone/presets/aura/paginator'; -import panel from 'primevue/themes/primeone/presets/aura/panel'; -import panelmenu from 'primevue/themes/primeone/presets/aura/panelmenu'; -import password from 'primevue/themes/primeone/presets/aura/password'; -import picklist from 'primevue/themes/primeone/presets/aura/picklist'; -import popover from 'primevue/themes/primeone/presets/aura/popover'; -import progressbar from 'primevue/themes/primeone/presets/aura/progressbar'; -import progressspinner from 'primevue/themes/primeone/presets/aura/progressspinner'; -import radiobutton from 'primevue/themes/primeone/presets/aura/radiobutton'; -import rating from 'primevue/themes/primeone/presets/aura/rating'; -import scrollpanel from 'primevue/themes/primeone/presets/aura/scrollpanel'; -import scrolltop from 'primevue/themes/primeone/presets/aura/scrolltop'; -import select from 'primevue/themes/primeone/presets/aura/select'; -import selectbutton from 'primevue/themes/primeone/presets/aura/selectbutton'; -import skeleton from 'primevue/themes/primeone/presets/aura/skeleton'; -import slider from 'primevue/themes/primeone/presets/aura/slider'; -import speeddial from 'primevue/themes/primeone/presets/aura/speeddial'; -import splitbutton from 'primevue/themes/primeone/presets/aura/splitbutton'; -import splitter from 'primevue/themes/primeone/presets/aura/splitter'; -import stepper from 'primevue/themes/primeone/presets/aura/stepper'; -import steps from 'primevue/themes/primeone/presets/aura/steps'; -import tabmenu from 'primevue/themes/primeone/presets/aura/tabmenu'; -import tabs from 'primevue/themes/primeone/presets/aura/tabs'; -import tabview from 'primevue/themes/primeone/presets/aura/tabview'; -import tag from 'primevue/themes/primeone/presets/aura/tag'; -import terminal from 'primevue/themes/primeone/presets/aura/terminal'; -import textarea from 'primevue/themes/primeone/presets/aura/textarea'; -import tieredmenu from 'primevue/themes/primeone/presets/aura/tieredmenu'; -import timeline from 'primevue/themes/primeone/presets/aura/timeline'; -import toast from 'primevue/themes/primeone/presets/aura/toast'; -import togglebutton from 'primevue/themes/primeone/presets/aura/togglebutton'; -import toggleswitch from 'primevue/themes/primeone/presets/aura/toggleswitch'; -import toolbar from 'primevue/themes/primeone/presets/aura/toolbar'; -import tooltip from 'primevue/themes/primeone/presets/aura/tooltip'; -import tree from 'primevue/themes/primeone/presets/aura/tree'; -import treeselect from 'primevue/themes/primeone/presets/aura/treeselect'; -import treetable from 'primevue/themes/primeone/presets/aura/treetable'; +import accordion from 'primevue/themes/aura/accordion'; +import autocomplete from 'primevue/themes/aura/autocomplete'; +import avatar from 'primevue/themes/aura/avatar'; +import badge from 'primevue/themes/aura/badge'; +import blockui from 'primevue/themes/aura/blockui'; +import breadcrumb from 'primevue/themes/aura/breadcrumb'; +import button from 'primevue/themes/aura/button'; +import buttongroup from 'primevue/themes/aura/buttongroup'; +import card from 'primevue/themes/aura/card'; +import carousel from 'primevue/themes/aura/carousel'; +import cascadeselect from 'primevue/themes/aura/cascadeselect'; +import checkbox from 'primevue/themes/aura/checkbox'; +import chip from 'primevue/themes/aura/chip'; +import colorpicker from 'primevue/themes/aura/colorpicker'; +import confirmdialog from 'primevue/themes/aura/confirmdialog'; +import confirmpopup from 'primevue/themes/aura/confirmpopup'; +import contextmenu from 'primevue/themes/aura/contextmenu'; +import datatable from 'primevue/themes/aura/datatable'; +import dataview from 'primevue/themes/aura/dataview'; +import datepicker from 'primevue/themes/aura/datepicker'; +import dialog from 'primevue/themes/aura/dialog'; +import divider from 'primevue/themes/aura/divider'; +import dock from 'primevue/themes/aura/dock'; +import drawer from 'primevue/themes/aura/drawer'; +import editor from 'primevue/themes/aura/editor'; +import fieldset from 'primevue/themes/aura/fieldset'; +import fileupload from 'primevue/themes/aura/fileupload'; +import floatlabel from 'primevue/themes/aura/floatlabel'; +import galleria from 'primevue/themes/aura/galleria'; +import iconfield from 'primevue/themes/aura/iconfield'; +import image from 'primevue/themes/aura/image'; +import inlinemessage from 'primevue/themes/aura/inlinemessage'; +import inplace from 'primevue/themes/aura/inplace'; +import inputchips from 'primevue/themes/aura/inputchips'; +import inputgroup from 'primevue/themes/aura/inputgroup'; +import inputnumber from 'primevue/themes/aura/inputnumber'; +import inputotp from 'primevue/themes/aura/inputotp'; +import inputtext from 'primevue/themes/aura/inputtext'; +import knob from 'primevue/themes/aura/knob'; +import listbox from 'primevue/themes/aura/listbox'; +import megamenu from 'primevue/themes/aura/megamenu'; +import menu from 'primevue/themes/aura/menu'; +import menubar from 'primevue/themes/aura/menubar'; +import message from 'primevue/themes/aura/message'; +import metergroup from 'primevue/themes/aura/metergroup'; +import multiselect from 'primevue/themes/aura/multiselect'; +import orderlist from 'primevue/themes/aura/orderlist'; +import organizationchart from 'primevue/themes/aura/organizationchart'; +import paginator from 'primevue/themes/aura/paginator'; +import panel from 'primevue/themes/aura/panel'; +import panelmenu from 'primevue/themes/aura/panelmenu'; +import password from 'primevue/themes/aura/password'; +import picklist from 'primevue/themes/aura/picklist'; +import popover from 'primevue/themes/aura/popover'; +import progressbar from 'primevue/themes/aura/progressbar'; +import progressspinner from 'primevue/themes/aura/progressspinner'; +import radiobutton from 'primevue/themes/aura/radiobutton'; +import rating from 'primevue/themes/aura/rating'; +import scrollpanel from 'primevue/themes/aura/scrollpanel'; +import scrolltop from 'primevue/themes/aura/scrolltop'; +import select from 'primevue/themes/aura/select'; +import selectbutton from 'primevue/themes/aura/selectbutton'; +import skeleton from 'primevue/themes/aura/skeleton'; +import slider from 'primevue/themes/aura/slider'; +import speeddial from 'primevue/themes/aura/speeddial'; +import splitbutton from 'primevue/themes/aura/splitbutton'; +import splitter from 'primevue/themes/aura/splitter'; +import stepper from 'primevue/themes/aura/stepper'; +import steps from 'primevue/themes/aura/steps'; +import tabmenu from 'primevue/themes/aura/tabmenu'; +import tabs from 'primevue/themes/aura/tabs'; +import tabview from 'primevue/themes/aura/tabview'; +import tag from 'primevue/themes/aura/tag'; +import terminal from 'primevue/themes/aura/terminal'; +import textarea from 'primevue/themes/aura/textarea'; +import tieredmenu from 'primevue/themes/aura/tieredmenu'; +import timeline from 'primevue/themes/aura/timeline'; +import toast from 'primevue/themes/aura/toast'; +import togglebutton from 'primevue/themes/aura/togglebutton'; +import toggleswitch from 'primevue/themes/aura/toggleswitch'; +import toolbar from 'primevue/themes/aura/toolbar'; +import tooltip from 'primevue/themes/aura/tooltip'; +import tree from 'primevue/themes/aura/tree'; +import treeselect from 'primevue/themes/aura/treeselect'; +import treetable from 'primevue/themes/aura/treetable'; export default { primitive: { diff --git a/components/lib/themes/primeone/presets/aura/inlinemessage/index.js b/components/lib/themes/aura/inlinemessage/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/inlinemessage/index.js rename to components/lib/themes/aura/inlinemessage/index.js diff --git a/components/lib/themes/primeone/base/iconfield/package.json b/components/lib/themes/aura/inlinemessage/package.json similarity index 100% rename from components/lib/themes/primeone/base/iconfield/package.json rename to components/lib/themes/aura/inlinemessage/package.json diff --git a/components/lib/themes/primeone/presets/aura/inplace/index.js b/components/lib/themes/aura/inplace/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/inplace/index.js rename to components/lib/themes/aura/inplace/index.js diff --git a/components/lib/themes/primeone/base/image/package.json b/components/lib/themes/aura/inplace/package.json similarity index 100% rename from components/lib/themes/primeone/base/image/package.json rename to components/lib/themes/aura/inplace/package.json diff --git a/components/lib/themes/primeone/presets/aura/inputchips/index.js b/components/lib/themes/aura/inputchips/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/inputchips/index.js rename to components/lib/themes/aura/inputchips/index.js diff --git a/components/lib/themes/primeone/base/inlinemessage/package.json b/components/lib/themes/aura/inputchips/package.json similarity index 100% rename from components/lib/themes/primeone/base/inlinemessage/package.json rename to components/lib/themes/aura/inputchips/package.json diff --git a/components/lib/themes/primeone/presets/aura/inputgroup/index.js b/components/lib/themes/aura/inputgroup/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/inputgroup/index.js rename to components/lib/themes/aura/inputgroup/index.js diff --git a/components/lib/themes/primeone/base/inplace/package.json b/components/lib/themes/aura/inputgroup/package.json similarity index 100% rename from components/lib/themes/primeone/base/inplace/package.json rename to components/lib/themes/aura/inputgroup/package.json diff --git a/components/lib/themes/primeone/presets/aura/inputnumber/index.js b/components/lib/themes/aura/inputnumber/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/inputnumber/index.js rename to components/lib/themes/aura/inputnumber/index.js diff --git a/components/lib/themes/primeone/base/inputchips/package.json b/components/lib/themes/aura/inputnumber/package.json similarity index 100% rename from components/lib/themes/primeone/base/inputchips/package.json rename to components/lib/themes/aura/inputnumber/package.json diff --git a/components/lib/themes/primeone/presets/aura/inputotp/index.js b/components/lib/themes/aura/inputotp/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/inputotp/index.js rename to components/lib/themes/aura/inputotp/index.js diff --git a/components/lib/themes/primeone/base/inputgroup/package.json b/components/lib/themes/aura/inputotp/package.json similarity index 100% rename from components/lib/themes/primeone/base/inputgroup/package.json rename to components/lib/themes/aura/inputotp/package.json diff --git a/components/lib/themes/primeone/presets/aura/inputtext/index.js b/components/lib/themes/aura/inputtext/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/inputtext/index.js rename to components/lib/themes/aura/inputtext/index.js diff --git a/components/lib/themes/primeone/base/inputnumber/package.json b/components/lib/themes/aura/inputtext/package.json similarity index 100% rename from components/lib/themes/primeone/base/inputnumber/package.json rename to components/lib/themes/aura/inputtext/package.json diff --git a/components/lib/themes/primeone/presets/aura/knob/index.js b/components/lib/themes/aura/knob/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/knob/index.js rename to components/lib/themes/aura/knob/index.js diff --git a/components/lib/themes/primeone/base/inputotp/package.json b/components/lib/themes/aura/knob/package.json similarity index 100% rename from components/lib/themes/primeone/base/inputotp/package.json rename to components/lib/themes/aura/knob/package.json diff --git a/components/lib/themes/primeone/presets/aura/listbox/index.js b/components/lib/themes/aura/listbox/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/listbox/index.js rename to components/lib/themes/aura/listbox/index.js diff --git a/components/lib/themes/primeone/base/inputtext/package.json b/components/lib/themes/aura/listbox/package.json similarity index 100% rename from components/lib/themes/primeone/base/inputtext/package.json rename to components/lib/themes/aura/listbox/package.json diff --git a/components/lib/themes/primeone/presets/aura/megamenu/index.js b/components/lib/themes/aura/megamenu/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/megamenu/index.js rename to components/lib/themes/aura/megamenu/index.js diff --git a/components/lib/themes/primeone/base/knob/package.json b/components/lib/themes/aura/megamenu/package.json similarity index 100% rename from components/lib/themes/primeone/base/knob/package.json rename to components/lib/themes/aura/megamenu/package.json diff --git a/components/lib/themes/primeone/presets/aura/menu/index.js b/components/lib/themes/aura/menu/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/menu/index.js rename to components/lib/themes/aura/menu/index.js diff --git a/components/lib/themes/primeone/base/listbox/package.json b/components/lib/themes/aura/menu/package.json similarity index 100% rename from components/lib/themes/primeone/base/listbox/package.json rename to components/lib/themes/aura/menu/package.json diff --git a/components/lib/themes/primeone/presets/aura/menubar/index.js b/components/lib/themes/aura/menubar/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/menubar/index.js rename to components/lib/themes/aura/menubar/index.js diff --git a/components/lib/themes/primeone/base/megamenu/package.json b/components/lib/themes/aura/menubar/package.json similarity index 100% rename from components/lib/themes/primeone/base/megamenu/package.json rename to components/lib/themes/aura/menubar/package.json diff --git a/components/lib/themes/primeone/presets/aura/message/index.js b/components/lib/themes/aura/message/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/message/index.js rename to components/lib/themes/aura/message/index.js diff --git a/components/lib/themes/primeone/base/menu/package.json b/components/lib/themes/aura/message/package.json similarity index 100% rename from components/lib/themes/primeone/base/menu/package.json rename to components/lib/themes/aura/message/package.json diff --git a/components/lib/themes/primeone/presets/aura/metergroup/index.js b/components/lib/themes/aura/metergroup/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/metergroup/index.js rename to components/lib/themes/aura/metergroup/index.js diff --git a/components/lib/themes/primeone/base/menubar/package.json b/components/lib/themes/aura/metergroup/package.json similarity index 100% rename from components/lib/themes/primeone/base/menubar/package.json rename to components/lib/themes/aura/metergroup/package.json diff --git a/components/lib/themes/primeone/presets/aura/multiselect/index.js b/components/lib/themes/aura/multiselect/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/multiselect/index.js rename to components/lib/themes/aura/multiselect/index.js diff --git a/components/lib/themes/primeone/base/message/package.json b/components/lib/themes/aura/multiselect/package.json similarity index 100% rename from components/lib/themes/primeone/base/message/package.json rename to components/lib/themes/aura/multiselect/package.json diff --git a/components/lib/themes/primeone/presets/aura/orderlist/index.js b/components/lib/themes/aura/orderlist/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/orderlist/index.js rename to components/lib/themes/aura/orderlist/index.js diff --git a/components/lib/themes/primeone/base/metergroup/package.json b/components/lib/themes/aura/orderlist/package.json similarity index 100% rename from components/lib/themes/primeone/base/metergroup/package.json rename to components/lib/themes/aura/orderlist/package.json diff --git a/components/lib/themes/primeone/presets/aura/organizationchart/index.js b/components/lib/themes/aura/organizationchart/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/organizationchart/index.js rename to components/lib/themes/aura/organizationchart/index.js diff --git a/components/lib/themes/primeone/base/multiselect/package.json b/components/lib/themes/aura/organizationchart/package.json similarity index 100% rename from components/lib/themes/primeone/base/multiselect/package.json rename to components/lib/themes/aura/organizationchart/package.json diff --git a/components/lib/themes/primeone/base/orderlist/package.json b/components/lib/themes/aura/package.json similarity index 100% rename from components/lib/themes/primeone/base/orderlist/package.json rename to components/lib/themes/aura/package.json diff --git a/components/lib/themes/primeone/presets/aura/paginator/index.js b/components/lib/themes/aura/paginator/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/paginator/index.js rename to components/lib/themes/aura/paginator/index.js diff --git a/components/lib/themes/primeone/base/organizationchart/package.json b/components/lib/themes/aura/paginator/package.json similarity index 100% rename from components/lib/themes/primeone/base/organizationchart/package.json rename to components/lib/themes/aura/paginator/package.json diff --git a/components/lib/themes/primeone/presets/aura/panel/index.js b/components/lib/themes/aura/panel/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/panel/index.js rename to components/lib/themes/aura/panel/index.js diff --git a/components/lib/themes/primeone/base/package.json b/components/lib/themes/aura/panel/package.json similarity index 100% rename from components/lib/themes/primeone/base/package.json rename to components/lib/themes/aura/panel/package.json diff --git a/components/lib/themes/primeone/presets/aura/panelmenu/index.js b/components/lib/themes/aura/panelmenu/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/panelmenu/index.js rename to components/lib/themes/aura/panelmenu/index.js diff --git a/components/lib/themes/primeone/base/paginator/package.json b/components/lib/themes/aura/panelmenu/package.json similarity index 100% rename from components/lib/themes/primeone/base/paginator/package.json rename to components/lib/themes/aura/panelmenu/package.json diff --git a/components/lib/themes/primeone/presets/aura/password/index.js b/components/lib/themes/aura/password/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/password/index.js rename to components/lib/themes/aura/password/index.js diff --git a/components/lib/themes/primeone/base/panel/package.json b/components/lib/themes/aura/password/package.json similarity index 100% rename from components/lib/themes/primeone/base/panel/package.json rename to components/lib/themes/aura/password/package.json diff --git a/components/lib/themes/primeone/presets/aura/picklist/index.js b/components/lib/themes/aura/picklist/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/picklist/index.js rename to components/lib/themes/aura/picklist/index.js diff --git a/components/lib/themes/primeone/base/panelmenu/package.json b/components/lib/themes/aura/picklist/package.json similarity index 100% rename from components/lib/themes/primeone/base/panelmenu/package.json rename to components/lib/themes/aura/picklist/package.json diff --git a/components/lib/themes/primeone/presets/aura/popover/index.js b/components/lib/themes/aura/popover/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/popover/index.js rename to components/lib/themes/aura/popover/index.js diff --git a/components/lib/themes/primeone/base/password/package.json b/components/lib/themes/aura/popover/package.json similarity index 100% rename from components/lib/themes/primeone/base/password/package.json rename to components/lib/themes/aura/popover/package.json diff --git a/components/lib/themes/primeone/presets/aura/progressbar/index.js b/components/lib/themes/aura/progressbar/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/progressbar/index.js rename to components/lib/themes/aura/progressbar/index.js diff --git a/components/lib/themes/primeone/base/picklist/package.json b/components/lib/themes/aura/progressbar/package.json similarity index 100% rename from components/lib/themes/primeone/base/picklist/package.json rename to components/lib/themes/aura/progressbar/package.json diff --git a/components/lib/themes/primeone/presets/aura/progressspinner/index.js b/components/lib/themes/aura/progressspinner/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/progressspinner/index.js rename to components/lib/themes/aura/progressspinner/index.js diff --git a/components/lib/themes/primeone/base/popover/package.json b/components/lib/themes/aura/progressspinner/package.json similarity index 100% rename from components/lib/themes/primeone/base/popover/package.json rename to components/lib/themes/aura/progressspinner/package.json diff --git a/components/lib/themes/primeone/presets/aura/radiobutton/index.js b/components/lib/themes/aura/radiobutton/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/radiobutton/index.js rename to components/lib/themes/aura/radiobutton/index.js diff --git a/components/lib/themes/primeone/base/progressbar/package.json b/components/lib/themes/aura/radiobutton/package.json similarity index 100% rename from components/lib/themes/primeone/base/progressbar/package.json rename to components/lib/themes/aura/radiobutton/package.json diff --git a/components/lib/themes/primeone/presets/aura/rating/index.js b/components/lib/themes/aura/rating/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/rating/index.js rename to components/lib/themes/aura/rating/index.js diff --git a/components/lib/themes/primeone/base/progressspinner/package.json b/components/lib/themes/aura/rating/package.json similarity index 100% rename from components/lib/themes/primeone/base/progressspinner/package.json rename to components/lib/themes/aura/rating/package.json diff --git a/components/lib/themes/primeone/presets/aura/scrollpanel/index.js b/components/lib/themes/aura/scrollpanel/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/scrollpanel/index.js rename to components/lib/themes/aura/scrollpanel/index.js diff --git a/components/lib/themes/primeone/base/radiobutton/package.json b/components/lib/themes/aura/scrollpanel/package.json similarity index 100% rename from components/lib/themes/primeone/base/radiobutton/package.json rename to components/lib/themes/aura/scrollpanel/package.json diff --git a/components/lib/themes/primeone/presets/aura/scrolltop/index.js b/components/lib/themes/aura/scrolltop/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/scrolltop/index.js rename to components/lib/themes/aura/scrolltop/index.js diff --git a/components/lib/themes/primeone/base/rating/package.json b/components/lib/themes/aura/scrolltop/package.json similarity index 100% rename from components/lib/themes/primeone/base/rating/package.json rename to components/lib/themes/aura/scrolltop/package.json diff --git a/components/lib/themes/primeone/presets/aura/select/index.js b/components/lib/themes/aura/select/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/select/index.js rename to components/lib/themes/aura/select/index.js diff --git a/components/lib/themes/primeone/base/scrollpanel/package.json b/components/lib/themes/aura/select/package.json similarity index 100% rename from components/lib/themes/primeone/base/scrollpanel/package.json rename to components/lib/themes/aura/select/package.json diff --git a/components/lib/themes/primeone/presets/aura/selectbutton/index.js b/components/lib/themes/aura/selectbutton/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/selectbutton/index.js rename to components/lib/themes/aura/selectbutton/index.js diff --git a/components/lib/themes/primeone/base/scrolltop/package.json b/components/lib/themes/aura/selectbutton/package.json similarity index 100% rename from components/lib/themes/primeone/base/scrolltop/package.json rename to components/lib/themes/aura/selectbutton/package.json diff --git a/components/lib/themes/primeone/presets/aura/skeleton/index.js b/components/lib/themes/aura/skeleton/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/skeleton/index.js rename to components/lib/themes/aura/skeleton/index.js diff --git a/components/lib/themes/primeone/base/select/package.json b/components/lib/themes/aura/skeleton/package.json similarity index 100% rename from components/lib/themes/primeone/base/select/package.json rename to components/lib/themes/aura/skeleton/package.json diff --git a/components/lib/themes/primeone/presets/aura/slider/index.js b/components/lib/themes/aura/slider/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/slider/index.js rename to components/lib/themes/aura/slider/index.js diff --git a/components/lib/themes/primeone/base/selectbutton/package.json b/components/lib/themes/aura/slider/package.json similarity index 100% rename from components/lib/themes/primeone/base/selectbutton/package.json rename to components/lib/themes/aura/slider/package.json diff --git a/components/lib/themes/primeone/presets/aura/speeddial/index.js b/components/lib/themes/aura/speeddial/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/speeddial/index.js rename to components/lib/themes/aura/speeddial/index.js diff --git a/components/lib/themes/primeone/base/skeleton/package.json b/components/lib/themes/aura/speeddial/package.json similarity index 100% rename from components/lib/themes/primeone/base/skeleton/package.json rename to components/lib/themes/aura/speeddial/package.json diff --git a/components/lib/themes/primeone/presets/aura/splitbutton/index.js b/components/lib/themes/aura/splitbutton/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/splitbutton/index.js rename to components/lib/themes/aura/splitbutton/index.js diff --git a/components/lib/themes/primeone/base/slider/package.json b/components/lib/themes/aura/splitbutton/package.json similarity index 100% rename from components/lib/themes/primeone/base/slider/package.json rename to components/lib/themes/aura/splitbutton/package.json diff --git a/components/lib/themes/primeone/presets/aura/splitter/index.js b/components/lib/themes/aura/splitter/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/splitter/index.js rename to components/lib/themes/aura/splitter/index.js diff --git a/components/lib/themes/primeone/base/speeddial/package.json b/components/lib/themes/aura/splitter/package.json similarity index 100% rename from components/lib/themes/primeone/base/speeddial/package.json rename to components/lib/themes/aura/splitter/package.json diff --git a/components/lib/themes/primeone/presets/aura/stepper/index.js b/components/lib/themes/aura/stepper/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/stepper/index.js rename to components/lib/themes/aura/stepper/index.js diff --git a/components/lib/themes/primeone/base/splitbutton/package.json b/components/lib/themes/aura/stepper/package.json similarity index 100% rename from components/lib/themes/primeone/base/splitbutton/package.json rename to components/lib/themes/aura/stepper/package.json diff --git a/components/lib/themes/primeone/presets/aura/steps/index.js b/components/lib/themes/aura/steps/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/steps/index.js rename to components/lib/themes/aura/steps/index.js diff --git a/components/lib/themes/primeone/base/splitter/package.json b/components/lib/themes/aura/steps/package.json similarity index 100% rename from components/lib/themes/primeone/base/splitter/package.json rename to components/lib/themes/aura/steps/package.json diff --git a/components/lib/themes/primeone/presets/aura/tabmenu/index.js b/components/lib/themes/aura/tabmenu/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/tabmenu/index.js rename to components/lib/themes/aura/tabmenu/index.js diff --git a/components/lib/themes/primeone/base/stepper/package.json b/components/lib/themes/aura/tabmenu/package.json similarity index 100% rename from components/lib/themes/primeone/base/stepper/package.json rename to components/lib/themes/aura/tabmenu/package.json diff --git a/components/lib/themes/primeone/presets/aura/tabs/index.js b/components/lib/themes/aura/tabs/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/tabs/index.js rename to components/lib/themes/aura/tabs/index.js diff --git a/components/lib/themes/primeone/base/steps/package.json b/components/lib/themes/aura/tabs/package.json similarity index 100% rename from components/lib/themes/primeone/base/steps/package.json rename to components/lib/themes/aura/tabs/package.json diff --git a/components/lib/themes/primeone/presets/aura/tabview/index.js b/components/lib/themes/aura/tabview/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/tabview/index.js rename to components/lib/themes/aura/tabview/index.js diff --git a/components/lib/themes/primeone/base/tabmenu/package.json b/components/lib/themes/aura/tabview/package.json similarity index 100% rename from components/lib/themes/primeone/base/tabmenu/package.json rename to components/lib/themes/aura/tabview/package.json diff --git a/components/lib/themes/primeone/presets/aura/tag/index.js b/components/lib/themes/aura/tag/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/tag/index.js rename to components/lib/themes/aura/tag/index.js diff --git a/components/lib/themes/primeone/base/tabs/package.json b/components/lib/themes/aura/tag/package.json similarity index 100% rename from components/lib/themes/primeone/base/tabs/package.json rename to components/lib/themes/aura/tag/package.json diff --git a/components/lib/themes/primeone/presets/aura/terminal/index.js b/components/lib/themes/aura/terminal/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/terminal/index.js rename to components/lib/themes/aura/terminal/index.js diff --git a/components/lib/themes/primeone/base/tabview/package.json b/components/lib/themes/aura/terminal/package.json similarity index 100% rename from components/lib/themes/primeone/base/tabview/package.json rename to components/lib/themes/aura/terminal/package.json diff --git a/components/lib/themes/primeone/presets/aura/textarea/index.js b/components/lib/themes/aura/textarea/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/textarea/index.js rename to components/lib/themes/aura/textarea/index.js diff --git a/components/lib/themes/primeone/base/tag/package.json b/components/lib/themes/aura/textarea/package.json similarity index 100% rename from components/lib/themes/primeone/base/tag/package.json rename to components/lib/themes/aura/textarea/package.json diff --git a/components/lib/themes/primeone/presets/aura/tieredmenu/index.js b/components/lib/themes/aura/tieredmenu/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/tieredmenu/index.js rename to components/lib/themes/aura/tieredmenu/index.js diff --git a/components/lib/themes/primeone/base/terminal/package.json b/components/lib/themes/aura/tieredmenu/package.json similarity index 100% rename from components/lib/themes/primeone/base/terminal/package.json rename to components/lib/themes/aura/tieredmenu/package.json diff --git a/components/lib/themes/primeone/presets/aura/timeline/index.js b/components/lib/themes/aura/timeline/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/timeline/index.js rename to components/lib/themes/aura/timeline/index.js diff --git a/components/lib/themes/primeone/base/textarea/package.json b/components/lib/themes/aura/timeline/package.json similarity index 100% rename from components/lib/themes/primeone/base/textarea/package.json rename to components/lib/themes/aura/timeline/package.json diff --git a/components/lib/themes/primeone/presets/aura/toast/index.js b/components/lib/themes/aura/toast/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/toast/index.js rename to components/lib/themes/aura/toast/index.js diff --git a/components/lib/themes/primeone/base/tieredmenu/package.json b/components/lib/themes/aura/toast/package.json similarity index 100% rename from components/lib/themes/primeone/base/tieredmenu/package.json rename to components/lib/themes/aura/toast/package.json diff --git a/components/lib/themes/primeone/presets/aura/togglebutton/index.js b/components/lib/themes/aura/togglebutton/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/togglebutton/index.js rename to components/lib/themes/aura/togglebutton/index.js diff --git a/components/lib/themes/primeone/base/timeline/package.json b/components/lib/themes/aura/togglebutton/package.json similarity index 100% rename from components/lib/themes/primeone/base/timeline/package.json rename to components/lib/themes/aura/togglebutton/package.json diff --git a/components/lib/themes/primeone/presets/aura/toggleswitch/index.js b/components/lib/themes/aura/toggleswitch/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/toggleswitch/index.js rename to components/lib/themes/aura/toggleswitch/index.js diff --git a/components/lib/themes/primeone/base/toast/package.json b/components/lib/themes/aura/toggleswitch/package.json similarity index 100% rename from components/lib/themes/primeone/base/toast/package.json rename to components/lib/themes/aura/toggleswitch/package.json diff --git a/components/lib/themes/primeone/presets/aura/toolbar/index.js b/components/lib/themes/aura/toolbar/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/toolbar/index.js rename to components/lib/themes/aura/toolbar/index.js diff --git a/components/lib/themes/primeone/base/togglebutton/package.json b/components/lib/themes/aura/toolbar/package.json similarity index 100% rename from components/lib/themes/primeone/base/togglebutton/package.json rename to components/lib/themes/aura/toolbar/package.json diff --git a/components/lib/themes/primeone/presets/aura/tooltip/index.js b/components/lib/themes/aura/tooltip/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/tooltip/index.js rename to components/lib/themes/aura/tooltip/index.js diff --git a/components/lib/themes/primeone/base/toggleswitch/package.json b/components/lib/themes/aura/tooltip/package.json similarity index 100% rename from components/lib/themes/primeone/base/toggleswitch/package.json rename to components/lib/themes/aura/tooltip/package.json diff --git a/components/lib/themes/primeone/presets/aura/tree/index.js b/components/lib/themes/aura/tree/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/tree/index.js rename to components/lib/themes/aura/tree/index.js diff --git a/components/lib/themes/primeone/base/toolbar/package.json b/components/lib/themes/aura/tree/package.json similarity index 100% rename from components/lib/themes/primeone/base/toolbar/package.json rename to components/lib/themes/aura/tree/package.json diff --git a/components/lib/themes/primeone/presets/aura/treeselect/index.js b/components/lib/themes/aura/treeselect/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/treeselect/index.js rename to components/lib/themes/aura/treeselect/index.js diff --git a/components/lib/themes/primeone/base/tooltip/package.json b/components/lib/themes/aura/treeselect/package.json similarity index 100% rename from components/lib/themes/primeone/base/tooltip/package.json rename to components/lib/themes/aura/treeselect/package.json diff --git a/components/lib/themes/primeone/presets/aura/treetable/index.js b/components/lib/themes/aura/treetable/index.js similarity index 100% rename from components/lib/themes/primeone/presets/aura/treetable/index.js rename to components/lib/themes/aura/treetable/index.js diff --git a/components/lib/themes/primeone/base/tree/package.json b/components/lib/themes/aura/treetable/package.json similarity index 100% rename from components/lib/themes/primeone/base/tree/package.json rename to components/lib/themes/aura/treetable/package.json diff --git a/components/lib/themes/primeone/aura/index.js b/components/lib/themes/primeone/aura/index.js deleted file mode 100644 index 7dca1582d..000000000 --- a/components/lib/themes/primeone/aura/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'primevue/themes/primeone/presets/aura'; diff --git a/components/lib/themes/primeone/base/accordion/index.js b/components/lib/themes/primeone/base/accordion/index.js deleted file mode 100644 index 40cfd24c8..000000000 --- a/components/lib/themes/primeone/base/accordion/index.js +++ /dev/null @@ -1,47 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-accordionpanel { - display: flex; - flex-direction: column; - border-bottom: 1px solid ${dt('accordion.content.border.color')}; -} - -.p-accordionpanel:last-child { - border-bottom: 0 none; -} - -.p-accordionheader { - all: unset; - cursor: pointer; - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.125rem 1.125rem 1.125rem 1.125rem; - color: ${dt('accordion.header.color')}; - background: ${dt('accordion.header.background')}; - font-weight: 600; - border-radius: ${dt('rounded.base')}; - transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: -2px; -} - -.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled):hover > .p-accordionheader { - color: ${dt('accordion.header.hover.color')} -} - -.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader { - color: ${dt('accordion.header.active.color')} -} - -.p-accordioncontent-content { - padding: 0 1.125rem 1.125rem 1.125rem; - background: color: ${dt('accordion.content.background')} - color: ${dt('accordion.content.color')} -} -` -}; diff --git a/components/lib/themes/primeone/base/autocomplete/index.js b/components/lib/themes/primeone/base/autocomplete/index.js deleted file mode 100644 index a22dc47a1..000000000 --- a/components/lib/themes/primeone/base/autocomplete/index.js +++ /dev/null @@ -1,216 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-autocomplete { - display: inline-flex; -} - -.p-autocomplete-loader { - position: absolute; - top: 50%; - margin-top: -0.5rem; - right: 0.75rem; -} - -.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader { - right: 3.25rem; -} - -.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input { - flex: 1 1 auto; - width: 1%; -} - -.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input, -.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.p-autocomplete-dropdown { - cursor: pointer; - display: inline-flex; - cursor: pointer; - user-select: none; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - width: ${dt('autocomplete.dropdown.width')}; - border-top-right-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; - background: ${dt('autocomplete.dropdown.background')}; - border: 1px solid ${dt('autocomplete.dropdown.border.color')}; - border-left: 0 none; - background: ${dt('autocomplete.dropdown.background')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-autocomplete-dropdown:not(:disabled):hover { - background: ${dt('autocomplete.dropdown.hover.background')}; - border-color: ${dt('autocomplete.dropdown.hover.border.color')}; - background: ${dt('autocomplete.dropdown.hover.background')}; -} - -.p-autocomplete-dropdown:not(:disabled):active { - background: ${dt('autocomplete.dropdown.active.background')}; - border-color: ${dt('autocomplete.dropdown.active.border.color')}; - background: ${dt('autocomplete.dropdown.active.background')}; -} - -.p-autocomplete-dropdown:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-autocomplete .p-autocomplete-overlay { - min-width: 100%; -} - -.p-autocomplete-overlay { - position: absolute; - overflow: auto; - top: 0; - left: 0; - background: ${dt('autocomplete.overlay.background')}; - color: ${dt('autocomplete.overlay.color')}; - border: 1px solid ${dt('autocomplete.overlay.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-autocomplete-list { - margin: 0; - padding: 0; - list-style-type: none; - padding: 0.25rem 0.25rem; -} - -.p-autocomplete-option { - cursor: pointer; - white-space: nowrap; - position: relative; - overflow: hidden; - margin: 2px 0; - padding: 0.5rem 0.75rem; - border: 0 none; - color: ${dt('autocomplete.item.color')}; - background: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; -} - -.p-autocomplete-option:first-child { - margin-top: 0; -} - -.p-autocomplete-option:last-child { - margin-bottom: 0; -} - -.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus { - background: ${dt('autocomplete.item.focus.background')}; - color: ${dt('autocomplete.item.focus.color')}; -} - -.p-autocomplete-option-selected { - background: ${dt('autocomplete.item.selected.background')}; - color: ${dt('autocomplete.item.selected.color')}; -} - -.p-autocomplete-option-selected.p-focus { - background: ${dt('autocomplete.item.selected.focus.background')}; - color: ${dt('autocomplete.item.selected.focus.color')}; -} - -.p-autocomplete-option-group { - margin: 0; - padding: 0.5rem 0.75rem; - color: ${dt('autocomplete.item.group.color')}; - background: ${dt('autocomplete.item.group.background')}; - font-weight: 600; -} - -.p-autocomplete-input-multiple { - margin: 0; - padding: 0; - list-style-type: none; - cursor: text; - overflow: hidden; - display: flex; - align-items: center; - flex-wrap: wrap; - padding: 0.25rem 0.25rem; - gap: 0.25rem; - color: ${dt('autocomplete.input.multiple.color')}; - background: ${dt('autocomplete.input.multiple.background')}; - border: 1px solid ${dt('autocomplete.input.multiple.border.color')}; - border-radius: ${dt('rounded.base')}; - width: 100%; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - box-shadow: ${dt('autocomplete.input.multiple.box.shadow')}; -} - -.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple { - border-color: ${dt('autocomplete.input.multiple.hover.border.color')}; -} - -.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple { - border-color: ${dt('autocomplete.input.multiple.focus.border.color')}; - outline: 0 none; -} - -.p-autocomplete.p-invalid .p-autocomplete-input-multiple { - border-color: ${dt('autocomplete.input.multiple.invalid.border.color')}; -} - -.p-variant-filled.p-autocomplete-input-multiple { - background: ${dt('autocomplete.input.multiple.filled.background')}; -} - -.p-autocomplete:not(.p-disabled).p-focus .p-variant-filled.p-autocomplete-input-multiple { - background: ${dt('autocomplete.input.multiple.filled.focus.background')}; -} - -.p-autocomplete.p-disabled .p-autocomplete-input-multiple { - opacity: 1; - background: ${dt('autocomplete.input.multiple.disabled.background')}; - color: ${dt('autocomplete.input.multiple.disabled.color')}; -} - -.p-autocomplete-input-chip { - flex: 1 1 auto; - display: inline-flex; - padding: 0.25rem 0; - margin-left: 0.5rem; -} - -.p-autocomplete-input-chip input { - border: 0 none; - outline: 0 none; - background: transparent; - margin: 0; - padding: 0; - box-shadow: none; - border-radius: 0; - width: 100%; - font-family: inherit; - font-feature-settings: inherit; - font-size: 1rem; - color: inherit; -} - -.p-autocomplete-input-chip input::placeholder { - color: ${dt('autocomplete.input.multiple.placeholder.color')}; -} - -.p-fluid .p-autocomplete { - display: flex; -} - -.p-fluid .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input { - width: 1%; -} -` -}; diff --git a/components/lib/themes/primeone/base/avatar/index.js b/components/lib/themes/primeone/base/avatar/index.js deleted file mode 100644 index 451d6dd0a..000000000 --- a/components/lib/themes/primeone/base/avatar/index.js +++ /dev/null @@ -1,68 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-avatar { - display: inline-flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - font-size: 1rem; - background: ${dt('avatar.background')}; - border-radius: ${dt('rounded.base')}; -} - -.p-avatar-image { - background-color: transparent; -} - -.p-avatar-circle { - border-radius: 50%; -} - -.p-avatar-circle img { - border-radius: 50%; -} - -.p-avatar-icon { - font-size: 1rem; -} - -.p-avatar img { - width: 100%; - height: 100%; -} - -.p-avatar-lg { - width: 3rem; - height: 3rem; - font-size: 1.5rem; -} - -.p-avatar-lg .p-avatar-icon { - font-size: 1.5rem; -} - -.p-avatar-xl { - width: 4rem; - height: 4rem; - font-size: 2rem; -} - -.p-avatar-xl .p-avatar-icon { - font-size: 2rem; -} - -.p-avatar-group { - display: flex; - align-items: center; -} - -.p-avatar-group .p-avatar + .p-avatar { - margin-left: -1rem; -} - -.p-avatar-group .p-avatar { - border: 2px solid ${dt('avatar.grouped.border.color')}; -} - ` -}; diff --git a/components/lib/themes/primeone/base/badge/index.js b/components/lib/themes/primeone/base/badge/index.js deleted file mode 100644 index 716d657a4..000000000 --- a/components/lib/themes/primeone/base/badge/index.js +++ /dev/null @@ -1,87 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-badge { - display: inline-flex; - border-radius: 10px; - justify-content: center; - padding: 0 0.5rem; - background: ${dt('badge.primary.background')}; - color: ${dt('badge.primary.color')}; - font-size: 0.75rem; - font-weight: 700; - min-width: 1.5rem; - height: 1.5rem; - line-height: 1.5rem; -} - -.p-overlay-badge { - position: relative; -} - -.p-overlay-badge .p-badge { - position: absolute; - top: 0; - right: 0; - transform: translate(50%, -50%); - transform-origin: 100% 0; - margin: 0; -} - -.p-badge-dot { - width: 0.5rem; - min-width: 0.5rem; - height: 0.5rem; - border-radius: 50%; - padding: 0; -} - -.p-badge-circle { - padding: 0; - border-radius: 50%; -} - -.p-badge-secondary { - background: ${dt('badge.secondary.background')}; - color: ${dt('badge.secondary.color')}; -} - -.p-badge-success { - background: ${dt('badge.success.background')}; - color: ${dt('badge.success.color')}; -} - -.p-badge-info { - background: ${dt('badge.info.background')}; - color: ${dt('badge.info.color')}; -} - -.p-badge-warn { - background: ${dt('badge.warn.background')}; - color: ${dt('badge.warn.color')}; -} - -.p-badge-danger { - background: ${dt('badge.danger.background')}; - color: ${dt('badge.danger.color')}; -} - -.p-badge-contrast { - background: ${dt('badge.contrast.background')}; - color: ${dt('badge.contrast.color')}; -} - -.p-badge-lg { - font-size: 1.125rem; - min-width: 2.25rem; - height: 2.25rem; - line-height: 2.25rem; -} - -.p-badge-xl { - font-size: 1.5rem; - min-width: 3rem; - height: 3rem; - line-height: 3rem; -} - ` -}; diff --git a/components/lib/themes/primeone/base/blockui/index.js b/components/lib/themes/primeone/base/blockui/index.js deleted file mode 100644 index cc1d38159..000000000 --- a/components/lib/themes/primeone/base/blockui/index.js +++ /dev/null @@ -1,19 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-blockui { - position: relative; -} - -.p-blockui-mask { - border-radius: ${dt('rounded.base')}; -} - -.p-blockui-mask.p-component-overlay { - position: absolute; -} - -.p-blockui-mask-document.p-component-overlay { - position: fixed; -} - ` -}; diff --git a/components/lib/themes/primeone/base/breadcrumb/index.js b/components/lib/themes/primeone/base/breadcrumb/index.js deleted file mode 100644 index 0d1bd8295..000000000 --- a/components/lib/themes/primeone/base/breadcrumb/index.js +++ /dev/null @@ -1,60 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-breadcrumb { - background: ${dt('breadcrumb.background')}; - border: 0 none; - border-radius: ${dt('rounded.base')}; - padding: 1rem; - overflow-x: auto; -} - -.p-breadcrumb-list { - margin: 0; - padding: 0; - list-style-type: none; - display: flex; - align-items: center; - flex-wrap: nowrap; -} - -.p-breadcrumb-separator { - display: flex; - align-items: center; - margin: 0 0.5rem 0 0.5rem; - color: ${dt('breadcrumb.separator.color')}; -} - -.p-breadcrumb::-webkit-scrollbar { - display: none; -} - -.p-breadcrumb-item-link { - text-decoration: none; - display: flex; - align-items: center; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; -} - -.p-breadcrumb-item-link:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-breadcrumb-item-link { - color: ${dt('breadcrumb.item.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - line-height: 1; -} - -.p-breadcrumb-item-label:hover { - color: ${dt('breadcrumb.item.hover.color')}; - line-height: 1; -} - -.p-breadcrumb-item-icon { - color: ${dt('breadcrumb.item.icon.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/button/index.js b/components/lib/themes/primeone/base/button/index.js deleted file mode 100644 index e0d0d0a52..000000000 --- a/components/lib/themes/primeone/base/button/index.js +++ /dev/null @@ -1,590 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-button { - display: inline-flex; - cursor: pointer; - user-select: none; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - color: ${dt('button.primary.color')}; - background: ${dt('button.primary.background')}; - border: 1px solid ${dt('button.primary.border.color')}; - padding: 0.5rem 1rem; - font-size: 1rem; - font-family: inherit; - font-feature-settings: inherit; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - gap: 0.5rem; -} - -.p-button:disabled { - cursor: default; -} - -.p-button-icon-right { - order: 1; -} - -.p-button-icon-bottom { - order: 2; -} - -.p-button-icon-only { - justify-content: center; - width: 2.5rem; - padding: 0.5rem 0; -} - -.p-button-icon-only.p-button-rounded { - border-radius: 50%; - height: 2.5rem; -} - -.p-button-sm { - font-size: 0.875rem; - padding: 0.375rem 0.875rem; -} - -.p-button-sm .p-button-icon { - font-size: 0.875rem; -} - -.p-button-lg { - font-size: 1.25rem; - padding: 0.625rem 1.25rem; -} - -.p-button-lg .p-button-icon { - font-size: 1.25rem; -} - -.p-button-vertical { - flex-direction: column; -} - -.p-button-label { - font-weight: 500; -} - -.p-fluid .p-button { - width: 100%; -} - -.p-fluid .p-button-icon-only { - width: 2.5rem; -} - -.p-button:not(:disabled):hover { - background: ${dt('button.primary.hover.background')}; - border: 1px solid ${dt('button.primary.hover.border.color')}; - color: ${dt('button.primary.hover.color')}; -} - -.p-button:not(:disabled):active { - background: ${dt('button.primary.active.background')}; - border: 1px solid ${dt('button.primary.active.border.color')}; - color: ${dt('button.primary.active.color')}; -} - -.p-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('button.primary.background')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-button .p-badge { - margin-left: 0.5rem; - min-width: 1rem; - height: 1rem; - line-height: 1rem; - background: ${dt('button.primary.color')}; - color: ${dt('button.primary.background')}; -} - -.p-button-raised { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -.p-button-rounded { - border-radius: 2rem; -} - -/* Default Severities */ -.p-button-secondary { - background: ${dt('button.secondary.background')}; - border: 1px solid ${dt('button.secondary.border.color')}; - color: ${dt('button.secondary.color')}; -} - -.p-button-secondary:not(:disabled):hover { - background: ${dt('button.secondary.hover.background')}; - border: 1px solid ${dt('button.secondary.hover.border.color')}; - color: ${dt('button.secondary.hover.color')}; -} - -.p-button-secondary:not(:disabled):active { - background: ${dt('button.secondary.active.background')}; - border: 1px solid ${dt('button.secondary.active.border.color')}; - color: ${dt('button.secondary.active.color')}; -} - -.p-button-success { - background: ${dt('button.success.background')}; - border: 1px solid ${dt('button.success.border.color')}; - color: ${dt('button.success.color')}; -} - -.p-button-success:not(:disabled):hover { - background: ${dt('button.success.hover.background')}; - border: 1px solid ${dt('button.success.hover.border.color')}; - color: ${dt('button.success.hover.color')}; -} - -.p-button-success:not(:disabled):active { - background: ${dt('button.success.active.background')}; - border: 1px solid ${dt('button.success.active.border.color')}; - color: ${dt('button.success.active.color')}; -} - -.p-button-success:focus-visible { - outline-color: ${dt('button.success.background')}; -} - -.p-button-info { - background: ${dt('button.info.background')}; - border: 1px solid ${dt('button.info.border.color')}; - color: ${dt('button.info.color')}; -} - -.p-button-info:not(:disabled):hover { - background: ${dt('button.info.hover.background')}; - border: 1px solid ${dt('button.info.hover.border.color')}; - color: ${dt('button.info.hover.color')}; -} - -.p-button-info:not(:disabled):active { - background: ${dt('button.info.active.background')}; - border: 1px solid ${dt('button.info.active.border.color')}; - color: ${dt('button.info.active.color')}; -} - -.p-button-info:focus-visible { - outline-color: ${dt('button.info.background')}; -} - -.p-button-warn { - background: ${dt('button.warn.background')}; - border: 1px solid ${dt('button.warn.border.color')}; - color: ${dt('button.warn.color')}; -} - -.p-button-warn:not(:disabled):hover { - background: ${dt('button.warn.hover.background')}; - border: 1px solid ${dt('button.warn.hover.border.color')}; - color: ${dt('button.warn.hover.color')}; -} - -.p-button-warn:not(:disabled):active { - background: ${dt('button.warn.active.background')}; - border: 1px solid ${dt('button.warn.active.border.color')}; - color: ${dt('button.warn.active.color')}; -} - -.p-button-warn:focus-visible { - background: ${dt('button.warn.background')}; -} - -.p-button-help { - background: ${dt('button.help.background')}; - border: 1px solid ${dt('button.help.border.color')}; - color: ${dt('button.help.color')}; -} - -.p-button-help:not(:disabled):hover { - background: ${dt('button.help.hover.background')}; - border: 1px solid ${dt('button.help.hover.border.color')}; - color: ${dt('button.help.hover.color')}; -} - -.p-button-help:not(:disabled):active { - background: ${dt('button.help.active.background')}; - border: 1px solid ${dt('button.help.active.border.color')}; - color: ${dt('button.help.active.color')}; -} - -.p-button-help:focus-visible { - outline-color: ${dt('button.help.background')}; -} - -.p-button-danger { - background: ${dt('button.danger.background')}; - border: 1px solid ${dt('button.danger.border.color')}; - color: ${dt('button.danger.color')}; -} - -.p-button-danger:not(:disabled):hover { - background: ${dt('button.danger.hover.background')}; - border: 1px solid ${dt('button.danger.hover.border.color')}; - color: ${dt('button.danger.hover.color')}; -} - -.p-button-danger:not(:disabled):active { - background: ${dt('button.danger.active.background')}; - border: 1px solid ${dt('button.danger.active.border.color')}; - color: ${dt('button.danger.active.color')}; -} - -.p-button-danger:focus-visible { - background: ${dt('button.danger.background')}; -} - -.p-button-contrast { - background: ${dt('button.contrast.background')}; - border: 1px solid ${dt('button.contrast.border.color')}; - color: ${dt('button.contrast.color')}; -} - -.p-button-contrast:not(:disabled):hover { - background: ${dt('button.contrast.hover.background')}; - border: 1px solid ${dt('button.contrast.hover.border.color')}; - color: ${dt('button.contrast.hover.color')}; -} - -.p-button-contrast:not(:disabled):active { - background: ${dt('button.contrast.active.background')}; - border: 1px solid ${dt('button.contrast.active.border.color')}; - color: ${dt('button.contrast.active.color')}; -} - -.p-button-contrast:focus-visible { - outline-color: ${dt('button.contrast.background')}; -} - - -/* Outlined Buttons */ -.p-button-outlined { - background: transparent; - border-color: ${dt('button.outlined.primary.border.color')}; - color: ${dt('button.outlined.primary.color')}; -} - -.p-button-outlined:not(:disabled):hover { - background: ${dt('button.outlined.primary.hover.background')}; - border-color: ${dt('button.outlined.primary.border.color')}; - color: ${dt('button.outlined.primary.color')}; -} - -.p-button-outlined:not(:disabled):active { - background: ${dt('button.outlined.primary.active.background')}; - border-color: ${dt('button.outlined.primary.border.color')}; - color: ${dt('button.outlined.primary.color')}; -} - -.p-button-outlined.p-button-secondary { - border-color: ${dt('button.outlined.secondary.border.color')}; - color: ${dt('button.outlined.secondary.color')}; -} - -.p-button-outlined.p-button-secondary:not(:disabled):hover { - background: ${dt('button.outlined.secondary.hover.background')}; - border-color: ${dt('button.outlined.secondary.border.color')}; - color: ${dt('button.outlined.secondary.color')}; -} - -.p-button-outlined.p-button-secondary:not(:disabled):active { - background: ${dt('button.outlined.secondary.active.background')}; - border-color: ${dt('button.outlined.secondary.border.color')}; - color: ${dt('button.outlined.secondary.color')}; -} - -.p-button-outlined.p-button-success { - border-color: ${dt('button.outlined.success.border.color')}; - color: ${dt('button.outlined.success.color')}; -} - -.p-button-outlined.p-button-success:not(:disabled):hover { - background: ${dt('button.outlined.success.hover.background')}; - border-color: ${dt('button.outlined.success.border.color')}; - color: ${dt('button.outlined.success.color')}; -} - -.p-button-outlined.p-button-success:not(:disabled):active { - background: ${dt('button.outlined.success.active.background')}; - border-color: ${dt('button.outlined.success.border.color')}; - color: ${dt('button.outlined.success.color')}; -} - -.p-button-outlined.p-button-info { - border-color: ${dt('button.outlined.info.border.color')}; - color: ${dt('button.outlined.info.color')}; -} - -.p-button-outlined.p-button-info:not(:disabled):hover { - background: ${dt('button.outlined.info.hover.background')}; - border-color: ${dt('button.outlined.info.border.color')}; - color: ${dt('button.outlined.info.color')}; -} - -.p-button-outlined.p-button-info:not(:disabled):active { - background: ${dt('button.outlined.info.active.background')}; - border-color: ${dt('button.outlined.info.border.color')}; - color: ${dt('button.outlined.info.color')}; -} - -.p-button-outlined.p-button-warn { - border-color: ${dt('button.outlined.warn.border.color')}; - color: ${dt('button.outlined.warn.color')}; -} - -.p-button-outlined.p-button-warn:not(:disabled):hover { - background: ${dt('button.outlined.warn.hover.background')}; - border-color: ${dt('button.outlined.warn.border.color')}; - color: ${dt('button.outlined.warn.color')}; -} - -.p-button-outlined.p-button-warn:not(:disabled):active { - background: ${dt('button.outlined.warn.active.background')}; - border-color: ${dt('button.outlined.warn.border.color')}; - color: ${dt('button.outlined.warn.color')}; -} - -.p-button-outlined.p-button-help { - border-color: ${dt('button.outlined.help.border.color')}; - color: ${dt('button.outlined.help.color')}; -} - -.p-button-outlined.p-button-help:not(:disabled):hover { - background: ${dt('button.outlined.help.hover.background')}; - border-color: ${dt('button.outlined.help.border.color')}; - color: ${dt('button.outlined.help.color')}; -} - -.p-button-outlined.p-button-help:not(:disabled):active { - background: ${dt('button.outlined.help.active.background')}; - border-color: ${dt('button.outlined.help.border.color')}; - color: ${dt('button.outlined.help.color')}; -} - -.p-button-outlined.p-button-danger { - border-color: ${dt('button.outlined.danger.border.color')}; - color: ${dt('button.outlined.danger.color')}; -} - -.p-button-outlined.p-button-danger:not(:disabled):hover { - background: ${dt('button.outlined.danger.hover.background')}; - border-color: ${dt('button.outlined.danger.border.color')}; - color: ${dt('button.outlined.danger.color')}; -} - -.p-button-outlined.p-button-danger:not(:disabled):active { - background: ${dt('button.outlined.danger.active.background')}; - border-color: ${dt('button.outlined.danger.border.color')}; - color: ${dt('button.outlined.danger.color')}; -} - -.p-button-outlined.p-button-contrast { - border-color: ${dt('button.outlined.contrast.border.color')}; - color: ${dt('button.outlined.contrast.color')}; -} - -.p-button-outlined.p-button-contrast:not(:disabled):hover { - background: ${dt('button.outlined.contrast.hover.background')}; - border-color: ${dt('button.outlined.contrast.border.color')}; - color: ${dt('button.outlined.contrast.color')}; -} - -.p-button-outlined.p-button-contrast:not(:disabled):active { - background: ${dt('button.outlined.contrast.active.background')}; - border-color: ${dt('button.outlined.contrast.border.color')}; - color: ${dt('button.outlined.contrast.color')}; -} - -.p-button-outlined.p-button-plain { - border-color: ${dt('button.outlined.plain.border.color')}; - color: ${dt('button.outlined.plain.color')}; -} - -.p-button-outlined.p-button-plain:not(:disabled):hover { - background: ${dt('button.outlined.plain.hover.background')}; - border-color: ${dt('button.outlined.plain.border.color')}; - color: ${dt('button.outlined.plain.color')}; -} - -.p-button-outlined.p-button-plain:not(:disabled):active { - background: ${dt('button.outlined.plain.active.background')}; - border-color: ${dt('button.outlined.plain.border.color')}; - color: ${dt('button.outlined.plain.color')}; -} - -/* Text Button */ -.p-button-text { - background: transparent; - border-color: transparent; - color: ${dt('button.text.primary.color')}; -} - -.p-button-text:not(:disabled):hover { - background: ${dt('button.text.primary.hover.background')}; - border-color: transparent; - color: ${dt('button.text.primary.color')}; -} - -.p-button-text:not(:disabled):active { - background: ${dt('button.text.primary.active.background')}; - border-color: transparent; - color: ${dt('button.text.primary.color')}; -} - -.p-button-text.p-button-secondary { - background: transparent; - border-color: transparent; - color: ${dt('button.text.secondary.color')}; -} - -.p-button-text.p-button-secondary:not(:disabled):hover { - background: ${dt('button.text.secondary.hover.background')}; - border-color: transparent; - color: ${dt('button.text.secondary.color')}; -} - -.p-button-text.p-button-secondary:not(:disabled):active { - background: ${dt('button.text.secondary.active.background')}; - border-color: transparent; - color: ${dt('button.text.secondary.color')}; -} - -.p-button-text.p-button-success { - background: transparent; - border-color: transparent; - color: ${dt('button.text.success.color')}; -} - -.p-button-text.p-button-success:not(:disabled):hover { - background: ${dt('button.text.success.hover.background')}; - border-color: transparent; - color: ${dt('button.text.success.color')}; -} - -.p-button-text.p-button-success:not(:disabled):active { - background: ${dt('button.text.success.active.background')}; - border-color: transparent; - color: ${dt('button.text.success.color')}; -} - -.p-button-text.p-button-info { - background: transparent; - border-color: transparent; - color: ${dt('button.text.info.color')}; -} - -.p-button-text.p-button-info:not(:disabled):hover { - background: ${dt('button.text.info.hover.background')}; - border-color: transparent; - color: ${dt('button.text.info.color')}; -} - -.p-button-text.p-button-info:not(:disabled):active { - background: ${dt('button.text.info.active.background')}; - border-color: transparent; - color: ${dt('button.text.info.color')}; -} - -.p-button-text.p-button-warn { - background: transparent; - border-color: transparent; - color: ${dt('button.text.warn.color')}; -} - -.p-button-text.p-button-warn:not(:disabled):hover { - background: ${dt('button.text.warn.hover.background')}; - border-color: transparent; - color: ${dt('button.text.warn.color')}; -} - -.p-button-text.p-button-warn:not(:disabled):active { - background: ${dt('button.text.warn.active.background')}; - border-color: transparent; - color: ${dt('button.text.warn.color')}; -} - -.p-button-text.p-button-help { - background: transparent; - border-color: transparent; - color: ${dt('button.text.help.color')}; -} - -.p-button-text.p-button-help:not(:disabled):hover { - background: ${dt('button.text.help.hover.background')}; - border-color: transparent; - color: ${dt('button.text.help.color')}; -} - -.p-button-text.p-button-help:not(:disabled):active { - background: ${dt('button.text.help.active.background')}; - border-color: transparent; - color: ${dt('button.text.help.color')}; -} - -.p-button-text.p-button-danger { - background: transparent; - border-color: transparent; - color: ${dt('button.text.danger.color')}; -} - -.p-button-text.p-button-danger:not(:disabled):hover { - background: ${dt('button.text.danger.hover.background')}; - border-color: transparent; - color: ${dt('button.text.danger.color')}; -} - -.p-button-text.p-button-danger:not(:disabled):active { - background: ${dt('button.text.danger.active.background')}; - border-color: transparent; - color: ${dt('button.text.danger.color')}; -} - -.p-button-text.p-button-plain { - background: transparent; - border-color: transparent; - color: ${dt('button.text.plain.color')}; -} - -.p-button-text.p-button-plain:not(:disabled):hover { - background: ${dt('button.text.plain.hover.background')}; - border-color: transparent; - color: ${dt('button.text.plain.color')}; -} - -.p-button-text.p-button-plain:not(:disabled):active { - background: ${dt('button.text.plain.active.background')}; - border-color: transparent; - color: ${dt('button.text.plain.color')}; -} - -/* Link Button */ -.p-button-link { - background: transparent; - border-color: transparent; - color: ${dt('button.link.color')}; -} - -.p-button-link:not(:disabled):hover { - background: transparent; - border-color: transparent; - color: ${dt('button.link.hover.color')}; -} - -.p-button-link:not(:disabled):hover .p-button-label { - text-decoration: underline; -} - -.p-button-link:not(:disabled):active { - background: transparent; - border-color: transparent; - color: ${dt('button.link.active.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/buttongroup/index.js b/components/lib/themes/primeone/base/buttongroup/index.js deleted file mode 100644 index 8295744d7..000000000 --- a/components/lib/themes/primeone/base/buttongroup/index.js +++ /dev/null @@ -1,31 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-buttongroup .p-button { - margin: 0; -} - -.p-buttongroup .p-button:not(:last-child), -.p-buttongroup .p-button:not(:last-child):hover { - border-right: 0 none; -} - -.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) { - border-radius: 0; -} - -.p-buttongroup .p-button:first-of-type:not(:only-of-type) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.p-buttongroup .p-button:last-of-type:not(:only-of-type) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.p-buttongroup .p-button:focus { - position: relative; - z-index: 1; -} -` -}; diff --git a/components/lib/themes/primeone/base/card/index.js b/components/lib/themes/primeone/base/card/index.js deleted file mode 100644 index be58402d8..000000000 --- a/components/lib/themes/primeone/base/card/index.js +++ /dev/null @@ -1,35 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-card { - background: ${dt('card.background')}; - color: ${dt('card.color')}; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); - border-radius: 12px; - display: flex; - flex-direction: column; -} - -.p-card-caption { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.p-card-body { - padding: 1.5rem; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.p-card-title { - font-size: 1.25rem; - font-weight: 600; -} - -.p-card-subtitle { - font-weight: 400; - color: ${dt('card.subtitle.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/carousel/index.js b/components/lib/themes/primeone/base/carousel/index.js deleted file mode 100644 index 321b5cf88..000000000 --- a/components/lib/themes/primeone/base/carousel/index.js +++ /dev/null @@ -1,92 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-carousel { - display: flex; - flex-direction: column; -} - -.p-carousel-content-container { - display: flex; - flex-direction: column; - overflow: auto; -} - -.p-carousel-content { - display: flex; - flex-direction: row; -} - -.p-carousel-viewport { - overflow: hidden; - width: 100%; -} - -.p-carousel-item-list { - display: flex; - flex-direction: row; -} - -.p-carousel-prev-button, -.p-carousel-next-button { - align-self: center; -} - -.p-carousel-indicator-list { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - padding: 1rem; - gap: 0.5rem; - margin: 0; - list-style: none; -} - -.p-carousel-indicator-button { - display: flex; - align-items: center; - justify-content: center; - background: ${dt('carousel.indicator.background')}; - width: 2rem; - height: 0.5rem; - border: 0 none; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - border-radius: ${dt('rounded.base')}; - padding: 0; - margin: 0; - border: none; - user-select: none; -} - -.p-carousel-indicator-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-carousel-indicator-button:hover { - background: ${dt('carousel.indicator.hover.background')}; -} - -.p-carousel-indicator-active .p-carousel-indicator-button { - background: ${dt('carousel.indicator.active.background')}; -} - -.p-carousel-vertical .p-carousel-content { - flex-direction: column; -} - -.p-carousel-vertical .p-carousel-item-list { - flex-direction: column; - height: 100%; -} - -.p-items-hidden .p-carousel-item { - visibility: hidden; -} - -.p-items-hidden .p-carousel-item.p-carousel-item-active { - visibility: visible; -} -` -}; diff --git a/components/lib/themes/primeone/base/cascadeselect/index.js b/components/lib/themes/primeone/base/cascadeselect/index.js deleted file mode 100644 index 559215a87..000000000 --- a/components/lib/themes/primeone/base/cascadeselect/index.js +++ /dev/null @@ -1,186 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-cascadeselect { - display: inline-flex; - cursor: pointer; - position: relative; - user-select: none; - background: ${dt('cascadeselect.background')}; - border: 1px solid ${dt('cascadeselect.border.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - box-shadow: ${dt('cascadeselect.box.shadow')}; -} - -.p-cascadeselect:not(.p-disabled):hover { - border-color: ${dt('cascadeselect.hover.border.color')}; -} - -.p-cascadeselect:not(.p-disabled).p-focus { - border-color: ${dt('cascadeselect.focus.border.color')}; - outline: 0 none; -} - -.p-cascadeselect.p-variant-filled { - background: ${dt('cascadeselect.filled.background')}; -} - -.p-cascadeselect.p-variant-filled.p-focus { - background: ${dt('cascadeselect.filled.focus.background')}; -} - -.p-cascadeselect.p-invalid { - border-color: ${dt('cascadeselect.invalid.border.color')}; -} - -.p-cascadeselect.p-disabled { - opacity: 1; - background: ${dt('cascadeselect.disabled.background')}; -} - -.p-cascadeselect-dropdown { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - background: transparent; - color: ${dt('cascadeselect.toggle.color')}; - width: 2.5rem; - border-top-right-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; -} - -.p-cascadeselect-label { - display: block; - white-space: nowrap; - overflow: hidden; - flex: 1 1 auto; - width: 1%; - padding: 0.5rem 0.75rem; - text-overflow: ellipsis; - cursor: pointer; - color: ${dt('cascadeselect.color')}; - background: transparent; - border: 0 none; - outline: 0 none; -} - -.p-cascadeselect-label.p-placeholder { - color: ${dt('cascadeselect.placeholder.color')}; -} - -.p-cascadeselect-clearable .p-cascadeselect-label { - padding-right: 1.75rem; -} - -.p-cascadeselect.p-disabled .p-cascadeselect-label { - color: ${dt('cascadeselect.disabled.color')}; -} - -.p-cascadeselect-label-empty { - overflow: hidden; - visibility: hidden; -} - -.p-fluid .p-cascadeselect { - display: flex; -} - -.p-fluid .p-cascadeselect .p-cascadeselect-label { - width: 1%; -} - -.p-cascadeselect-overlay { - background: ${dt('cascadeselect.overlay.background')}; - color: ${dt('cascadeselect.overlay.color')}; - border: 1px solid ${dt('cascadeselect.overlay.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-cascadeselect .p-cascadeselect-overlay { - min-width: 100%; -} - -.p-cascadeselect-item-list { - position: absolute; - min-width: 100%; - z-index: 1; - display: none; -} - -.p-cascadeselect-list { - margin: 0; - padding: 0; - list-style-type: none; - min-width: 100%; - padding: 0.25rem 0.25rem; -} - -.p-cascadeselect-item { - cursor: pointer; - font-weight: normal; - white-space: nowrap; - margin: 2px 0; - border: 0 none; - color: ${dt('cascadeselect.item.color')}; - background: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; -} - -.p-cascadeselect-item:first-child { - margin-top: 0; -} - -.p-cascadeselect-item:last-child { - margin-bottom: 0; -} - -.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus { - background: ${dt('cascadeselect.item.focus.background')}; - color: ${dt('cascadeselect.item.focus.color')}; -} - -.p-cascadeselect-item:not(.p-cascadeselect-item-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon { - color: ${dt('cascadeselect.item.icon.focus.color')}; -} - -.p-cascadeselect-item-selected { - background: ${dt('cascadeselect.item.selected.background')}; - color: ${dt('cascadeselect.item.selected.color')}; -} - -.p-cascadeselect-item-selected.p-focus { - background: ${dt('cascadeselect.item.selected.focus.background')}; - color: ${dt('cascadeselect.item.selected.focus.color')}; -} - -.p-cascadeselect-item-active { - overflow: visible; - background: ${dt('cascadeselect.item.focus.background')}; - color: ${dt('cascadeselect.item.focus.color')}; -} - -.p-cascadeselect-item-active > .p-cascadeselect-item-list { - display: block; - left: 100%; - top: 0; -} - -.p-cascadeselect-item-content { - display: flex; - align-items: center; - overflow: hidden; - position: relative; - padding: 0.5rem 0.75rem; -} - -.p-cascadeselect-group-icon { - margin-left: auto; - font-size: 0.875rem; - color: ${dt('cascadeselect.item.icon.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/checkbox/index.js b/components/lib/themes/primeone/base/checkbox/index.js deleted file mode 100644 index c552a52a0..000000000 --- a/components/lib/themes/primeone/base/checkbox/index.js +++ /dev/null @@ -1,106 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-checkbox { - position: relative; - display: inline-flex; - user-select: none; - vertical-align: bottom; - width: ${dt('checkbox.width')}; - height: ${dt('checkbox.height')}; -} - -.p-checkbox-input { - cursor: pointer; - appearance: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - opacity: 0; - z-index: 1; - outline: 0 none; - border: 1px solid transparent; - border-radius: ${dt('checkbox.border.radius')}; -} - -.p-checkbox-box { - display: flex; - justify-content: center; - align-items: center; - border-radius: ${dt('checkbox.border.radius')}; - border: 1px solid ${dt('checkbox.border.color')}; - background: ${dt('checkbox.background')}; - width: ${dt('checkbox.width')}; - height: ${dt('checkbox.width')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - box-shadow: ${dt('checkbox.box.shadow')}; -} - -.p-checkbox-icon { - transition-duration: ${dt('transition.duration')}; - color: ${dt('checkbox.icon.color')}; - font-size: ${dt('checkbox.icon.size')}; - width: ${dt('checkbox.icon.size')}; - height: ${dt('checkbox.icon.size')}; -} - -.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - border-color: ${dt('checkbox.hover.border.color')}; -} - -.p-checkbox-checked .p-checkbox-box { - border-color: ${dt('checkbox.checked.border.color')}; - background: ${dt('checkbox.checked.background')}; -} - -.p-checkbox-checked .p-checkbox-icon { - color: ${dt('checkbox.icon.checked.color')}; -} - -.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background: ${dt('checkbox.checked.hover.background')}; - border-color: ${dt('checkbox.checked.hover.border.color')}; -} - -.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon { - color: ${dt('checkbox.icon.checked.hover.color')}; -} - -.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-checkbox.p-invalid > .p-checkbox-box { - border-color: ${dt('checkbox.invalid.border.color')}; -} - -.p-checkbox.p-variant-filled .p-checkbox-box { - background: ${dt('checkbox.filled.background')}; -} - -.p-checkbox-checked.p-variant-filled .p-checkbox-box { - background: ${dt('checkbox.checked.background')}; -} - -.p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { - background: ${dt('checkbox.checked.hover.background')}; -} - -.p-checkbox.p-disabled { - opacity: 1; -} - -.p-checkbox.p-disabled .p-checkbox-box { - background: ${dt('checkbox.disabled.background')}; -} - -.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon { - color: ${dt('checkbox.icon.disabled.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/chip/index.js b/components/lib/themes/primeone/base/chip/index.js deleted file mode 100644 index 03e6481df..000000000 --- a/components/lib/themes/primeone/base/chip/index.js +++ /dev/null @@ -1,47 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-chip { - display: inline-flex; - align-items: center; - background: ${dt('chip.background')}; - color: ${dt('chip.color')}; - border-radius: 16px; - padding: 0.25rem 0.75rem; -} - -.p-chip-label { - line-height: 1.5; -} - -.p-chip-icon { - line-height: 1.5; - margin-right: 0.5rem; -} - -.p-chip-image { - border-radius: 50%; - width: 2rem; - height: 2rem; - margin-left: -0.5rem; - margin-right: 0.5rem; -} - -.p-chip:has(.p-chip-remove-icon) { - padding-right: 0.5rem; -} - -.p-chip-remove-icon { - line-height: 1.5; - cursor: pointer; - margin-left: 0.375rem; - border-radius: 6px; - transition: outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-chip-remove-icon:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - ` -}; diff --git a/components/lib/themes/primeone/base/colorpicker/index.js b/components/lib/themes/primeone/base/colorpicker/index.js deleted file mode 100644 index 4ae601883..000000000 --- a/components/lib/themes/primeone/base/colorpicker/index.js +++ /dev/null @@ -1,110 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-colorpicker { - display: inline-block; - position: relative; -} - -.p-colorpicker-dragging { - cursor: pointer; -} - -.p-colorpicker-preview { - width: 1.5rem; - height: 1.5rem; - padding: 0; - border: 0 none; - border-radius: ${dt('rounded.base')}; - transition: outline-color ${dt('transition.duration')}; - outline-color: transparent; - cursor: pointer; -} - -.p-colorpicker-preview:enabled:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-colorpicker-panel { - background: ${dt('colorpicker.panel.background')}; - border: 1px solid ${dt('colorpicker.panel.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - width: 193px; - height: 166px; - position: absolute; - top: 0; - left: 0; -} - -.p-colorpicker-panel-inline { - box-shadow: none; - position: static; -} - -.p-colorpicker-content { - position: relative; -} - -.p-colorpicker-color-selector { - width: 150px; - height: 150px; - top: 8px; - left: 8px; - position: absolute; -} - -.p-colorpicker-color-background { - width: 100%; - height: 100%; - background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); -} - -.p-colorpicker-color-handle { - position: absolute; - top: 0px; - left: 150px; - border-radius: 100%; - width: 10px; - height: 10px; - border-width: 1px; - border-style: solid; - margin: -5px 0 0 -5px; - cursor: pointer; - opacity: 0.85; - border-color: ${dt('colorpicker.handle.color')}; -} - -.p-colorpicker-hue { - width: 17px; - height: 150px; - top: 8px; - left: 167px; - position: absolute; - opacity: 0.85; - background: linear-gradient(0deg, - red 0, - #ff0 17%, - #0f0 33%, - #0ff 50%, - #00f 67%, - #f0f 83%, - red); -} - -.p-colorpicker-hue-handle { - position: absolute; - top: 150px; - left: 0px; - width: 21px; - margin-left: -2px; - margin-top: -5px; - height: 10px; - border-width: 2px; - border-style: solid; - opacity: 0.85; - cursor: pointer; - border-color: ${dt('colorpicker.handle.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/confirmdialog/index.js b/components/lib/themes/primeone/base/confirmdialog/index.js deleted file mode 100644 index 8dfabaf84..000000000 --- a/components/lib/themes/primeone/base/confirmdialog/index.js +++ /dev/null @@ -1,13 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-confirmdialog .p-dialog-content { - display: flex; - align-items: center; - gap: 1rem; -} - -.p-confirmdialog-icon { - font-size: 2rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/confirmpopup/index.js b/components/lib/themes/primeone/base/confirmpopup/index.js deleted file mode 100644 index 5ada9c7bf..000000000 --- a/components/lib/themes/primeone/base/confirmpopup/index.js +++ /dev/null @@ -1,111 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-confirmpopup { - position: absolute; - margin-top: 10px; - top: 0; - left: 0; - background: ${dt('confirmpopup.background')}; - color: ${dt('confirmpopup.color')}; - border: 1px solid ${dt('confirmpopup.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-confirmpopup-content { - display: flex; - align-items: center; - padding: 1rem; -} - -.p-confirmpopup-icon { - font-size: 1.5rem; - width: 1.5rem; - height: 1.5rem; -} - -.p-confirmpopup-message { - margin-left: 1rem; -} - -.p-confirmpopup-footer { - display: flex; - justify-content: flex-end; - gap: 0.5rem; - padding: 0 1rem 1rem 1rem; -} - -.p-confirmpopup-footer button { - width: auto; -} - -.p-confirmpopup-footer button:last-child { - margin: 0; -} - -.p-confirmpopup-flipped { - margin-top: 0; - margin-bottom: 10px; -} - -.p-confirmpopup-enter-from { - opacity: 0; - transform: scaleY(0.8); -} - -.p-confirmpopup-leave-to { - opacity: 0; -} - -.p-confirmpopup-enter-active { - transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); -} - -.p-confirmpopup-leave-active { - transition: opacity 0.1s linear; -} - -.p-confirmpopup:after, -.p-confirmpopup:before { - bottom: 100%; - left: ${dt('{overlay.arrow.left} + 1.25rem', 0)}; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -.p-confirmpopup:after { - border-width: 8px; - margin-left: -8px; - border-style: solid; - border-color: transparent; - border-bottom-color: ${dt('confirmpopup.background')}; -} - -.p-confirmpopup:before { - border-width: 10px; - margin-left: -10px; - border-style: solid; - border-color: transparent; - border-bottom-color: ${dt('confirmpopup.border.color')}; -} - -.p-confirmpopup-flipped:after, -.p-confirmpopup-flipped:before { - bottom: auto; - top: 100%; -} - -.p-confirmpopup-flipped:after { - border-bottom-color: transparent; - border-top-color: ${dt('confirmpopup.background')}; -} - -.p-confirmpopup-flipped:before { - border-bottom-color: transparent; - border-top-color: ${dt('confirmpopup.border.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/contextmenu/index.js b/components/lib/themes/primeone/base/contextmenu/index.js deleted file mode 100644 index 1cc9e557d..000000000 --- a/components/lib/themes/primeone/base/contextmenu/index.js +++ /dev/null @@ -1,124 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-contextmenu { - padding: 0.25rem 0.25rem; - background: ${dt('contextmenu.background')}; - color: ${dt('contextmenu.color')}; - border: 1px solid ${dt('contextmenu.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - min-width: 12.5rem; -} - -.p-contextmenu-root-list, -.p-contextmenu-submenu { - margin: 0; - padding: 0; - list-style: none; - outline: 0 none; -} - -.p-contextmenu-submenu { - position: absolute; - min-width: 100%; - z-index: 1; - padding: 0.25rem 0.25rem; - background: ${dt('contextmenu.background')}; - color: ${dt('contextmenu.color')}; - border: 1px solid ${dt('contextmenu.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-contextmenu-item { - position: relative; - margin: 2px 0; -} - -.p-contextmenu-item:first-child { - margin-top: 0; -} -.p-contextmenu-item:last-child { - margin-bottom: 0; -} - -.p-contextmenu-item-content { - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; - color: ${dt('contextmenu.item.color')}; -} - -.p-contextmenu-item-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; - color: inherit; - padding: 0.5rem 0.75rem; - user-select: none; -} - -.p-contextmenu-item-label { - line-height: 1; -} - -.p-contextmenu-item-icon { - color: ${dt('contextmenu.item.icon.color')}; - margin-right: 0.5rem; -} - -.p-contextmenu-submenu-icon { - color: ${dt('contextmenu.item.icon.color')}; - margin-left: auto; - font-size: 0.875rem; - width: 0.875rem; - height: 0.875rem; -} - -.p-contextmenu-item.p-focus > .p-contextmenu-item-content { - color: ${dt('contextmenu.item.focus.color')}; - background: ${dt('contextmenu.item.focus.background')}; -} - -.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon, -.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon { - color: ${dt('contextmenu.item.icon.focus.color')}; -} - -.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover { - color: ${dt('contextmenu.item.focus.color')}; - background: ${dt('contextmenu.item.focus.background')}; -} - -.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon, -.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon { - color: ${dt('contextmenu.item.icon.focus.color')}; -} - -.p-contextmenu-item-active > .p-contextmenu-item-content { - color: ${dt('contextmenu.item.focus.color')}; - background: ${dt('contextmenu.item.focus.background')}; -} - -.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon, -.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon { - color: ${dt('contextmenu.item.icon.focus.color')}; -} - -.p-contextmenu-separator { - border-top: 1px solid ${dt('contextmenu.separator.border.color')}; - margin: 2px 0; -} - -.p-contextmenu-enter-from, -.p-contextmenu-leave-active { - opacity: 0; -} - -.p-contextmenu-enter-active { - transition: opacity 250ms; -} -` -}; diff --git a/components/lib/themes/primeone/base/datatable/index.js b/components/lib/themes/primeone/base/datatable/index.js deleted file mode 100644 index 08bd697f9..000000000 --- a/components/lib/themes/primeone/base/datatable/index.js +++ /dev/null @@ -1,581 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-datatable { - position: relative; -} - -.p-datatable-table { - border-spacing: 0px; - width: 100%; -} - -.p-datatable-sortable-column { - cursor: pointer; - user-select: none; - outline-color: transparent; -} - -.p-datatable-column-title, -.p-datatable-sort-icon, -.p-datatable-sort-badge { - vertical-align: middle; -} - -.p-datatable-sort-icon { - color: ${dt('datatable.sort.icon.color')}; - margin-left: 0.5rem; - transition: color ${dt('transition.duration')}; -} - -.p-datatable-sort-badge { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 50%; - height: 1rem; - min-width: 1rem; - line-height: 1rem; - margin-left: 0.5rem; -} - -.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover { - background: ${dt('datatable.header.cell.hover.background')}; - color: ${dt('datatable.header.cell.hover.color')}; -} - -.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon { - color: ${dt('datatable.sort.icon.hover.color')}; -} - -.p-datatable-column-sorted { - background: ${dt('highlight.background')}; - color: ${dt('highlight.color')}; -} - -.p-datatable-sortable-column:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: -1px; -} - -.p-datatable-column-sorted .p-datatable-sort-icon { - color: ${dt('highlight.color')}; -} - -.p-datatable-hoverable .p-datatable-selectable-row { - cursor: pointer; -} - -.p-datatable-scrollable > .p-datatable-table-container { - position: relative; -} - -.p-datatable-scrollable-table > .p-datatable-thead { - top: 0; - z-index: 1; -} - -.p-datatable-scrollable-table > .p-datatable-frozen-tbody { - position: sticky; - z-index: 1; -} - -.p-datatable-scrollable-table>.p-datatable-tfoot { - bottom: 0; - z-index: 1; -} - -.p-datatable-scrollable .p-datatable-frozen-column { - position: sticky; - background: inherit; -} - -.p-datatable-scrollable th.p-datatable-frozen-column { - z-index: 1; -} - -.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead, -.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead { - background: ${dt('datatable.header.cell.background')}; -} - -.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot, -.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { - background: ${dt('datatable.footer.cell.background')}; -} - -.p-datatable-flex-scrollable { - display: flex; - flex-direction: column; - height: 100%; -} - -.p-datatable-flex-scrollable>.p-datatable-table-container { - display: flex; - flex-direction: column; - flex: 1; - height: 100%; -} - -.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header { - position: sticky; - z-index: 1; -} - -/* Resizable */ -.p-datatable-resizable-table > .p-datatable-thead > tr > th, -.p-datatable-resizable-table > .p-datatable-tfoot > tr > td, -.p-datatable-resizable-table > .p-datatable-tbody > tr > td { - overflow: hidden; - white-space: nowrap; -} - -.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) { - background-clip: padding-box; - position: relative; -} - -.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer { - display: none; -} - -.p-datatable-column-resizer { - display: block; - position: absolute; - top: 0; - right: 0; - margin: 0; - width: 0.5rem; - height: 100%; - padding: 0px; - cursor: col-resize; - border: 1px solid transparent; -} - -.p-datatable-column-header-content { - display: flex; - align-items: center; -} - -.p-datatable-column-resize-indicator { - width: 1px; - position: absolute; - z-index: 10; - display: none; - background: ${dt('datatable.resizer.color')}; -} - -.p-datatable-row-reorder-indicator-up, -.p-datatable-row-reorder-indicator-down { - position: absolute; - display: none; -} - -.p-datatable-reorderable-column, -.p-datatable-reorderable-row-handle { - cursor: move; -} - -.p-datatable-mask { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - z-index: 2; -} - -.p-datatable-inline-filter { - display: flex; - align-items: center; - width: 100%; - gap: 0.5rem; -} - -.p-datatable-inline-filter .p-datatable-filter-element-container { - flex: 1 1 auto; - width: 1%; -} - -.p-datatable-filter-overlay { - background: ${dt('datatable.filter.overlay.background')}; - color: ${dt('datatable.filter.overlay.color')}; - border: 1px solid ${dt('datatable.filter.overlay.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - min-width: 12.5rem; -} - -.p-datatable-filter-constraint-list { - margin: 0; - list-style: none; - padding: 0.25rem 0.25rem; -} - -.p-datatable-filter-constraint { - margin: 2px 0; - padding: 0.5rem 0.75rem; - border: 0 none; - color: ${dt('datatable.filter.matchmode.item.color')}; - background: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')},; - border-radius: ${dt('rounded.sm')}; - cursor: pointer; -} - -.p-datatable-filter-constraint:first-child { - margin-top: 0; -} - -.p-datatable-filter-constraint:last-child { - margin-bottom: 0; -} - -.p-datatable-filter-constraint-selected { - background: ${dt('datatable.filter.matchmode.item.selected.background')}; - color: ${dt('datatable.filter.matchmode.item.selected.color')}; -} - -.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover { - background: ${dt('datatable.filter.matchmode.item.focus.background')}; - color: ${dt('datatable.filter.matchmode.item.focus.color')}; -} - -.p-datatable-filter-constraint:focus-visible { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: 2px; - box-shadow: 0 none; -} - -.p-datatable-filter-constraint-separator { - border-top: 1px solid ${dt('datatable.filter.matchmode.item.separator.border.color')}; - margin: 2px 0; -} - -.p-datatable-popover-filter { - display: inline-flex; - margin-left: auto; -} - -.p-datatable-filter-operator { - padding: 0; -} - -.p-datatable-filter-rule-list { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.p-datatable-filter-rule { - padding: 0; - border-bottom: 1px solid ${dt('datatable.filter.constraint.border.color')}; -} - -.p-datatable-filter-rule:last-child { - border-bottom: 0 none; -} - -.p-datatable-filter-constraint-dropdown { - margin-bottom: 0.5rem; -} - -.p-datatable-filter-remove-rule-button { - margin-top: 0.5rem; -} - -.p-datatable-filter-constraint:last-child .p-datatable-filter-remove-button { - margin-bottom: 0; -} - -.p-datatable-filter-overlay-popover { - background: ${dt('datatable.filter.overlay.background')}; - color: ${dt('datatable.filter.overlay.color')}; - border: 1px solid ${dt('datatable.filter.overlay.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - min-width: 12.5rem; - padding: 0.75rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.p-datatable-filter-add-rule-button { - padding: 0; -} - -.p-datatable-filter-buttonbar { - padding: 0; - display: flex; - align-items: center; - justify-content: space-between; -} - -.p-datatable-virtualscroller-spacer { - display: flex; -} - -.p-datatable .p-virtualscroller .p-virtualscroller-loading { - transform: none !important; - min-height: 0; - position: sticky; - top: 0; - left: 0; -} - -.p-datatable-paginator-top { - border: solid ${dt('datatable.header.border.color')}; - border-width: 0 0 1px 0; -} - -.p-datatable-header { - background: ${dt('datatable.header.background')}; - color: ${dt('datatable.header.color')}; - border: 1px solid ${dt('datatable.header.border.color')}; - border-width: 0 0 1px 0; - padding: 0.75rem 1rem; - font-weight: 600; -} - -.p-datatable-footer { - background: ${dt('datatable.footer.background')}; - color: ${dt('datatable.footer.color')}; - border: 1px solid ${dt('datatable.footer.border.color')}; - border-width: 0 0 1px 0; - padding: 0.75rem 1rem; - font-weight: 600; -} - -.p-datatable-thead > tr > th { - text-align: left; - padding: 0.75rem 1rem; - background: ${dt('datatable.header.cell.background')}; - border: 1px solid ${dt('datatable.header.cell.border.color')}; - border-width: 0 0 1px 0; - color: ${dt('datatable.header.cell.color')}; - font-weight: 600; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-datatable-tbody > tr { - outline-color: transparent; - background: ${dt('datatable.row.background')}; - color: ${dt('datatable.row.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-datatable-tbody > tr > td { - text-align: left; - border: 1px solid ${dt('datatable.body.cell.border.color')}; - border-width: 0 0 1px 0; - padding: 0.75rem 1rem; -} - -.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover { - background: ${dt('datatable.row.hover.background')}; - color: ${dt('datatable.row.hover.color')}; -} - -.p-datatable-tbody > tr.p-datatable-row-selected { - background: ${dt('highlight.background')}; - color: ${dt('highlight.color')}; -} - -.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td { - border-bottom-color: ${dt('datatable.body.cell.selected.border.color')}; -} - -.p-datatable-tbody > tr.p-datatable-row-selectedt > td { - border-bottom-color: ${dt('datatable.body.cell.selected.border.color')}; -} - -.p-datatable-tbody > tr:focus-visible { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: -1px; -} - -.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: -1px; -} - -.p-datatable-tfoot > tr > td { - text-align: left; - padding: 0.75rem 1rem; - border: 1px solid ${dt('datatable.footer.cell.border.color')}; - border-width: 0 0 1px 0; - font-weight: 600; - color: ${dt('datatable.footer.cell.color')}; - background: ${dt('datatable.footer.cell.background')}; -} - -.p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')}; -} - -.p-datatable-tbody>tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 ${dt('datatable.drop.point.color')}; -} - -.p-datatable-loading-icon { - font-size: 2rem; - width: 2rem; - height: 2rem; -} - -.p-datatable-gridlines .p-datatable-header { - border-width: 1px; -} - -.p-datatable-gridlines .p-datatable-footer { - border-width: 0 1px 1px 1px; -} - -.p-datatable-gridlines .p-datatable-paginator-top { - border-width: 0 1px 0 1px; -} - -.p-datatable-gridlines .p-datatable-paginator-bottom { - border-width: 0 1px 1px 1px; - border-style: solid; - border-color: ${dt('datatable.footer.border.color')}; -} - -.p-datatable-gridlines .p-datatable-thead > tr > th { - border-width: 1px 0 1px 1px; -} - -.p-datatable-gridlines .p-datatable-thead > tr > th:last-child { - border-width: 1px; -} - -.p-datatable-gridlines .p-datatable-tbody > tr > td { - border-width: 1px 0 0 1px; -} - -.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child { - border-width: 1px 1px 0 1px; -} - -p-datatable-gridlines .p-datatable-tbody > tr:last-child>td { - border-width: 1px 0 1px 1px; -} - -.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child { - border-width: 1px; -} - -.p-datatable-gridlines .p-datatable-tfoot>tr>td { - border-width: 1px 0 1px 1px; -} - -.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child { - border-width: 1px 1px 1px 1px; -} - -.p-datatable.p-datatable-gridlines .p-datatable-thead +.p-datatable-tfoot > tr > td { - border-width: 0 0 1px 1px; -} - -.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child { - border-width: 0 1px 1px 1px; -} - -.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td { - border-width: 0 0 1px 1px; -} - -.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child { - border-width: 0 1px 1px 1px; -} - -.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td { - border-width: 0 0 0 1px; -} - -.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child { - border-width: 0 1px 0 1px; -} - -.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { - background: ${dt('datatable.row.striped.background')}); -} - -.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { - background: ${dt('highlight.background')}); - color: ${dt('highlight.color')}); -} - -.p-datatable.p-datatable-sm .p-datatable-header { - padding: 0.375rem 0.5rem; -} - -.p-datatable.p-datatable-sm .p-datatable-thead > tr > th { - padding: 0.375rem 0.5rem; -} - -.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td { - padding: 0.375rem 0.5rem; -} - -.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td { - padding: 0.375rem 0.5rem; -} - -.p-datatable.p-datatable-sm .p-datatable-footer { - padding: 0.375rem 0.5rem; -} - -.p-datatable.p-datatable-lg .p-datatable-header { - padding: 0.9375rem 1.25rem; -} - -.p-datatable.p-datatable-lg .p-datatable-thead > tr > th { - padding: 0.9375rem 1.25rem; -} - -.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td { - padding: 0.9375rem 1.25rem; -} - -.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td { - padding: 0.9375rem 1.25rem; -} - -.p-datatable.p-datatable-lg .p-datatable-footer { - padding: 0.9375rem 1.25rem; -} - -.p-datatable-row-toggle-button { - display: inline-flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - width: 1.75rem; - height: 1.75rem; - color: ${dt('datatable.row.action.color')}; - border: 0 none; - background: transparent; - cursor: pointer; - border-radius: 50%; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - user-select: none; -} - -.p-datatable-row-toggle-button:enabled:hover { - color: ${dt('datatable.row.action.hover.color')}; - background: ${dt('datatable.row.action.hover.background')}; -} - -.p-datatable-row-toggle-button:focus-visible { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: 2px; -} - -.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover{ - background: ${dt('datatable.row.action.highlight.hover.background')}; - color: inherit; -} -` -}; diff --git a/components/lib/themes/primeone/base/dataview/index.js b/components/lib/themes/primeone/base/dataview/index.js deleted file mode 100644 index 1eee36bc4..000000000 --- a/components/lib/themes/primeone/base/dataview/index.js +++ /dev/null @@ -1,34 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-dataview-header { - background: ${dt('dataview.header.background')}; - color: ${dt('dataview.header.color')}; - border: 1px solid ${dt('dataview.header.border.color')}; - border-width: 0 0 1px 0; - padding: 0.75rem 1rem; -} - -.p-dataview-content { - background: ${dt('dataview.content.background')}; - color: ${dt('dataview.content.color')}; -} - -.p-dataview-footer { - background: ${dt('dataview.footer.background')}; - color: ${dt('dataview.footer.color')}; - border: 1px solid ${dt('dataview.footer.border.color')}; - border-width: 1px 0 0 0; - padding: 0.75rem 1rem; -} - -.p-dataview-paginator-top { - border: solid ${dt('dataview.header.border.color')}; - border-width: 0 0 1px 0; -} - -.p-dataview-paginator-bottom { - border: solid ${dt('dataview.footer.border.color')}; - border-width: 1px 0 0 0; -} -` -}; diff --git a/components/lib/themes/primeone/base/datepicker/index.js b/components/lib/themes/primeone/base/datepicker/index.js deleted file mode 100644 index 16af756f9..000000000 --- a/components/lib/themes/primeone/base/datepicker/index.js +++ /dev/null @@ -1,337 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-datepicker { - display: inline-flex; - max-width: 100%; -} - -.p-datepicker-input { - flex: 1 1 auto; - width: 1%; -} - -.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.p-datepicker-dropdown { - cursor: pointer; - display: inline-flex; - cursor: pointer; - user-select: none; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - width: ${dt('datepicker.dropdown.width')}; - border-top-right-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; - background: ${dt('datepicker.dropdown.background')}; - border: 1px solid ${dt('datepicker.dropdown.border.color')}; - border-left: 0 none; - background: ${dt('datepicker.dropdown.background')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-datepicker-dropdown:not(:disabled):hover { - background: ${dt('datepicker.dropdown.hover.background')}; - border-color: ${dt('datepicker.dropdown.hover.border.color')}; - background: ${dt('datepicker.dropdown.hover.background')}; -} - -.p-datepicker-dropdown:not(:disabled):active { - background: ${dt('datepicker.dropdown.active.background')}; - border-color: ${dt('datepicker.dropdown.active.border.color')}; - background: ${dt('datepicker.dropdown.active.background')}; -} - -.p-datepicker-dropdown:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-datepicker:has(.p-datepicker-input-icon) { - position: relative; -} - -.p-datepicker:has(.p-datepicker-input-icon) .p-datepicker-input { - padding-right: 2.5rem; -} - -.p-datepicker-input-icon { - cursor: pointer; - position: absolute; - top: 50%; - right: .75rem; - margin-top: -.5rem; -} - -.p-fluid .p-datepicker { - display: flex; -} - -.p-fluid .p-datepicker-input { - width: 1%; -} - -.p-datepicker .p-datepicker-panel { - min-width: 100%; -} - -.p-datepicker-panel { - width: auto; - padding: 0.75rem; - background: ${dt('datepicker.background')}; - color: ${dt('datepicker.color')}; - border: 1px solid ${dt('datepicker.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-datepicker-panel-inline { - display: inline-block; - overflow-x: auto; - box-shadow: none; -} - -.p-datepicker-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 0 0.5rem 0; - font-weight: 500; - background: ${dt('datepicker.header.background')}; - color: ${dt('datepicker.header.color')}; - border-bottom: 1px solid ${dt('datepicker.header.border.color')}; -} - -.p-datepicker-title { - margin: 0 auto; - line-height: 1.75rem; -} - -.p-datepicker-view-year, -.p-datepicker-view-month { - font-weight: 500; - padding: 0.25rem; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-datepicker-view-month { - margin-right: 0.5rem; - color: ${dt('datepicker.month.picker.color')}; -} - -.p-datepicker-view-year { - margin-right: 0.5rem; - color: ${dt('datepicker.year.picker.color')}; -} - -.p-datepicker-view-month:enabled:hover { - background: ${dt('datepicker.month.picker.hover.background')}; - color: ${dt('datepicker.month.picker.hover.color')}; -} - -.p-datepicker-view-year:enabled:hover { - background: ${dt('datepicker.year.picker.hover.background')}; - color: ${dt('datepicker.year.picker.hover.color')}; -} - -.p-datepicker-datepicker-container { - display: flex; -} - -.p-datepicker-datepicker-container .p-datepicker-datepicker { - flex: 1 1 auto; - border-left: 1px solid ${dt('datepicker.group.border.color')}; - padding-right: 0.75rem; - padding-left: 0.75rem; - padding-top: 0; - padding-bottom: 0; -} - -.p-datepicker-datepicker-container .p-datepicker-datepicker:first-child { - padding-left: 0; - border-left: 0 none; -} - -.p-datepicker-datepicker-container .p-datepicker-datepicker:last-child { - padding-right: 0; -} - -.p-datepicker-day-view { - width: 100%; - border-collapse: collapse; - font-size: 1rem; - margin: 0.5rem 0 0 0; -} - -.p-datepicker-weekday-cell { - padding: 0.25rem; -} - -.p-datepicker-weekday { - font-weight: 500; -} - -.p-datepicker-day-cell { - padding: 0.25rem; -} - -.p-datepicker-day { - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - margin: 0 auto; - overflow: hidden; - position: relative; - width: 2rem; - height: 2rem; - border-radius: 50%; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border: 1px solid transparent; - outline-color: transparent; - color: ${dt('datepicker.date.color')}; -} - -.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover { - background: ${dt('datepicker.date.hover.background')}; - color: ${dt('datepicker.date.hover.color')}; -} - -.p-datepicker-day:focus-visible { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-datepicker-day-selected { - background: ${dt('datepicker.date.selected.background')}; - color: ${dt('datepicker.date.selected.color')}; -} - -.p-datepicker-today > .p-datepicker-day { - background: ${dt('datepicker.today.background')}; - color: ${dt('datepicker.today.color')}; -} - -.p-datepicker-today > .p-datepicker-day-selected { - background: ${dt('datepicker.date.selected.background')}; - color: ${dt('datepicker.date.selected.color')}; -} - -.p-datepicker-month-view { - margin: 0.5rem 0 0 0; -} - -.p-datepicker-month { - width: 33.3%; - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; - overflow: hidden; - position: relative; - padding: 0.25rem; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - color: ${dt('datepicker.month.color')}; -} - -.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover { - color: ${dt('datepicker.month.hover.color')}; - background: ${dt('datepicker.month.hover.background')}; -} - -.p-datepicker-month-selected { - color: ${dt('datepicker.month.selected.color')}; - background: ${dt('datepicker.month.selected.background')}; -} - -.p-datepicker-month:not(.p-disabled):focus-visible { - outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')}; - outline-offset: 0; -} - -.p-datepicker-year-view { - margin: 0.5rem 0 0 0; -} - -.p-datepicker-year { - width: 50%; - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; - overflow: hidden; - position: relative; - padding: 0.25rem; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - color: ${dt('datepicker.year.color')}; -} - -.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover { - color: ${dt('datepicker.year.hover.color')}; - background: ${dt('datepicker.year.hover.background')}; -} - -.p-datepicker-year-selected { - color: ${dt('datepicker.year.selected.color')}; - background: ${dt('datepicker.year.selected.background')}; -} - -.p-datepicker-year:not(.p-disabled):focus-visible { - outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')}; - outline-offset: 0; -} - -.p-datepicker-buttonbar { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0 0 0; - border-top: 1px solid ${dt('datepicker.buttonbar.border.color')}; -} - -.p-datepicker-buttonbar .p-button { - width: auto; -} - -.p-datepicker-time-picker { - display: flex; - justify-content: center; - align-items: center; - border-top: 1px solid ${dt('datepicker.timepicker.border.color')}; - padding: 0; -} - -.p-datepicker-datepicker-group + .p-timepicker { - margin-top: 0.5rem; - padding-top: 0.5rem; -} - -.p-datepicker-time-picker > div { - display: flex; - align-items: center; - flex-direction: column; - padding: 0 0.5rem; -} - -.p-datepicker-time-picker button:last-child { - margin-top: 0.2em; -} - -.p-datepicker-time-picker span { - font-size: 1rem; -} - -.p-datepicker-timeonly .p-datepicker-time-picker { - border-top: 0 none; -} -` -}; diff --git a/components/lib/themes/primeone/base/dialog/index.js b/components/lib/themes/primeone/base/dialog/index.js deleted file mode 100644 index b247a2d24..000000000 --- a/components/lib/themes/primeone/base/dialog/index.js +++ /dev/null @@ -1,131 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-dialog { - max-height: 90%; - transform: scale(1); - border-radius: ${dt('rounded.xl')}; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); - background: ${dt('dialog.background')}; - border: 1px solid ${dt('dialog.border.color')}; - color: ${dt('dialog.color')}; -} - -.p-dialog-content { - overflow-y: auto; - padding: 0 1.5rem 1.5rem 1.5rem; -} - -.p-dialog-header { - display: flex; - align-items: center; - justify-content: space-between; - flex-shrink: 0; - padding: 1.5rem; -} - -.p-dialog-title { - font-weight: 600; - font-size: 1.25rem; -} - -.p-dialog-footer { - flex-shrink: 0; - padding: 0 1.5rem 1.5rem 1.5rem; - display: flex; - justify-content: flex-end; - gap: 0.5rem; -} - -.p-dialog-header-actions { - display: flex; - align-items: center; - gap: 0.5rem; -} -.p-dialog-enter-active { - transition: all 150ms cubic-bezier(0, 0, 0.2, 1); -} - -.p-dialog-leave-active { - transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); -} - -.p-dialog-enter-from, -.p-dialog-leave-to { - opacity: 0; - transform: scale(0.7); -} - -.p-dialog-top .p-dialog, -.p-dialog-bottom .p-dialog, -.p-dialog-left .p-dialog, -.p-dialog-right .p-dialog, -.p-dialog-topleft .p-dialog, -.p-dialog-topright .p-dialog, -.p-dialog-bottomleft .p-dialog, -.p-dialog-bottomright .p-dialog { - margin: 0.75rem; - transform: translate3d(0px, 0px, 0px); -} - -.p-dialog-top .p-dialog-enter-active, -.p-dialog-top .p-dialog-leave-active, -.p-dialog-bottom .p-dialog-enter-active, -.p-dialog-bottom .p-dialog-leave-active, -.p-dialog-left .p-dialog-enter-active, -.p-dialog-left .p-dialog-leave-active, -.p-dialog-right .p-dialog-enter-active, -.p-dialog-right .p-dialog-leave-active, -.p-dialog-topleft .p-dialog-enter-active, -.p-dialog-topleft .p-dialog-leave-active, -.p-dialog-topright .p-dialog-enter-active, -.p-dialog-topright .p-dialog-leave-active, -.p-dialog-bottomleft .p-dialog-enter-active, -.p-dialog-bottomleft .p-dialog-leave-active, -.p-dialog-bottomright .p-dialog-enter-active, -.p-dialog-bottomright .p-dialog-leave-active { - transition: all 0.3s ease-out; -} - -.p-dialog-top .p-dialog-enter-from, -.p-dialog-top .p-dialog-leave-to { - transform: translate3d(0px, -100%, 0px); -} - -.p-dialog-bottom .p-dialog-enter-from, -.p-dialog-bottom .p-dialog-leave-to { - transform: translate3d(0px, 100%, 0px); -} - -.p-dialog-left .p-dialog-enter-from, -.p-dialog-left .p-dialog-leave-to, -.p-dialog-topleft .p-dialog-enter-from, -.p-dialog-topleft .p-dialog-leave-to, -.p-dialog-bottomleft .p-dialog-enter-from, -.p-dialog-bottomleft .p-dialog-leave-to { - transform: translate3d(-100%, 0px, 0px); -} - -.p-dialog-right .p-dialog-enter-from, -.p-dialog-right .p-dialog-leave-to, -.p-dialog-topright .p-dialog-enter-from, -.p-dialog-topright .p-dialog-leave-to, -.p-dialog-bottomright .p-dialog-enter-from, -.p-dialog-bottomright .p-dialog-leave-to { - transform: translate3d(100%, 0px, 0px); -} - -.p-dialog-maximized { - width: 100vw !important; - height: 100vh !important; - top: 0px !important; - left: 0px !important; - max-height: 100%; - height: 100%; - border-radius: 0; -} - -.p-dialog-maximized .p-dialog-content { - flex-grow: 1; -} -` -}; diff --git a/components/lib/themes/primeone/base/divider/index.js b/components/lib/themes/primeone/base/divider/index.js deleted file mode 100644 index 0ffb92e68..000000000 --- a/components/lib/themes/primeone/base/divider/index.js +++ /dev/null @@ -1,80 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-divider-horizontal { - display: flex; - width: 100%; - position: relative; - align-items: center; - margin: 1rem 0; - padding: 0 1rem; -} - -.p-divider-horizontal:before { - position: absolute; - display: block; - top: 50%; - left: 0; - width: 100%; - content: ""; - border-top: 1px solid ${dt('divider.border.color')}; -} - -.p-divider-horizontal .p-divider-content { - padding: 0 0.5rem; -} - -.p-divider-vertical { - min-height: 100%; - margin: 0 1rem; - display: flex; - position: relative; - justify-content: center; - margin: 0 1rem; - padding: 1rem 0; -} - -.p-divider-vertical:before { - position: absolute; - display: block; - top: 0; - left: 50%; - height: 100%; - content: ""; - border-left: 1px solid ${dt('divider.border.color')}; -} - -.p-divider.p-divider-vertical .p-divider-content { - padding: 0.5rem 0; -} - -.p-divider-content { - z-index: 1; - background: ${dt('divider.content.background')}; - color: ${dt('divider.content.color')}; -} - -.p-divider-solid.p-divider-horizontal:before { - border-top-style: solid; -} - -.p-divider-solid.p-divider-vertical:before { - border-left-style: solid; -} - -.p-divider-dashed.p-divider-horizontal:before { - border-top-style: dashed; -} - -.p-divider-dashed.p-divider-vertical:before { - border-left-style: dashed; -} - -.p-divider-dotted.p-divider-horizontal:before { - border-top-style: dotted; -} - -.p-divider-dotted.p-divider-vertical:before { - border-left-style: dotted; -} - ` -}; diff --git a/components/lib/themes/primeone/base/dock/index.js b/components/lib/themes/primeone/base/dock/index.js deleted file mode 100644 index d3ea3311b..000000000 --- a/components/lib/themes/primeone/base/dock/index.js +++ /dev/null @@ -1,126 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-dock { - position: absolute; - z-index: 1; - display: flex; - justify-content: center; - align-items: center; - pointer-events: none; -} - -.p-dock-list-container { - display: flex; - pointer-events: auto; - background: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - padding: 0.5rem 0.5rem; - border-radius: 0.5rem; -} - -.p-dock-list { - margin: 0; - padding: 0; - list-style: none; - display: flex; - align-items: center; - justify-content: center; - outline: 0 none; -} - -.p-dock-item { - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - will-change: transform; - padding: 0.5rem; - border-radius: 6px; -} - -.p-dock-item.p-focus { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-dock-item-link { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - cursor: default; - width: 3rem; - height: 3rem; -} - -.p-dock-top { - left: 0; - top: 0; - width: 100%; -} - -.p-dock-top .p-dock-item { - transform-origin: center top; -} - -.p-dock-bottom { - left: 0; - bottom: 0; - width: 100%; -} - -.p-dock-bottom .p-dock-item { - transform-origin: center bottom; -} - -.p-dock-right { - right: 0; - top: 0; - height: 100%; -} - -.p-dock-right .p-dock-item { - transform-origin: center right; -} - -.p-dock-right .p-dock-list { - flex-direction: column; -} - -.p-dock-left { - left: 0; - top: 0; - height: 100%; -} - -.p-dock-left .p-dock-item { - transform-origin: center left; -} - -.p-dock-left .p-dock-list { - flex-direction: column; -} - -.p-dock-mobile.p-dock-top .p-dock-list-container, -.p-dock-mobile.p-dock-bottom .p-dock-list-container { - overflow-x: auto; - width: 100%; -} -.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, -.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list { - margin: 0 auto; -} -.p-dock-mobile.p-dock-left .p-dock-list-container, -.p-dock-mobile.p-dock-right .p-dock-list-container { - overflow-y: auto; - height: 100%; -} -.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, -.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list { - margin: auto 0; -} -.p-dock-mobile .p-dock-list .p-dock-item { - transform: none; - margin: 0; -} -` -}; diff --git a/components/lib/themes/primeone/base/drawer/index.js b/components/lib/themes/primeone/base/drawer/index.js deleted file mode 100644 index b5cf974d7..000000000 --- a/components/lib/themes/primeone/base/drawer/index.js +++ /dev/null @@ -1,151 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-drawer { - display: flex; - flex-direction: column; - pointer-events: auto; - transform: translate3d(0px, 0px, 0px); - position: relative; - transition: transform 0.3s; - background: ${dt('drawer.background')}; - color: ${dt('drawer.color')}; - border: 1px solid ${dt('drawer.border.color')}; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); -} - -.p-drawer-content { - overflow-y: auto; - flex-grow: 1; - padding: 0 1.125rem 1.125rem 1.125rem; -} - -.p-drawer-header { - display: flex; - align-items: center; - justify-content: space-between; - flex-shrink: 0; - padding: 1.125rem; -} - -.p-drawer-title { - font-weight: 600; - font-size: 1.25rem; -} - -.p-drawer-full .p-drawer { - transition: none; - transform: none; - width: 100vw !important; - height: 100vh !important; - max-height: 100%; - top: 0px !important; - left: 0px !important; - border-width: 1px; -} - -.p-drawer-left .p-drawer-enter-from, -.p-drawer-left .p-drawer-leave-to { - transform: translateX(-100%); -} - -.p-drawer-right .p-drawer-enter-from, -.p-drawer-right .p-drawer-leave-to { - transform: translateX(100%); -} - -.p-drawer-top .p-drawer-enter-from, -.p-drawer-top .p-drawer-leave-to { - transform: translateY(-100%); -} - -.p-drawer-bottom .p-drawer-enter-from, -.p-drawer-bottom .p-drawer-leave-to { - transform: translateY(100%); -} - -.p-drawer-full .p-drawer-enter-from, -.p-drawer-full .p-drawer-leave-to { - opacity: 0; -} - -.p-drawer-full .p-drawer-enter-active, -.p-drawer-full .p-drawer-leave-active { - transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.p-drawer-left .p-drawer { - width: 20rem; - height: 100%; - border-right-width: 1px; -} - -.p-drawer-right .p-drawer { - width: 20rem; - height: 100%; - border-left-width: 1px; -} - -.p-drawer-top .p-drawer { - height: 10rem; - width: 100%; - border-bottom-width: 1px; -} - -.p-drawer-bottom .p-drawer { - height: 10rem; - width: 100%; - border-top-width: 1px; -} - -.p-drawer-left .p-drawer-sm, -.p-drawer-right .p-drawer-sm { - width: 20rem; -} - -.p-drawer-left .p-drawer-md, -.p-drawer-right .p-drawer-md { - width: 40rem; -} - -.p-drawer-left .p-drawer-lg, -.p-drawer-right .p-drawer-lg { - width: 60rem; -} - -.p-drawer-top .p-drawer-sm, -.p-drawer-bottom .p-drawer-sm { - height: 10rem; -} - -.p-drawer-top .p-drawer-md, -.p-drawer-bottom .p-drawer-md { - height: 20rem; -} - -.p-drawer-top .p-drawer-lg, -.p-drawer-bottom .p-drawer-lg { - height: 30rem; -} - -.p-drawer-left .p-drawer-content, -.p-drawer-right .p-drawer-content, -.p-drawer-top .p-drawer-content, -.p-drawer-bottom .p-drawer-content { - width: 100%; - height: 100%; -} - -@media screen and (max-width: 64em) { - .p-drawer-left .p-drawer-lg, - .p-drawer-left .p-drawer-md, - .p-drawer-right .p-drawer-lg, - .p-drawer-right .p-drawer-md { - width: 20rem; - } -} - -.p-drawer-open { - display: flex; -} -` -}; diff --git a/components/lib/themes/primeone/base/editor/index.js b/components/lib/themes/primeone/base/editor/index.js deleted file mode 100644 index dcd063b56..000000000 --- a/components/lib/themes/primeone/base/editor/index.js +++ /dev/null @@ -1,1072 +0,0 @@ -export default { - css: ({ dt }) => ` -/*! -* Quill Editor v1.3.3 -* https://quilljs.com/ -* Copyright (c) 2014, Jason Chen -* Copyright (c) 2013, salesforce.com -*/ -.ql-container { - box-sizing: border-box; - font-family: Helvetica, Arial, sans-serif; - font-size: 13px; - height: 100%; - margin: 0px; - position: relative; -} -.ql-container.ql-disabled .ql-tooltip { - visibility: hidden; -} -.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before { - pointer-events: none; -} -.ql-clipboard { - left: -100000px; - height: 1px; - overflow-y: hidden; - position: absolute; - top: 50%; -} -.ql-clipboard p { - margin: 0; - padding: 0; -} -.ql-editor { - box-sizing: border-box; - line-height: 1.42; - height: 100%; - outline: none; - overflow-y: auto; - padding: 12px 15px; - tab-size: 4; - -moz-tab-size: 4; - text-align: left; - white-space: pre-wrap; - word-wrap: break-word; -} -.ql-editor > * { - cursor: text; -} -.ql-editor p, -.ql-editor ol, -.ql-editor ul, -.ql-editor pre, -.ql-editor blockquote, -.ql-editor h1, -.ql-editor h2, -.ql-editor h3, -.ql-editor h4, -.ql-editor h5, -.ql-editor h6 { - margin: 0; - padding: 0; - counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; -} -.ql-editor ol, -.ql-editor ul { - padding-left: 1.5rem; -} -.ql-editor ol > li, -.ql-editor ul > li { - list-style-type: none; -} -.ql-editor ul > li::before { - content: '\\2022'; -} -.ql-editor ul[data-checked='true'], -.ql-editor ul[data-checked='false'] { - pointer-events: none; -} -.ql-editor ul[data-checked='true'] > li *, -.ql-editor ul[data-checked='false'] > li * { - pointer-events: all; -} -.ql-editor ul[data-checked='true'] > li::before, -.ql-editor ul[data-checked='false'] > li::before { - color: #777; - cursor: pointer; - pointer-events: all; -} -.ql-editor ul[data-checked='true'] > li::before { - content: '\\2611'; -} -.ql-editor ul[data-checked='false'] > li::before { - content: '\\2610'; -} -.ql-editor li::before { - display: inline-block; - white-space: nowrap; - width: 1.2rem; -} -.ql-editor li:not(.ql-direction-rtl)::before { - margin-left: -1.5rem; - margin-right: 0.3rem; - text-align: right; -} -.ql-editor li.ql-direction-rtl::before { - margin-left: 0.3rem; - margin-right: -1.5rem; -} -.ql-editor ol li:not(.ql-direction-rtl), -.ql-editor ul li:not(.ql-direction-rtl) { - padding-left: 1.5rem; -} -.ql-editor ol li.ql-direction-rtl, -.ql-editor ul li.ql-direction-rtl { - padding-right: 1.5rem; -} -.ql-editor ol li { - counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; - counter-increment: list-0; -} -.ql-editor ol li:before { - content: counter(list-0, decimal) '. '; -} -.ql-editor ol li.ql-indent-1 { - counter-increment: list-1; -} -.ql-editor ol li.ql-indent-1:before { - content: counter(list-1, lower-alpha) '. '; -} -.ql-editor ol li.ql-indent-1 { - counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; -} -.ql-editor ol li.ql-indent-2 { - counter-increment: list-2; -} -.ql-editor ol li.ql-indent-2:before { - content: counter(list-2, lower-roman) '. '; -} -.ql-editor ol li.ql-indent-2 { - counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; -} -.ql-editor ol li.ql-indent-3 { - counter-increment: list-3; -} -.ql-editor ol li.ql-indent-3:before { - content: counter(list-3, decimal) '. '; -} -.ql-editor ol li.ql-indent-3 { - counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; -} -.ql-editor ol li.ql-indent-4 { - counter-increment: list-4; -} -.ql-editor ol li.ql-indent-4:before { - content: counter(list-4, lower-alpha) '. '; -} -.ql-editor ol li.ql-indent-4 { - counter-reset: list-5 list-6 list-7 list-8 list-9; -} -.ql-editor ol li.ql-indent-5 { - counter-increment: list-5; -} -.ql-editor ol li.ql-indent-5:before { - content: counter(list-5, lower-roman) '. '; -} -.ql-editor ol li.ql-indent-5 { - counter-reset: list-6 list-7 list-8 list-9; -} -.ql-editor ol li.ql-indent-6 { - counter-increment: list-6; -} -.ql-editor ol li.ql-indent-6:before { - content: counter(list-6, decimal) '. '; -} -.ql-editor ol li.ql-indent-6 { - counter-reset: list-7 list-8 list-9; -} -.ql-editor ol li.ql-indent-7 { - counter-increment: list-7; -} -.ql-editor ol li.ql-indent-7:before { - content: counter(list-7, lower-alpha) '. '; -} -.ql-editor ol li.ql-indent-7 { - counter-reset: list-8 list-9; -} -.ql-editor ol li.ql-indent-8 { - counter-increment: list-8; -} -.ql-editor ol li.ql-indent-8:before { - content: counter(list-8, lower-roman) '. '; -} -.ql-editor ol li.ql-indent-8 { - counter-reset: list-9; -} -.ql-editor ol li.ql-indent-9 { - counter-increment: list-9; -} -.ql-editor ol li.ql-indent-9:before { - content: counter(list-9, decimal) '. '; -} -.ql-editor .ql-indent-1:not(.ql-direction-rtl) { - padding-left: 3rem; -} -.ql-editor li.ql-indent-1:not(.ql-direction-rtl) { - padding-left: 4.5rem; -} -.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { - padding-right: 3rem; -} -.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { - padding-right: 4.5rem; -} -.ql-editor .ql-indent-2:not(.ql-direction-rtl) { - padding-left: 6rem; -} -.ql-editor li.ql-indent-2:not(.ql-direction-rtl) { - padding-left: 7.5rem; -} -.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { - padding-right: 6rem; -} -.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { - padding-right: 7.5rem; -} -.ql-editor .ql-indent-3:not(.ql-direction-rtl) { - padding-left: 9rem; -} -.ql-editor li.ql-indent-3:not(.ql-direction-rtl) { - padding-left: 10.5rem; -} -.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { - padding-right: 9rem; -} -.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { - padding-right: 10.5rem; -} -.ql-editor .ql-indent-4:not(.ql-direction-rtl) { - padding-left: 12rem; -} -.ql-editor li.ql-indent-4:not(.ql-direction-rtl) { - padding-left: 13.5rem; -} -.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { - padding-right: 12rem; -} -.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { - padding-right: 13.5rem; -} -.ql-editor .ql-indent-5:not(.ql-direction-rtl) { - padding-left: 15rem; -} -.ql-editor li.ql-indent-5:not(.ql-direction-rtl) { - padding-left: 16.5rem; -} -.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { - padding-right: 15rem; -} -.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { - padding-right: 16.5rem; -} -.ql-editor .ql-indent-6:not(.ql-direction-rtl) { - padding-left: 18rem; -} -.ql-editor li.ql-indent-6:not(.ql-direction-rtl) { - padding-left: 19.5rem; -} -.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { - padding-right: 18rem; -} -.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { - padding-right: 19.5rem; -} -.ql-editor .ql-indent-7:not(.ql-direction-rtl) { - padding-left: 21rem; -} -.ql-editor li.ql-indent-7:not(.ql-direction-rtl) { - padding-left: 22.5rem; -} -.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { - padding-right: 21rem; -} -.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { - padding-right: 22.5rem; -} -.ql-editor .ql-indent-8:not(.ql-direction-rtl) { - padding-left: 24rem; -} -.ql-editor li.ql-indent-8:not(.ql-direction-rtl) { - padding-left: 25.5rem; -} -.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { - padding-right: 24rem; -} -.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { - padding-right: 25.5rem; -} -.ql-editor .ql-indent-9:not(.ql-direction-rtl) { - padding-left: 27rem; -} -.ql-editor li.ql-indent-9:not(.ql-direction-rtl) { - padding-left: 28.5rem; -} -.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { - padding-right: 27rem; -} -.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { - padding-right: 28.5rem; -} -.ql-editor .ql-video { - display: block; - max-width: 100%; -} -.ql-editor .ql-video.ql-align-center { - margin: 0 auto; -} -.ql-editor .ql-video.ql-align-right { - margin: 0 0 0 auto; -} -.ql-editor .ql-bg-black { - background-color: #000; -} -.ql-editor .ql-bg-red { - background-color: #e60000; -} -.ql-editor .ql-bg-orange { - background-color: #f90; -} -.ql-editor .ql-bg-yellow { - background-color: #ff0; -} -.ql-editor .ql-bg-green { - background-color: #008a00; -} -.ql-editor .ql-bg-blue { - background-color: #06c; -} -.ql-editor .ql-bg-purple { - background-color: #93f; -} -.ql-editor .ql-color-white { - color: #fff; -} -.ql-editor .ql-color-red { - color: #e60000; -} -.ql-editor .ql-color-orange { - color: #f90; -} -.ql-editor .ql-color-yellow { - color: #ff0; -} -.ql-editor .ql-color-green { - color: #008a00; -} -.ql-editor .ql-color-blue { - color: #06c; -} -.ql-editor .ql-color-purple { - color: #93f; -} -.ql-editor .ql-font-serif { - font-family: Georgia, Times New Roman, serif; -} -.ql-editor .ql-font-monospace { - font-family: Monaco, Courier New, monospace; -} -.ql-editor .ql-size-small { - font-size: 0.75rem; -} -.ql-editor .ql-size-large { - font-size: 1.5rem; -} -.ql-editor .ql-size-huge { - font-size: 2.5rem; -} -.ql-editor .ql-direction-rtl { - direction: rtl; - text-align: inherit; -} -.ql-editor .ql-align-center { - text-align: center; -} -.ql-editor .ql-align-justify { - text-align: justify; -} -.ql-editor .ql-align-right { - text-align: right; -} -.ql-editor.ql-blank::before { - color: rgba(0, 0, 0, 0.6); - content: attr(data-placeholder); - font-style: italic; - left: 15px; - pointer-events: none; - position: absolute; - right: 15px; -} -.ql-snow.ql-toolbar:after, -.ql-snow .ql-toolbar:after { - clear: both; - content: ''; - display: table; -} -.ql-snow.ql-toolbar button, -.ql-snow .ql-toolbar button { - background: none; - border: none; - cursor: pointer; - display: inline-block; - float: left; - height: 24px; - padding: 3px 5px; - width: 28px; -} -.ql-snow.ql-toolbar button svg, -.ql-snow .ql-toolbar button svg { - float: left; - height: 100%; -} -.ql-snow.ql-toolbar button:active:hover, -.ql-snow .ql-toolbar button:active:hover { - outline: none; -} -.ql-snow.ql-toolbar input.ql-image[type='file'], -.ql-snow .ql-toolbar input.ql-image[type='file'] { - display: none; -} -.ql-snow.ql-toolbar button:hover, -.ql-snow .ql-toolbar button:hover, -.ql-snow.ql-toolbar button:focus, -.ql-snow .ql-toolbar button:focus, -.ql-snow.ql-toolbar button.ql-active, -.ql-snow .ql-toolbar button.ql-active, -.ql-snow.ql-toolbar .ql-picker-label:hover, -.ql-snow .ql-toolbar .ql-picker-label:hover, -.ql-snow.ql-toolbar .ql-picker-label.ql-active, -.ql-snow .ql-toolbar .ql-picker-label.ql-active, -.ql-snow.ql-toolbar .ql-picker-item:hover, -.ql-snow .ql-toolbar .ql-picker-item:hover, -.ql-snow.ql-toolbar .ql-picker-item.ql-selected, -.ql-snow .ql-toolbar .ql-picker-item.ql-selected { - color: #06c; -} -.ql-snow.ql-toolbar button:hover .ql-fill, -.ql-snow .ql-toolbar button:hover .ql-fill, -.ql-snow.ql-toolbar button:focus .ql-fill, -.ql-snow .ql-toolbar button:focus .ql-fill, -.ql-snow.ql-toolbar button.ql-active .ql-fill, -.ql-snow .ql-toolbar button.ql-active .ql-fill, -.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, -.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, -.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, -.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, -.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, -.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, -.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, -.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, -.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, -.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, -.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, -.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, -.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, -.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, -.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, -.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, -.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, -.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, -.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, -.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, -.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { - fill: #06c; -} -.ql-snow.ql-toolbar button:hover .ql-stroke, -.ql-snow .ql-toolbar button:hover .ql-stroke, -.ql-snow.ql-toolbar button:focus .ql-stroke, -.ql-snow .ql-toolbar button:focus .ql-stroke, -.ql-snow.ql-toolbar button.ql-active .ql-stroke, -.ql-snow .ql-toolbar button.ql-active .ql-stroke, -.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, -.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, -.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, -.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, -.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, -.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, -.ql-snow.ql-toolbar button:hover .ql-stroke-miter, -.ql-snow .ql-toolbar button:hover .ql-stroke-miter, -.ql-snow.ql-toolbar button:focus .ql-stroke-miter, -.ql-snow .ql-toolbar button:focus .ql-stroke-miter, -.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, -.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, -.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, -.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, -.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, -.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, -.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, -.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, -.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, -.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { - stroke: #06c; -} -@media (pointer: coarse) { - .ql-snow.ql-toolbar button:hover:not(.ql-active), - .ql-snow .ql-toolbar button:hover:not(.ql-active) { - color: #444; - } - .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill, - .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill, - .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill, - .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill { - fill: #444; - } - .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke, - .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke, - .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter, - .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter { - stroke: #444; - } -} -.ql-snow { - box-sizing: border-box; -} -.ql-snow * { - box-sizing: border-box; -} -.ql-snow .ql-hidden { - display: none; -} -.ql-snow .ql-out-bottom, -.ql-snow .ql-out-top { - visibility: hidden; -} -.ql-snow .ql-tooltip { - position: absolute; - transform: translateY(10px); -} -.ql-snow .ql-tooltip a { - cursor: pointer; - text-decoration: none; -} -.ql-snow .ql-tooltip.ql-flip { - transform: translateY(-10px); -} -.ql-snow .ql-formats { - display: inline-block; - vertical-align: middle; -} -.ql-snow .ql-formats:after { - clear: both; - content: ''; - display: table; -} -.ql-snow .ql-stroke { - fill: none; - stroke: #444; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 2; -} -.ql-snow .ql-stroke-miter { - fill: none; - stroke: #444; - stroke-miterlimit: 10; - stroke-width: 2; -} -.ql-snow .ql-fill, -.ql-snow .ql-stroke.ql-fill { - fill: #444; -} -.ql-snow .ql-empty { - fill: none; -} -.ql-snow .ql-even { - fill-rule: evenodd; -} -.ql-snow .ql-thin, -.ql-snow .ql-stroke.ql-thin { - stroke-width: 1; -} -.ql-snow .ql-transparent { - opacity: 0.4; -} -.ql-snow .ql-direction svg:last-child { - display: none; -} -.ql-snow .ql-direction.ql-active svg:last-child { - display: inline; -} -.ql-snow .ql-direction.ql-active svg:first-child { - display: none; -} -.ql-snow .ql-editor h1 { - font-size: 2rem; -} -.ql-snow .ql-editor h2 { - font-size: 1.5rem; -} -.ql-snow .ql-editor h3 { - font-size: 1.17rem; -} -.ql-snow .ql-editor h4 { - font-size: 1rem; -} -.ql-snow .ql-editor h5 { - font-size: 0.83rem; -} -.ql-snow .ql-editor h6 { - font-size: 0.67rem; -} -.ql-snow .ql-editor a { - text-decoration: underline; -} -.ql-snow .ql-editor blockquote { - border-left: 4px solid #ccc; - margin-bottom: 5px; - margin-top: 5px; - padding-left: 16px; -} -.ql-snow .ql-editor code, -.ql-snow .ql-editor pre { - background-color: #f0f0f0; - border-radius: 3px; -} -.ql-snow .ql-editor pre { - white-space: pre-wrap; - margin-bottom: 5px; - margin-top: 5px; - padding: 5px 10px; -} -.ql-snow .ql-editor code { - font-size: 85%; - padding: 2px 4px; -} -.ql-snow .ql-editor pre.ql-syntax { - background-color: #23241f; - color: #f8f8f2; - overflow: visible; -} -.ql-snow .ql-editor img { - max-width: 100%; -} -.ql-snow .ql-picker { - color: #444; - display: inline-block; - float: left; - font-size: 14px; - font-weight: 500; - height: 24px; - position: relative; - vertical-align: middle; -} -.ql-snow .ql-picker-label { - cursor: pointer; - display: inline-block; - height: 100%; - padding-left: 8px; - padding-right: 2px; - position: relative; - width: 100%; -} -.ql-snow .ql-picker-label::before { - display: inline-block; - line-height: 22px; -} -.ql-snow .ql-picker-options { - background-color: #fff; - display: none; - min-width: 100%; - padding: 4px 8px; - position: absolute; - white-space: nowrap; -} -.ql-snow .ql-picker-options .ql-picker-item { - cursor: pointer; - display: block; - padding-bottom: 5px; - padding-top: 5px; -} -.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #ccc; - z-index: 2; -} -.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #ccc; -} -.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #ccc; -} -.ql-snow .ql-picker.ql-expanded .ql-picker-options { - display: block; - margin-top: -1px; - top: 100%; - z-index: 1; -} -.ql-snow .ql-color-picker, -.ql-snow .ql-icon-picker { - width: 28px; -} -.ql-snow .ql-color-picker .ql-picker-label, -.ql-snow .ql-icon-picker .ql-picker-label { - padding: 2px 4px; -} -.ql-snow .ql-color-picker .ql-picker-label svg, -.ql-snow .ql-icon-picker .ql-picker-label svg { - right: 4px; -} -.ql-snow .ql-icon-picker .ql-picker-options { - padding: 4px 0px; -} -.ql-snow .ql-icon-picker .ql-picker-item { - height: 24px; - width: 24px; - padding: 2px 4px; -} -.ql-snow .ql-color-picker .ql-picker-options { - padding: 3px 5px; - width: 152px; -} -.ql-snow .ql-color-picker .ql-picker-item { - border: 1px solid transparent; - float: left; - height: 16px; - margin: 2px; - padding: 0px; - width: 16px; -} -.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { - position: absolute; - margin-top: -9px; - right: 0; - top: 50%; - width: 18px; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before, -.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before, -.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before { - content: attr(data-label); -} -.ql-snow .ql-picker.ql-header { - width: 98px; -} -.ql-snow .ql-picker.ql-header .ql-picker-label::before, -.ql-snow .ql-picker.ql-header .ql-picker-item::before { - content: 'Normal'; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { - content: 'Heading 1'; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { - content: 'Heading 2'; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { - content: 'Heading 3'; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { - content: 'Heading 4'; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { - content: 'Heading 5'; -} -.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before, -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { - content: 'Heading 6'; -} -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before { - font-size: 2rem; -} -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before { - font-size: 1.5rem; -} -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before { - font-size: 1.17rem; -} -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before { - font-size: 1rem; -} -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before { - font-size: 0.83rem; -} -.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before { - font-size: 0.67rem; -} -.ql-snow .ql-picker.ql-font { - width: 108px; -} -.ql-snow .ql-picker.ql-font .ql-picker-label::before, -.ql-snow .ql-picker.ql-font .ql-picker-item::before { - content: 'Sans Serif'; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { - content: 'Serif'; -} -.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before, -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { - content: 'Monospace'; -} -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before { - font-family: Georgia, Times New Roman, serif; -} -.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before { - font-family: Monaco, Courier New, monospace; -} -.ql-snow .ql-picker.ql-size { - width: 98px; -} -.ql-snow .ql-picker.ql-size .ql-picker-label::before, -.ql-snow .ql-picker.ql-size .ql-picker-item::before { - content: 'Normal'; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { - content: 'Small'; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { - content: 'Large'; -} -.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before, -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { - content: 'Huge'; -} -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before { - font-size: 10px; -} -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before { - font-size: 18px; -} -.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before { - font-size: 32px; -} -.ql-snow .ql-color-picker.ql-background .ql-picker-item { - background-color: #fff; -} -.ql-snow .ql-color-picker.ql-color .ql-picker-item { - background-color: #000; -} -.ql-toolbar.ql-snow { - border: 1px solid #ccc; - box-sizing: border-box; - font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; - padding: 8px; -} -.ql-toolbar.ql-snow .ql-formats { - margin-right: 15px; -} -.ql-toolbar.ql-snow .ql-picker-label { - border: 1px solid transparent; -} -.ql-toolbar.ql-snow .ql-picker-options { - border: 1px solid transparent; - box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px; -} -.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - border-color: #ccc; -} -.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - border-color: #ccc; -} -.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected, -.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { - border-color: #000; -} -.ql-toolbar.ql-snow + .ql-container.ql-snow { - border-top: 0px; -} -.ql-snow .ql-tooltip { - background-color: #fff; - border: 1px solid #ccc; - box-shadow: 0px 0px 5px #ddd; - color: #444; - padding: 5px 12px; - white-space: nowrap; -} -.ql-snow .ql-tooltip::before { - content: 'Visit URL:'; - line-height: 26px; - margin-right: 8px; -} -.ql-snow .ql-tooltip input[type='text'] { - display: none; - border: 1px solid #ccc; - font-size: 13px; - height: 26px; - margin: 0px; - padding: 3px 5px; - width: 170px; -} -.ql-snow .ql-tooltip a.ql-preview { - display: inline-block; - max-width: 200px; - overflow-x: hidden; - text-overflow: ellipsis; - vertical-align: top; -} -.ql-snow .ql-tooltip a.ql-action::after { - border-right: 1px solid #ccc; - content: 'Edit'; - margin-left: 16px; - padding-right: 8px; -} -.ql-snow .ql-tooltip a.ql-remove::before { - content: 'Remove'; - margin-left: 8px; -} -.ql-snow .ql-tooltip a { - line-height: 26px; -} -.ql-snow .ql-tooltip.ql-editing a.ql-preview, -.ql-snow .ql-tooltip.ql-editing a.ql-remove { - display: none; -} -.ql-snow .ql-tooltip.ql-editing input[type='text'] { - display: inline-block; -} -.ql-snow .ql-tooltip.ql-editing a.ql-action::after { - border-right: 0px; - content: 'Save'; - padding-right: 0px; -} -.ql-snow .ql-tooltip[data-mode='link']::before { - content: 'Enter link:'; -} -.ql-snow .ql-tooltip[data-mode='formula']::before { - content: 'Enter formula:'; -} -.ql-snow .ql-tooltip[data-mode='video']::before { - content: 'Enter video:'; -} -.ql-snow a { - color: #06c; -} -.ql-container.ql-snow { - border: 1px solid #ccc; -} - -.p-editor .p-editor-toolbar { - background: ${dt('editor.toolbar.background')}; - border-top-right-radius: ${dt('rounded.base')}; - border-top-left-radius: ${dt('rounded.base')}; -} - -.p-editor .p-editor-toolbar.ql-snow { - border: 1px solid ${dt('editor.toolbar.border.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-stroke { - stroke: ${dt('editor.toolbar.item.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-fill { - fill: ${dt('editor.toolbar.item.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label { - border: 0 none; - color: ${dt('editor.toolbar.item.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover { - color: ${dt('editor.toolbar.item.hover.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke { - stroke: ${dt('editor.toolbar.item.hover.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill { - fill: ${dt('editor.toolbar.item.hover.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: ${dt('editor.toolbar.item.active.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: ${dt('editor.toolbar.item.active.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: ${dt('editor.toolbar.item.active.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - background: ${dt('editor.overlay.background')}; - border: 1px solid ${dt('editor.overlay.border.color')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - border-radius: ${dt('rounded.base')}; - padding: 0.25rem 0.25rem; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item { - color: ${dt('editor.overlay.item.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover { - background: ${dt('editor.overlay.item.hover.background')}; - color: ${dt('editor.overlay.item.hover.color')}; -} - -.p-editor .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item { - padding: 0.5rem 0.75rem; -} - -.p-editor .p-editor-content { - border-bottom-right-radius: ${dt('rounded.base')}; - border-bottom-left-radius: ${dt('rounded.base')}; -} - -.p-editor .p-editor-content.ql-snow { - border: 1px solid ${dt('editor.content.border.color')}; -} - -.p-editor .p-editor-content .ql-editor { - background: ${dt('editor.content.background')}; - color: ${dt('editor.content.color')}; - border-bottom-right-radius: ${dt('rounded.base')}; - border-bottom-left-radius: ${dt('rounded.base')}; -} - -.p-editor .ql-snow.ql-toolbar button:hover, -.p-editor .ql-snow.ql-toolbar button:focus { - color: ${dt('editor.toolbar.item.hover.color')}; -} - -.p-editor .ql-snow.ql-toolbar button:hover .ql-stroke, -.p-editor .ql-snow.ql-toolbar button:focus .ql-stroke { - stroke: ${dt('editor.toolbar.item.hover.color')}; -} - -.p-editor .ql-snow.ql-toolbar button:hover .ql-fill, -.p-editor .ql-snow.ql-toolbar button:focus .ql-fill { - fill: ${dt('editor.toolbar.item.hover.color')}; -} - -.p-editor .ql-snow.ql-toolbar button.ql-active, -.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active, -.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: ${dt('editor.toolbar.item.active.color')}; -} - -.p-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke, -.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, -.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: ${dt('editor.toolbar.item.active.color')}; -} - -.p-editor .ql-snow.ql-toolbar button.ql-active .ql-fill, -.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, -.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: ${dt('editor.toolbar.item.active.color')}; -} - -.p-editor .ql-snow.ql-toolbar button.ql-active .ql-picker-label, -.p-editor .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, -.p-editor .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: ${dt('editor.toolbar.item.active.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/fieldset/index.js b/components/lib/themes/primeone/base/fieldset/index.js deleted file mode 100644 index 421e80e66..000000000 --- a/components/lib/themes/primeone/base/fieldset/index.js +++ /dev/null @@ -1,64 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-fieldset { - background: ${dt('fieldset.background')}; - border: 1px solid ${dt('fieldset.border.color')}; - border-radius: ${dt('rounded.base')}; - color: ${dt('fieldset.color')}; - padding: 0 1.125rem 1.125rem 1.125rem; - margin: 0; -} - -.p-fieldset-legend { - font-weight: 600; - border-radius: 6px; - border: 0 none; - padding: 0.5rem 0.75rem; - margin-bottom: 0.375rem; -} - -.p-fieldset-toggleable > .p-fieldset-legend { - padding: 0; -} - -.p-fieldset-toggleable > .p-fieldset-legend > a { - cursor: pointer; - user-select: none; - overflow: hidden; - position: relative; - text-decoration: none; - display: flex; - gap: 0.5rem; - align-items: center; - justify-content: center; - padding: 0.5rem 0.75rem; - color: ${dt('fieldset.legend.color')}; - border-radius: ${dt('rounded.base')}; - transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-fieldset-toggleable > .p-fieldset-legend > a:hover { - color: ${dt('fieldset.legend.hover.color')}; - background: ${dt('fieldset.legend.hover.background')}; -} - -.p-fieldset-toggle-icon { - color: ${dt('fieldset.toggle.icon.color')}; - transition: color ${dt('transition.duration')}; -} - -.p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggle-icon { - color: ${dt('fieldset.toggle.icon.hover.color')}; -} - -.p-fieldset .p-fieldset-content { - padding: 0; -} - ` -}; diff --git a/components/lib/themes/primeone/base/fileupload/index.js b/components/lib/themes/primeone/base/fileupload/index.js deleted file mode 100644 index f9a2ec146..000000000 --- a/components/lib/themes/primeone/base/fileupload/index.js +++ /dev/null @@ -1,79 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-fileupload input[type="file"] { - display: none; -} - -.p-fileupload-advanced { - border: 1px solid ${dt('fileupload.border.color')}; - border-radius: ${dt('rounded.base')}; - background: ${dt('fileupload.background')}; - color: ${dt('fileupload.color')}; -} - -.p-fileupload-header { - display: flex; - align-items: center; - flex-wrap: wrap; - padding: 1.125rem; - gap: 0.5rem; -} - -.p-fileupload-content { - border: 1px solid transparent; - position: relative; - padding: 0 1.125rem 1.125rem 1.125rem; -} - -.p-fileupload-content .p-progressbar { - width: 100%; - position: absolute; - top: 0; - left: 0; - height: 0.25rem; -} - -.p-fileupload-file-list { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 1.125rem; -} - -.p-fileupload-file { - display: flex; - flex-wrap: wrap; - align-items: center; - padding: 1rem; - border-bottom: 1px solid ${dt('fileupload.file.border.color')}; - gap: 0.5rem; -} - -.p-fileupload-file:last-child { - border-bottom: 0; -} - -.p-fileupload-file-info { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.p-fileupload-file-thumbnail { - flex-shrink: 0; -} - -.p-fileupload-file-actions { - margin-left: auto; -} - -.p-fileupload-highlight { - border: 1px dashed ${dt('fileupload.content.highlight.border.color')}; - background: ${dt('fileupload.content.highlight.background')}; -} - -.p-fileupload-advanced .p-message { - margin-top: 0; -} -` -}; diff --git a/components/lib/themes/primeone/base/floatlabel/index.js b/components/lib/themes/primeone/base/floatlabel/index.js deleted file mode 100644 index 263a0c28b..000000000 --- a/components/lib/themes/primeone/base/floatlabel/index.js +++ /dev/null @@ -1,57 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-float-label { - display: block; - position: relative; -} - -.p-float-label label { - position: absolute; - pointer-events: none; - top: 50%; - margin-top: -.5rem; - transition-property: all; - transition-timing-function: ease; - line-height: 1; - left: 0.75rem; - color: ${dt('floatlabel.color')}; - transition-duration: ${dt('transition.duration')}; -} - -.p-float-label:has(textarea) label { - top: 1rem; -} - -.p-float-label:has(input:focus) label, -.p-float-label:has(input.p-filled) label, -.p-float-label:has(input:-webkit-autofill) label, -.p-float-label:has(textarea:focus) label, -.p-float-label:has(textarea.p-filled) label, -.p-float-label:has(.p-inputwrapper-focus) label, -.p-float-label:has(.p-inputwrapper-filled) label { - top: -.75rem; - font-size: 12px; - color: ${dt('floatlabel.focus.color')}; -} - -.p-float-label .p-placeholder, -.p-float-label input::placeholder, -.p-float-label .p-inputtext::placeholder { - opacity: 0; - transition-property: all; - transition-timing-function: ease; -} - -.p-float-label .p-focus .p-placeholder, -.p-float-label input:focus::placeholder, -.p-float-label .p-inputtext:focus::placeholder { - opacity: 1; - transition-property: all; - transition-timing-function: ease; -} - -.p-float-label > .p-invalid + label { - color: ${dt('floatlabel.invalid.color')}; -} - ` -}; diff --git a/components/lib/themes/primeone/base/galleria/index.js b/components/lib/themes/primeone/base/galleria/index.js deleted file mode 100644 index d2172abaf..000000000 --- a/components/lib/themes/primeone/base/galleria/index.js +++ /dev/null @@ -1,406 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-galleria-content { - display: flex; - flex-direction: column; -} - -.p-galleria-items-container { - display: flex; - flex-direction: column; - position: relative; -} - -.p-galleria-items { - position: relative; - display: flex; - height: 100%; -} - -.p-galleria-navigate-button { - position: absolute; - top: 50%; - margin-top: -0.5rem; - display: inline-flex; - justify-content: center; - align-items: center; - overflow: hidden; - background: transparent; - color: ${dt('galleria.navigator.color')}; - width: 3rem; - height: 3rem; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: 50%; - margin: 0 0.5rem; - padding: 0; - user-select: none; - border: none; - cursor: pointer; -} - -.p-galleria-navigate-button:not(.p-disabled):hover { - background: ${dt('galleria.navigator.hover.background')}; -} - -.p-galleria-next-icon, -.p-galleria-prev-icon { - font-size: 1.5rem; - width: 1.5rem; - height: 1.5rem; -} - -.p-galleria-prev-button { - left: 0; -} - -.p-galleria-next-button { - right: 0; -} - -.p-galleria-item { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; -} - -.p-galleria-hover-navigators .p-galleria-navigate-button { - pointer-events: none; - opacity: 0; - transition: opacity ${dt('transition.duration')} ease-in-out; -} - -.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button { - pointer-events: all; - opacity: 1; -} - -.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button.p-disabled { - pointer-events: none; -} - -.p-galleria-caption { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - background: ${dt('galleria.caption.background')}; - color: ${dt('galleria.caption.color')}; - padding: 1rem; -} - -.p-galleria-thumbnails { - display: flex; - flex-direction: column; - overflow: auto; - flex-shrink: 0; -} - -.p-galleria-thumbnail-prev-button, -.p-galleria-thumbnail-next-button { - align-self: center; - flex: 0 0 auto; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - position: relative; - margin: 0.5rem; - padding: 0; - border: none; - user-select: none; - cursor: pointer; - background: transparent; - color: ${dt('galleria.thumbnail.navigator.color')}; - width: 2rem; - height: 2rem; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - border-radius: 50%; -} - -.p-galleria-thumbnail-prev-button:hover, -.p-galleria-thumbnail-next-button:hover { - background: ${dt('galleria.thumbnail.navigator.hover.background')}; - color: ${dt('galleria.thumbnail.navigator.hover.color')}; -} - -.p-galleria-thumbnail-prev-button:focus-visible, -.p-galleria-thumbnail-next-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-galleria-thumbnail-prev-button span, -.p-galleria-thumbnail-next-button span { - display: flex; - justify-content: center; - align-items: center; -} - -.p-galleria-thumbnails-content { - display: flex; - flex-direction: row; - background: ${dt('galleria.thumbnail.container.background')}; - padding: 1rem 0.25rem; -} - -.p-galleria-thumbnails-viewport { - overflow: hidden; - width: 100%; -} - -.p-galleria-thumbnail-items { - display: flex; -} - -.p-galleria-thumbnail-item { - overflow: auto; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: 0.5; -} - -.p-galleria-thumbnail { - outline-color: transparent; -} - -.p-galleria-thumbnail:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-galleria-thumbnail-item:hover { - opacity: 1; - transition: opacity 0.3s; -} - -.p-galleria-thumbnail-item-current { - opacity: 1; -} - -.p-galleria-thumbnails-left .p-galleria-content, -.p-galleria-thumbnails-right .p-galleria-content { - flex-direction: row; -} - -.p-galleria-thumbnails-left .p-galleria-items-container, -.p-galleria-thumbnails-right .p-galleria-items-container { - flex-direction: row; -} - -.p-galleria-thumbnails-left .p-galleria-items-container, -.p-galleria-thumbnails-top .p-galleria-items-container { - order: 2; -} - -.p-galleria-thumbnails-left .p-galleria-thumbnails, -.p-galleria-thumbnails-top .p-galleria-thumbnails { - order: 1; -} - -.p-galleria-thumbnails-left .p-galleria-thumbnails-content, -.p-galleria-thumbnails-right .p-galleria-thumbnails-content { - flex-direction: column; - flex-grow: 1; -} - -.p-galleria-thumbnails-left .p-galleria-thumbnail-items, -.p-galleria-thumbnails-right .p-galleria-thumbnail-items { - flex-direction: column; - height: 100%; -} - -.p-galleria-indicator-list { - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; - gap: 0.5rem; - margin: 0; - list-style: none; -} - -.p-galleria-indicator-button { - display: inline-flex; - align-items: center; - background: ${dt('galleria.indicator.background')}; - width: 1rem; - height: 1rem; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - border-radius: 50%; - margin: 0; - padding: 0; - border: none; - user-select: none; - cursor: pointer; -} - -.p-galleria-indicator-button:hover { - background: ${dt('galleria.indicator.hover.background')}; -} - -.p-galleria-indicator-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-galleria-indicator-active .p-galleria-indicator-button { - background-color: ${dt('galleria.indicator.active.background')}; -} - -.p-galleria-indicators-left .p-galleria-items-container, -.p-galleria-indicators-right .p-galleria-items-container { - flex-direction: row; - align-items: center; -} - -.p-galleria-indicators-left .p-galleria-items, -.p-galleria-indicators-top .p-galleria-items { - order: 2; -} - -.p-galleria-indicators-left .p-galleria-indicator-list, -.p-galleria-indicators-top .p-galleria-indicator-list { - order: 1; -} - -.p-galleria-indicators-left .p-galleria-indicator-list, -.p-galleria-indicators-right .p-galleria-indicator-list { - flex-direction: column; -} - -.p-galleria-inset-indicators .p-galleria-indicator-list { - position: absolute; - display: flex; - z-index: 1; - background: ${dt('galleria.inset.indicators.background')}; -} - -.p-galleria-inset-indicators .p-galleria-indicator-button { - background: ${dt('galleria.inset.indicator.background')}; -} - -.p-galleria-inset-indicators .p-galleria-indicator-button:hover { - background: ${dt('galleria.inset.indicator.hover.background')}; -} - -.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button { - background: ${dt('galleria.inset.indicator.active.background')}; -} - -.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list { - top: 0; - left: 0; - width: 100%; - align-items: flex-start; -} - -.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list { - right: 0; - top: 0; - height: 100%; - align-items: flex-end; -} - -.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list { - bottom: 0; - left: 0; - width: 100%; - align-items: flex-end; -} - -.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list { - left: 0; - top: 0; - height: 100%; - align-items: flex-start; -} - -.p-galleria-mask { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - --p-mask-background: ${dt('galleria.mask.background')}; -} - -.p-galleria-close-button { - position: absolute; - top: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - margin: 0.5rem; - background: transparent; - color: ${dt('galleria.close.color')}; - width: 3rem; - height: 3rem; - padding: 0; - border: none; - user-select: none; - cursor: pointer; - border-radius: 50%; - outline-color: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-galleria-close-icon { - font-size: 1.5rem; - width: 1.5rem; - height: 1.5rem; -} - -.p-galleria-close-button:hover { - background: ${dt('galleria.close.hover.background')}; - color: ${dt('galleria.close.hover.color')}; -} - -.p-galleria-close-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-galleria-mask .p-galleria-navigate-button { - position: fixed; - top: 50%; - margin-top: -0.5rem; -} - -.p-galleria-enter-active { - transition: all 150ms cubic-bezier(0, 0, 0.2, 1); -} - -.p-galleria-leave-active { - transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); -} - -.p-galleria-enter-from, -.p-galleria-leave-to { - opacity: 0; - transform: scale(0.7); -} - -.p-galleria-enter-active .p-galleria-navigate-button { - opacity: 0; -} - -.p-items-hidden .p-galleria-thumbnail-item { - visibility: hidden; -} - -.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { - visibility: visible; -} -` -}; diff --git a/components/lib/themes/primeone/base/global/index.js b/components/lib/themes/primeone/base/global/index.js deleted file mode 100644 index 5186fb3ec..000000000 --- a/components/lib/themes/primeone/base/global/index.js +++ /dev/null @@ -1,230 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-component, -.p-component * { - box-sizing: border-box; -} - -.p-hidden-space { - visibility: hidden; -} - -.p-reset { - margin: 0; - padding: 0; - border: 0; - outline: 0; - text-decoration: none; - font-size: 100%; - list-style: none; -} - -.p-disabled, -.p-disabled * { - cursor: default; - pointer-events: none; - user-select: none; -} - -.p-component-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.p-unselectable-text { - user-select: none; -} - -.p-sr-only { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - word-wrap: normal; -} - -.p-link { - text-align: left; - background-color: transparent; - margin: 0; - padding: 0; - border: none; - cursor: pointer; - user-select: none; -} - -.p-link:disabled { - cursor: default; -} - -/* Non vue overlay animations */ -.p-connected-overlay { - opacity: 0; - transform: scaleY(0.8); - transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), - opacity 0.12s cubic-bezier(0, 0, 0.2, 1); -} - -.p-connected-overlay-visible { - opacity: 1; - transform: scaleY(1); -} - -.p-connected-overlay-hidden { - opacity: 0; - transform: scaleY(1); - transition: opacity 0.1s linear; -} - -/* Vue based overlay animations */ -.p-connected-overlay-enter-from { - opacity: 0; - transform: scaleY(0.8); -} - -.p-connected-overlay-leave-to { - opacity: 0; -} - -.p-connected-overlay-enter-active { - transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), - opacity 0.12s cubic-bezier(0, 0, 0.2, 1); -} - -.p-connected-overlay-leave-active { - transition: opacity 0.1s linear; -} - -/* Toggleable Content */ -.p-toggleable-content-enter-from, -.p-toggleable-content-leave-to { - max-height: 0; -} - -.p-toggleable-content-enter-to, -.p-toggleable-content-leave-from { - max-height: 1000px; -} - -.p-toggleable-content-leave-active { - overflow: hidden; - transition: max-height 0.45s cubic-bezier(0, 1, 0, 1); -} - -.p-toggleable-content-enter-active { - overflow: hidden; - transition: max-height 1s ease-in-out; -} - -* { - box-sizing: border-box; -} - -.p-component { - font-size: 1rem; - font-weight: normal; -} - -.p-component-overlay { - background-color: rgba(0, 0, 0, 0.4); - transition-duration: ${dt('transition.duration')}; -} - -.p-disabled, -.p-component:disabled { - opacity: 0.6; -} - -.p-error { - color: #f87171; -} - -.p-text-secondary { - color: #64748b; -} - -.pi { - font-size: 1rem; -} - -.p-icon { - width: 1rem; - height: 1rem; -} - -.p-link { - font-family: inherit; - font-feature-settings: inherit; - font-size: 1rem; - border-radius: 6px; - outline-color: transparent; -} -.p-link:focus-visible { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: 2px; - box-shadow: none; -} - -.p-component-overlay-enter { - animation: p-component-overlay-enter-animation 150ms forwards; -} - -.p-component-overlay-leave { - animation: p-component-overlay-leave-animation 150ms forwards; -} - -@keyframes p-component-overlay-enter-animation { - from { - background-color: transparent; - } - to { - background-color: ${dt('mask.background')}; - } -} -@keyframes p-component-overlay-leave-animation { - from { - background-color: ${dt('mask.background')}; - } - to { - background-color: transparent; - } -} - -.p-ripple { - overflow: hidden; - position: relative; -} - -.p-ink { - display: block; - position: absolute; - background: rgba(255, 255, 255, 0.5); - border-radius: 100%; - transform: scale(0); - pointer-events: none; -} - -.p-ink-active { - animation: ripple 0.4s linear; -} - -.p-ripple-disabled .p-ink { - display: none; -} - -@keyframes ripple { - 100% { - opacity: 0; - transform: scale(2.5); - } -} -` -}; diff --git a/components/lib/themes/primeone/base/iconfield/index.js b/components/lib/themes/primeone/base/iconfield/index.js deleted file mode 100644 index 4c6c01524..000000000 --- a/components/lib/themes/primeone/base/iconfield/index.js +++ /dev/null @@ -1,30 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-iconfield { - position: relative; -} - -.p-inputicon { - position: absolute; - top: 50%; - margin-top: -.5rem; - color: ${dt('iconfield.color')}; -} - -.p-iconfield .p-inputicon:first-child { - left: 0.75rem; -} - -.p-iconfield .p-inputicon:last-child { - right: 0.75rem; -} - -.p-iconfield .p-inputtext:last-child { - padding-left: 2.5rem; -} - -.p-iconfield .p-inputtext:first-child { - padding-right: 2.5rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/image/index.js b/components/lib/themes/primeone/base/image/index.js deleted file mode 100644 index 28d09116e..000000000 --- a/components/lib/themes/primeone/base/image/index.js +++ /dev/null @@ -1,114 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-image-mask { - display: flex; - align-items: center; - justify-content: center; - --p-mask-background: ${dt('image.mask.background')}; -} - -.p-image-preview { - position: relative; - display: inline-flex; - line-height: 0; -} - -.p-image-preview-mask { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s; - border: 0 none; - padding: 0; - cursor: pointer; - background: transparent; - color: ${dt('image.preview.indicator.color')}; - transition: background-color ${dt('transition.duration')}; -} - -.p-image-preview:hover > .p-image-preview-mask { - opacity: 1; - cursor: pointer; - background: ${dt('image.preview.indicator.background')}; -} - -.p-image-preview-icon { - width: 1.5rem; - height: 1.5rem; -} - -.p-image-toolbar { - position: absolute; - top: 0; - right: 0; - display: flex; - z-index: 1; - padding: 1rem; - gap: 0.5rem; -} - -.p-image-action { - display: inline-flex; - justify-content: center; - align-items: center; - color: ${dt('image.action.color')}; - background: transparent; - width: 3rem; - margin: 0; - padding: 0; - border: 0 none; - cursor: pointer; - user-select: none; - height: 3rem; - border-radius: 50%; - outline-color: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-image-action:hover { - color: ${dt('image.action.hover.color')}; - background: ${dt('image.action.hover.background')}; -} - -.p-image-action:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-image-action .p-icon { - font-size: 1.5rem; - width: 1.5rem; - height: 1.5rem; -} - -.p-image-action.p-disabled { - pointer-events: auto; -} - -.p-image-original { - transition: transform 0.15s; - max-width: 100vw; - max-height: 100vh; -} - -.p-image-original-enter-active { - transition: all 150ms cubic-bezier(0, 0, 0.2, 1); -} - -.p-image-original-leave-active { - transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); -} - -.p-image-original-enter-from, -.p-image-original-leave-to { - opacity: 0; - transform: scale(0.7); -} -` -}; diff --git a/components/lib/themes/primeone/base/index.js b/components/lib/themes/primeone/base/index.js deleted file mode 100644 index 1d139c184..000000000 --- a/components/lib/themes/primeone/base/index.js +++ /dev/null @@ -1,179 +0,0 @@ -import accordion from 'primevue/themes/primeone/base/accordion'; -import autocomplete from 'primevue/themes/primeone/base/autocomplete'; -import avatar from 'primevue/themes/primeone/base/avatar'; -import badge from 'primevue/themes/primeone/base/badge'; -import blockui from 'primevue/themes/primeone/base/blockui'; -import breadcrumb from 'primevue/themes/primeone/base/breadcrumb'; -import button from 'primevue/themes/primeone/base/button'; -import buttongroup from 'primevue/themes/primeone/base/buttongroup'; -import card from 'primevue/themes/primeone/base/card'; -import carousel from 'primevue/themes/primeone/base/carousel'; -import cascadeselect from 'primevue/themes/primeone/base/cascadeselect'; -import checkbox from 'primevue/themes/primeone/base/checkbox'; -import chip from 'primevue/themes/primeone/base/chip'; -import colorpicker from 'primevue/themes/primeone/base/colorpicker'; -import confirmdialog from 'primevue/themes/primeone/base/confirmdialog'; -import confirmpopup from 'primevue/themes/primeone/base/confirmpopup'; -import contextmenu from 'primevue/themes/primeone/base/contextmenu'; -import datatable from 'primevue/themes/primeone/base/datatable'; -import dataview from 'primevue/themes/primeone/base/dataview'; -import datepicker from 'primevue/themes/primeone/base/datepicker'; -import dialog from 'primevue/themes/primeone/base/dialog'; -import divider from 'primevue/themes/primeone/base/divider'; -import dock from 'primevue/themes/primeone/base/dock'; -import drawer from 'primevue/themes/primeone/base/drawer'; -import editor from 'primevue/themes/primeone/base/editor'; -import fieldset from 'primevue/themes/primeone/base/fieldset'; -import fileupload from 'primevue/themes/primeone/base/fileupload'; -import floatlabel from 'primevue/themes/primeone/base/floatlabel'; -import galleria from 'primevue/themes/primeone/base/galleria'; -import global from 'primevue/themes/primeone/base/global'; -import iconfield from 'primevue/themes/primeone/base/iconfield'; -import image from 'primevue/themes/primeone/base/image'; -import inlinemessage from 'primevue/themes/primeone/base/inlinemessage'; -import inplace from 'primevue/themes/primeone/base/inplace'; -import inputchips from 'primevue/themes/primeone/base/inputchips'; -import inputgroup from 'primevue/themes/primeone/base/inputgroup'; -import inputnumber from 'primevue/themes/primeone/base/inputnumber'; -import inputotp from 'primevue/themes/primeone/base/inputotp'; -import inputtext from 'primevue/themes/primeone/base/inputtext'; -import knob from 'primevue/themes/primeone/base/knob'; -import listbox from 'primevue/themes/primeone/base/listbox'; -import megamenu from 'primevue/themes/primeone/base/megamenu'; -import menu from 'primevue/themes/primeone/base/menu'; -import menubar from 'primevue/themes/primeone/base/menubar'; -import message from 'primevue/themes/primeone/base/message'; -import metergroup from 'primevue/themes/primeone/base/metergroup'; -import multiselect from 'primevue/themes/primeone/base/multiselect'; -import orderlist from 'primevue/themes/primeone/base/orderlist'; -import organizationchart from 'primevue/themes/primeone/base/organizationchart'; -import paginator from 'primevue/themes/primeone/base/paginator'; -import panel from 'primevue/themes/primeone/base/panel'; -import panelmenu from 'primevue/themes/primeone/base/panelmenu'; -import password from 'primevue/themes/primeone/base/password'; -import picklist from 'primevue/themes/primeone/base/picklist'; -import popover from 'primevue/themes/primeone/base/popover'; -import progressbar from 'primevue/themes/primeone/base/progressbar'; -import progressspinner from 'primevue/themes/primeone/base/progressspinner'; -import radiobutton from 'primevue/themes/primeone/base/radiobutton'; -import rating from 'primevue/themes/primeone/base/rating'; -import scrollpanel from 'primevue/themes/primeone/base/scrollpanel'; -import scrolltop from 'primevue/themes/primeone/base/scrolltop'; -import select from 'primevue/themes/primeone/base/select'; -import selectbutton from 'primevue/themes/primeone/base/selectbutton'; -import skeleton from 'primevue/themes/primeone/base/skeleton'; -import slider from 'primevue/themes/primeone/base/slider'; -import speeddial from 'primevue/themes/primeone/base/speeddial'; -import splitbutton from 'primevue/themes/primeone/base/splitbutton'; -import splitter from 'primevue/themes/primeone/base/splitter'; -import stepper from 'primevue/themes/primeone/base/stepper'; -import steps from 'primevue/themes/primeone/base/steps'; -import tabmenu from 'primevue/themes/primeone/base/tabmenu'; -import tabs from 'primevue/themes/primeone/base/tabs'; -import tabview from 'primevue/themes/primeone/base/tabview'; -import tag from 'primevue/themes/primeone/base/tag'; -import terminal from 'primevue/themes/primeone/base/terminal'; -import textarea from 'primevue/themes/primeone/base/textarea'; -import tieredmenu from 'primevue/themes/primeone/base/tieredmenu'; -import timeline from 'primevue/themes/primeone/base/timeline'; -import toast from 'primevue/themes/primeone/base/toast'; -import togglebutton from 'primevue/themes/primeone/base/togglebutton'; -import toggleswitch from 'primevue/themes/primeone/base/toggleswitch'; -import toolbar from 'primevue/themes/primeone/base/toolbar'; -import tooltip from 'primevue/themes/primeone/base/tooltip'; -import tree from 'primevue/themes/primeone/base/tree'; -import treeselect from 'primevue/themes/primeone/base/treeselect'; -import treetable from 'primevue/themes/primeone/base/treetable'; - -export default { - global, - components: { - accordion, - autocomplete, - avatar, - badge, - blockui, - breadcrumb, - button, - buttongroup, - card, - carousel, - cascadeselect, - checkbox, - chip, - colorpicker, - confirmdialog, - confirmpopup, - contextmenu, - datatable, - dataview, - datepicker, - dialog, - divider, - drawer, - dock, - editor, - fieldset, - fileupload, - floatlabel, - galleria, - iconfield, - image, - inlinemessage, - inplace, - inputchips, - inputgroup, - inputnumber, - inputotp, - toggleswitch, - inputtext, - knob, - listbox, - megamenu, - menu, - menubar, - message, - metergroup, - multiselect, - orderlist, - organizationchart, - popover, - paginator, - password, - panel, - panelmenu, - picklist, - progressbar, - progressspinner, - radiobutton, - rating, - scrollpanel, - scrolltop, - select, - selectbutton, - skeleton, - slider, - speeddial, - splitter, - splitbutton, - steps, - stepper, - tabmenu, - tabs, - tabview, - textarea, - tieredmenu, - tag, - terminal, - timeline, - togglebutton, - tree, - treeselect, - treetable, - toast, - toolbar - }, - directives: { - tooltip - } -}; diff --git a/components/lib/themes/primeone/base/inlinemessage/index.js b/components/lib/themes/primeone/base/inlinemessage/index.js deleted file mode 100644 index d5e11804b..000000000 --- a/components/lib/themes/primeone/base/inlinemessage/index.js +++ /dev/null @@ -1,95 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-inline-message { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 0.5rem 0.75rem; - margin: 0; - border-radius: ${dt('rounded.base')}; -} - -.p-inline-message-text { - font-weight: 500; -} - -.p-inline-message-icon { - flex-shrink: 0; - margin-right: 0.5rem; -} - -.p-inline-message-icon-only .p-inline-message-text { - visibility: hidden; - width: 0; -} - -.p-fluid .p-inline-message { - display: flex; -} - -.p-inline-message-info { - background: ${dt('inlinemessage.info.background')}; - border: 1px solid ${dt('inlinemessage.info.border.color')}; - color: ${dt('inlinemessage.info.color')}; - box-shadow: ${dt('inlinemessage.info.box.shadow')}; -} - -.p-inline-message-info .p-inline-message-icon { - color: ${dt('inlinemessage.info.color')}; -} - -.p-inline-message-success { - background: ${dt('inlinemessage.success.background')}; - border: 1px solid ${dt('inlinemessage.success.border.color')}; - color: ${dt('inlinemessage.success.color')}; - box-shadow: ${dt('inlinemessage.success.box.shadow')}; -} -.p-inline-message-success .p-inline-message-icon { - color: ${dt('inlinemessage.success.color')}; -} - -.p-inline-message-warn { - background: ${dt('inlinemessage.warn.background')}; - border: 1px solid ${dt('inlinemessage.warn.border.color')}; - color: ${dt('inlinemessage.warn.color')}; - box-shadow: ${dt('inlinemessage.warn.box.shadow')}; -} -.p-inline-message-warn .p-inline-message-icon { - color: ${dt('inlinemessage.warn.color')}; -} - -.p-inline-message-error { - background: ${dt('inlinemessage.error.background')}; - border: 1px solid ${dt('inlinemessage.error.border.color')}; - color: ${dt('inlinemessage.error.color')}; - box-shadow: ${dt('inlinemessage.error.box.shadow')}; -} -.p-inline-message-error .p-inline-message-icon { - color: ${dt('inlinemessage.error.color')}; -} - -.p-inline-message-secondary { - background: ${dt('inlinemessage.secondary.background')}; - border: 1px solid ${dt('inlinemessage.secondary.border.color')}; - color: ${dt('inlinemessage.secondary.color')}; - box-shadow: ${dt('inlinemessage.secondary.box.shadow')}; -} -.p-inline-message-secondary .p-inline-message-icon { - color: ${dt('inlinemessage.secondary.color')}; -} - -.p-inline-message-contrast { - background: ${dt('inlinemessage.contrast.background')}; - border: 1px solid ${dt('inlinemessage.contrast.border.color')}; - color: ${dt('inlinemessage.contrast.color')}; - box-shadow: ${dt('inlinemessage.contrast.box.shadow')}; -} -.p-inline-message-contrast .p-inline-message-icon { - color: ${dt('inlinemessage.contrast.color')}; -} - -.p-inline-message-icon-only .p-inline-message-icon { - margin-right: 0; -} -` -}; diff --git a/components/lib/themes/primeone/base/inplace/index.js b/components/lib/themes/primeone/base/inplace/index.js deleted file mode 100644 index 4e337fc8f..000000000 --- a/components/lib/themes/primeone/base/inplace/index.js +++ /dev/null @@ -1,26 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-inplace-display { - display: inline; - cursor: pointer; - padding: 0.5rem 0.75rem; - border-radius: ${dt('rounded.base')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-inplace-display:not(.p-disabled):hover { - background: ${dt('inplace.display.hover.background')}; - color: ${dt('inplace.display.hover.color')}; -} - -.p-inplace-display:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-inplace-content { - display: inline; -} - ` -}; diff --git a/components/lib/themes/primeone/base/inputchips/index.js b/components/lib/themes/primeone/base/inputchips/index.js deleted file mode 100644 index 17f55d31d..000000000 --- a/components/lib/themes/primeone/base/inputchips/index.js +++ /dev/null @@ -1,85 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-inputchips { - display: inline-flex; -} - -.p-inputchips-input { - margin: 0; - padding: 0; - list-style-type: none; - cursor: text; - overflow: hidden; - display: flex; - align-items: center; - flex-wrap: wrap; - padding: 0.25rem 0.25rem; - gap: 0.25rem; - color: ${dt('inputchips.color')}; - background: ${dt('inputchips.background')}; - border: 1px solid ${dt('inputchips.border.color')}; - border-radius: ${dt('rounded.base')}; - width: 100%; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - box-shadow: ${dt('inputchips.box.shadow')}; -} - -.p-inputchips:not(.p-disabled):hover .p-inputchips-input { - border-color: ${dt('inputchips.hover.border.color')}; -} - -.p-inputchips:not(.p-disabled).p-focus .p-inputchips-input { - border-color: ${dt('inputchips.focus.border.color')}; - outline: 0 none; -} - -.p-inputinputchips.p-invalid .p-inputchips-input { - border-color: ${dt('inputchips.invalid.border.color')}; -} - -.p-variant-filled.p-inputchips-input { - background: ${dt('inputchips.filled.background')}; -} - -.p-inputchips:not(.p-disabled).p-focus .p-variant-filled.p-inputchips-input { - background: ${dt('inputchips.filled.focus.background')}; -} - -.p-inputinputchips.p-disabled .p-inputchips-input { - opacity: 1; - background: ${dt('inputchips.disabled.background')}; - color: ${dt('inputchips.disabled.color')}; -} - -.p-inputchips-input-item { - padding: 0.25rem 0; - margin-left: 0.5rem; - flex: 1 1 auto; - display: inline-flex; -} - -.p-inputchips-input-item input { - border: 0 none; - outline: 0 none; - background: transparent; - margin: 0; - padding: 0; - box-shadow: none; - border-radius: 0; - width: 100%; - font-family: inherit; - font-feature-settings: inherit; - font-size: 1rem; - color: inherit; -} - -.p-inputchips-input-item input::placeholder { - color: ${dt('inputchips.placeholder.color')}; -} - -.p-fluid .p-inputchips { - display: flex; -} -` -}; diff --git a/components/lib/themes/primeone/base/inputgroup/index.js b/components/lib/themes/primeone/base/inputgroup/index.js deleted file mode 100644 index 8e3da1bf7..000000000 --- a/components/lib/themes/primeone/base/inputgroup/index.js +++ /dev/null @@ -1,102 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-inputgroup { - display: flex; - align-items: stretch; - width: 100%; -} - -.p-inputgroup-addon { - display: flex; - align-items: center; - justify-content: center; - padding: 0.5rem; - background: ${dt('inputgroup.addon.background')}; - color: ${dt('inputgroup.addon.color')}; - border-top: 1px solid ${dt('inputgroup.addon.border.color')}; - border-left: 1px solid ${dt('inputgroup.addon.border.color')}; - border-bottom: 1px solid ${dt('inputgroup.addon.border.color')}; - padding: 0.5rem 0.75rem; - min-width: 2.5rem; -} - -.p-inputgroup .p-float-label { - display: flex; - align-items: stretch; - width: 100%; -} - -.p-inputgroup .p-inputtext, -.p-fluid .p-inputgroup .p-inputtext, -.p-inputgroup .p-inputwrapper, -.p-fluid .p-inputgroup .p-input { - flex: 1 1 auto; - width: 1%; -} - -.p-inputgroup-addon:last-child { - border-right: 1px solid ${dt('inputgroup.addon.border.color')}; -} - -.p-inputgroup > .p-component, -.p-inputgroup > .p-inputwrapper > .p-inputtext, -.p-inputgroup > .p-float-label > .p-component { - border-radius: 0; - margin: 0; -} - -.p-inputgroup > .p-component + .p-inputgroup-addon, -.p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon, -.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon { - border-left: 0 none; -} - -.p-inputgroup > .p-component:focus, -.p-inputgroup > .p-inputwrapper > .p-inputtext:focus, -.p-inputgroup > .p-float-label > .p-component:focus { - z-index: 1; -} - -.p-inputgroup > .p-component:focus ~ label, -.p-inputgroup > .p-inputwrapper > .p-inputtext:focus~label, -.p-inputgroup > .p-float-label > .p-component:focus~label { - z-index: 1; -} - -.p-inputgroup-addon:first-child, -.p-inputgroup button:first-child, -.p-inputgroup input:first-child, -.p-inputgroup > .p-inputwrapper:first-child, -.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; -} - -.p-inputgroup .p-float-label:first-child input { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; -} - -.p-inputgroup-addon:last-child, -.p-inputgroup button:last-child, -.p-inputgroup input:last-child, -.p-inputgroup > .p-inputwrapper:last-child, -.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} - -.p-inputgroup .p-float-label:last-child input { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} - -.p-fluid .p-inputgroup .p-button { - width: auto; -} - -.p-fluid .p-inputgroup .p-button.p-button-icon-only { - width: 2.5rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/inputnumber/index.js b/components/lib/themes/primeone/base/inputnumber/index.js deleted file mode 100644 index 4300cd1dd..000000000 --- a/components/lib/themes/primeone/base/inputnumber/index.js +++ /dev/null @@ -1,148 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-inputnumber { - display: inline-flex; - position: relative; -} - -.p-inputnumber-button { - display: flex; - align-items: center; - justify-content: center; - flex: 0 0 auto; - background: ${dt('inputnumber.button.background')}; - color: ${dt('inputnumber.button.color')}; - width: ${dt('inputnumber.button.width')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-inputnumber-button:hover { - background: ${dt('inputnumber.button.hover.background')}; - color: ${dt('inputnumber.button.hover.color')}; -} - -.p-inputnumber-button:active { - background: ${dt('inputnumber.button.active.background')}; - color: ${dt('inputnumber.button.active.color')}; -} - -.p-inputnumber-stacked { - overflow: hidden; -} - -.p-inputnumber-stacked .p-inputnumber-button { - position: relative; - border: 0 none; -} - -.p-inputnumber-stacked .p-inputnumber-button-group { - display: flex; - flex-direction: column; - position: absolute; - top: 1px; - right: 1px; - height: calc(100% - 2px); -} - -.p-inputnumber-stacked .p-inputnumber-button-up { - padding: 0; - border-top-right-radius: calc(${dt('rounded.base')} - 1px); -} - -.p-inputnumber-stacked .p-inputnumber-button-down { - padding: 0; - border-bottom-right-radius: calc(${dt('rounded.base')} - 1px); -} - -.p-inputnumber-stacked .p-inputnumber-button { - flex: 1 1 auto; - border: 0 none; -} - -.p-inputnumber-horizontal .p-inputnumber-button { - border: 1px solid ${dt('inputnumber.button.border.color')}; -} - -.p-inputnumber-horizontal .p-inputnumber-button:hover { - border-color: ${dt('inputnumber.button.hover.border.color')}; -} - -.p-inputnumber-horizontal .p-inputnumber-button:active { - border-color: ${dt('inputnumber.button.active.border.color')}; -} - -.p-inputnumber-horizontal .p-inputnumber-button-up { - order: 3; - border-top-right-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; - border-left: 0 none; -} - -.p-inputnumber-horizontal .p-inputnumber-input { - order: 2; - border-radius: 0; -} - -.p-inputnumber-horizontal .p-inputnumber-button-down { - order: 1; - border-top-left-radius: ${dt('rounded.base')}; - border-bottom-left-radius: ${dt('rounded.base')}; - border-right: 0 none; -} - -.p-inputnumber-vertical { - flex-direction: column; -} - -.p-inputnumber-vertical .p-inputnumber-button { - border: 1px solid ${dt('inputnumber.button.border.color')}; - padding: 0.5rem 0; -} - -.p-inputnumber-vertical .p-inputnumber-button:hover { - border-color: ${dt('inputnumber.button.hover.border.color')}; -} - -.p-inputnumber-vertical .p-inputnumber-button:active { - border-color: ${dt('inputnumber.button.active.border.color')}; -} - -.p-inputnumber-vertical .p-inputnumber-button-up { - order: 1; - border-top-left-radius: ${dt('rounded.base')}; - border-top-right-radius: ${dt('rounded.base')}; - width: 100%; - border-bottom: 0 none; -} - -.p-inputnumber-vertical .p-inputnumber-input { - order: 2; - border-radius: 0; - text-align: center; -} - -.p-inputnumber-vertical .p-inputnumber-button-down { - order: 3; - border-bottom-left-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; - width: 100%; - border-top: 0 none; -} - -.p-inputnumber-input { - flex: 1 1 auto; -} - -.p-fluid .p-inputnumber { - width: 100%; -} - -.p-fluid .p-inputnumber .p-inputnumber-input { - width: 1%; -} - -.p-fluid .p-inputnumber-vertical .p-inputnumber-input { - width: 100%; -} -` -}; diff --git a/components/lib/themes/primeone/base/inputotp/index.js b/components/lib/themes/primeone/base/inputotp/index.js deleted file mode 100644 index 5e26cf57b..000000000 --- a/components/lib/themes/primeone/base/inputotp/index.js +++ /dev/null @@ -1,14 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-inputotp { - display: flex; - align-items: center; - gap: 0.5rem; -} - -.p-inputotp-input { - text-align: center; - width: 2.5rem; -} - ` -}; diff --git a/components/lib/themes/primeone/base/inputtext/index.js b/components/lib/themes/primeone/base/inputtext/index.js deleted file mode 100644 index 2e2f3373c..000000000 --- a/components/lib/themes/primeone/base/inputtext/index.js +++ /dev/null @@ -1,53 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-inputtext { - font-family: inherit; - font-feature-settings: inherit; - font-size: 1rem; - color: ${dt('inputtext.color')}; - background: ${dt('inputtext.background')}; - padding: 0.5rem 0.75rem; - border: 1px solid ${dt('inputtext.border.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - appearance: none; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - box-shadow: ${dt('inputtext.box.shadow')}; -} - -.p-inputtext:enabled:hover { - border-color: ${dt('inputtext.hover.border.color')}; -} - -.p-inputtext:enabled:focus { - border-color: ${dt('inputtext.focus.border.color')}; - outline: 0 none; -} - -.p-inputtext.p-invalid { - border-color: ${dt('inputtext.invalid.border.color')}; -} - -.p-inputtext.p-variant-filled { - background: ${dt('inputtext.filled.background')}; -} - -.p-inputtext.p-variant-filled:enabled:focus { - background-color: ${dt('inputtext.filled.focus.background')}; -} - -.p-inputtext:disabled { - opacity: 1; - background: ${dt('inputtext.disabled.background')}; - color: ${dt('inputtext.disabled.color')}; -} - -.p-inputtext::placeholder { - color: ${dt('inputtext.placeholder.color')}; -} - -.p-fluid .p-inputtext { - width: 100%; -} -` -}; diff --git a/components/lib/themes/primeone/base/knob/index.js b/components/lib/themes/primeone/base/knob/index.js deleted file mode 100644 index 056113f3e..000000000 --- a/components/lib/themes/primeone/base/knob/index.js +++ /dev/null @@ -1,35 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-knob-range { - fill: none; - transition: stroke 0.1s ease-in; -} - -.p-knob-value { - animation-name: p-knob-dash-frame; - animation-fill-mode: forwards; - fill: none; -} - -.p-knob-text { - font-size: 1.3rem; - text-align: center; -} - -.p-knob svg { - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - transition: outline-color ${dt('transition.duration')}; -} -.p-knob svg:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -@keyframes p-knob-dash-frame { - 100% { - stroke-dashoffset: 0; - } -} -` -}; diff --git a/components/lib/themes/primeone/base/listbox/index.js b/components/lib/themes/primeone/base/listbox/index.js deleted file mode 100644 index ef91b7156..000000000 --- a/components/lib/themes/primeone/base/listbox/index.js +++ /dev/null @@ -1,116 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-listbox { - background: ${dt('listbox.background')}; - color: ${dt('listbox.color')}; - border: 1px solid ${dt('listbox.border.color')}; - border-radius: ${dt('rounded.base')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); -} - -.p-listbox.p-focus { - outline: 0 none; - border-color: ${dt('listbox.focus.border.color')}; -} - -.p-listbox.p-disabled { - opacity: 1; - background: ${dt('listbox.disabled.background')}; - color: ${dt('listbox.disabled.color')}; -} - -.p-listbox.p-invalid { - border-color: ${dt('listbox.invalid.border.color')}; -} - -.p-listbox .p-listbox-header { - padding: 0.5rem 0.5rem 0 0.5rem; - border-bottom: 0 none; - margin: 0 0 0 0; -} - -.p-listbox-filter-container { - position: relative; -} - -.p-listbox-filter-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; - right: 0.75rem; - color: ${dt('listbox.filter.icon.color')}; -} - -.p-listbox-filter { - width: 100%; - padding-right: 1.75rem; -} - -.p-listbox-list-container { - overflow: auto; -} - -.p-listbox-list { - list-style-type: none; - margin: 0; - padding: 0.25rem 0.25rem; - outline: 0 none; -} - -.p-listbox-option { - cursor: pointer; - position: relative; - overflow: hidden; - margin: 2px 0; - padding: 0.5rem 0.75rem; - border: 0 none; - border-radius: ${dt('rounded.sm')}; - color: ${dt('listbox.item.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-listbox-option:first-child { - margin-top: 0; -} - -.p-listbox-option:last-child { - margin-bottom: 0; -} - -.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected { - background: ${dt('listbox.item.selected.background')}; - color: ${dt('listbox.item.selected.color')}; -} - -.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus { - background: ${dt('listbox.item.selected.focus.background')}; - color: ${dt('listbox.item.selected.focus.color')}; -} - -.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus { - background: ${dt('listbox.item.focus.background')}; - color: ${dt('listbox.item.focus.color')}; -} - -.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover { - background: ${dt('listbox.item.focus.background')}; - color: ${dt('listbox.item.focus.color')}; -} - -.p-listbox-option-group { - cursor: auto; - margin: 0; - padding: 0.5rem 0.75rem; - color: ${dt('listbox.item.group.color')}; - background: ${dt('listbox.item.group.background')}; - font-weight: 600; -} - -.p-listbox-empty-message { - padding: 0.5rem 0.75rem; - background: transparent; -} -` -}; diff --git a/components/lib/themes/primeone/base/megamenu/index.js b/components/lib/themes/primeone/base/megamenu/index.js deleted file mode 100644 index 54397005c..000000000 --- a/components/lib/themes/primeone/base/megamenu/index.js +++ /dev/null @@ -1,282 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-megamenu { - display: flex; - position: relative; - padding: 0.5rem 0.5rem; - background: ${dt('megamenu.background')}; - color: ${dt('megamenu.color')}; - border: 1px solid ${dt('megamenu.border.color')}; - border-radius: ${dt('rounded.base')}; -} - -.p-megamenu-root-list { - margin: 0; - padding: 0; - list-style: none; -} - -.p-megamenu-item-content { - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; - color: ${dt('megamenu.item.color')}; -} - -.p-megamenu-item-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; - color: inherit; - padding: 0.5rem 0.75rem; - user-select: none; -} - -.p-megamenu-item-label { - line-height: 1; -} - -.p-megamenu-item-icon { - color: ${dt('megamenu.item.icon.color')}; - margin-right: 0.5rem; -} - -.p-megamenu-item.p-focus > .p-megamenu-item-content { - color: ${dt('megamenu.item.focus.color')}; - background: ${dt('megamenu.item.focus.background')}; -} - -.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon, -.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon { - color: ${dt('megamenu.item.icon.focus.color')}; -} - -.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover { - color: ${dt('megamenu.item.focus.color')}; - background: ${dt('megamenu.item.focus.background')}; -} - -.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon, -.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon { - color: ${dt('megamenu.item.icon.focus.color')}; -} - -.p-megamenu-item-active > .p-megamenu-item-content { - color: ${dt('megamenu.item.focus.color')}; - background: ${dt('megamenu.item.focus.background')}; -} - -.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon, -.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon { - color: ${dt('megamenu.item.icon.focus.color')}; -} - -.p-megamenu-submenu-icon { - color: ${dt('megamenu.item.icon.color')}; - margin-left: 0.5rem; - font-size: 0.875rem; - width: 0.875rem; - height: 0.875rem; -} - -.p-megamenu-panel { - display: none; - position: absolute; - width: auto; - z-index: 1; - left: 0; - min-width: 100%; - background: ${dt('megamenu.background')}; - color: ${dt('megamenu.color')}; - border: 1px solid ${dt('megamenu.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) -} - -.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-panel { - display: block; -} - -.p-megamenu-submenu { - margin: 0; - list-style: none; - padding: 0.25rem 0.25rem; - min-width: 12.5rem; -} - -.p-megamenu-submenu .p-megamenu-item { - margin: 2px 0; -} - -.p-megamenu-submenu .p-megamenu-item:first-child { - margin-top: 0; -} - -.p-megamenu-submenu .p-megamenu-item:last-child { - margin-bottom: 0; -} - -.p-megamenu-submenu .p-megamenu-submenu-item { - margin: 0; - padding: 0.5rem 0.75rem; - color: ${dt('megamenu.submenu.header.color')}; - font-weight: 600; - margin-bottom: 2px; -} - -.p-megamenu-submenu .p-menuitem-separator { - border-top: 1px solid ${dt('megamenu.separator.border.color')}; - margin: 2px 0; -} - -.p-megamenu-horizontal { - align-items: center; -} - -.p-megamenu-horizontal .p-megamenu-root-list { - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.p-megamenu-horizontal .p-megamenu-end { - margin-left: auto; - align-self: center; -} - -.p-megamenu-vertical { - display: inline-flex; - flex-direction: column; - min-width: 12.5rem; - padding: 0.25rem 0.25rem; -} - -.p-megamenu-vertical .p-megamenu-root-list { - flex-direction: column; -} - -.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-panel { - left: 100%; - top: 0; -} - -.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon { - margin-left: auto; -} - -.p-megamenu-grid { - display: flex; -} - -.p-megamenu-col-2, -.p-megamenu-col-3, -.p-megamenu-col-4, -.p-megamenu-col-6, -.p-megamenu-col-12 { - flex: 0 0 auto; - padding: 0.5rem; -} - -.p-megamenu-col-2 { - width: 16.6667%; -} - -.p-megamenu-col-3 { - width: 25%; -} - -.p-megamenu-col-4 { - width: 33.3333%; -} - -.p-megamenu-col-6 { - width: 50%; -} - -.p-megamenu-col-12 { - width: 100%; -} - -.p-megamenu-button { - display: none; - justify-content: center; - align-items: center; - cursor: pointer; - width: 1.75rem; - height: 1.75rem; - position: relative; - color: ${dt('megamenu.mobile.toggle.color')}; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-megamenu-button:hover { - color: ${dt('megamenu.mobile.toggle.hover.color')}; - background: ${dt('megamenu.mobile.toggle.hover.background')}; -} - -.p-megamenu-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-megamenu-mobile { - display: flex; -} - -.p-megamenu-mobile .p-megamenu-button { - display: flex; -} - -.p-megamenu-mobile .p-megamenu-root-list { - position: absolute; - display: none; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; - width: 100%; - padding: 0.25rem 0.25rem; - background: ${dt('megamenu.background')}; - border: 1px solid ${dt('megamenu.border.color')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - gap: 2px; -} - -.p-megamenu-mobile-active .p-megamenu-root-list { - display: flex; -} - -.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item { - width: 100%; - position: static; -} - -.p-megamenu-mobile .p-megamenu-panel { - position: static; - border: 0 none; - border-radius: 0; - box-shadow: none; -} - -.p-megamenu-mobile .p-megamenu-grid { - flex-wrap: wrap; - overflow: auto; - max-height: 90%; -} - -.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon { - margin-left: auto; - transition: transform 0.2s; -} - -.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon { - transform: rotate(-180deg); -} -` -}; diff --git a/components/lib/themes/primeone/base/menu/index.js b/components/lib/themes/primeone/base/menu/index.js deleted file mode 100644 index 4f99fe97f..000000000 --- a/components/lib/themes/primeone/base/menu/index.js +++ /dev/null @@ -1,91 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-menu { - padding: 0.25rem 0.25rem; - background: ${dt('menu.background')}; - color: ${dt('menu.color')}; - border: 1px solid ${dt('menu.border.color')}; - border-radius: ${dt('rounded.base')}; - min-width: 12.5rem; -} - -.p-menu-list { - margin: 0; - padding: 0; - list-style: none; -} - -.p-menu-item { - margin: 2px 0; -} - -.p-menu-item:first-child { - margin-top: 0; -} - -.p-menu-item:last-child { - margin-bottom: 0; -} - -.p-menu-item-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; - color: inherit; - padding: 0.5rem 0.75rem; - user-select: none; -} - -.p-menu-item-content { - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; - color: ${dt('menu.item.color')}; -} - -.p-menu-item-label { - line-height: 1; -} - -.p-menu-item-icon { - color: ${dt('menu.item.icon.color')}; - margin-right: 0.5rem; -} - -.p-menu-item.p-focus .p-menu-item-content { - color: ${dt('menu.item.focus.color')}; - background: ${dt('menu.item.focus.background')}; -} - -.p-menu-item.p-focus .p-menu-item-icon { - color: ${dt('menu.item.icon.focus.color')}; -} - -.p-menu-item:not(.p-disabled) .p-menu-item-content:hover { - color: ${dt('menu.item.focus.color')}; - background: ${dt('menu.item.focus.background')}; -} - -.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon { - color: ${dt('menu.item.icon.focus.color')}; -} - -.p-menu-overlay { - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-menu-submenu-item { - margin: 0; - padding: 0.5rem 0.75rem; - color: ${dt('menu.submenu.header.color')}; - font-weight: 600; -} - -.p-menu-separator { - border-top: 1px solid ${dt('menu.separator.border.color.color')}; - margin: 2px 0; -} -` -}; diff --git a/components/lib/themes/primeone/base/menubar/index.js b/components/lib/themes/primeone/base/menubar/index.js deleted file mode 100644 index 43a97be0a..000000000 --- a/components/lib/themes/primeone/base/menubar/index.js +++ /dev/null @@ -1,243 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-menubar { - display: flex; - align-items: center; - padding: 0.5rem 0.5rem; - background: ${dt('menubar.background')}; - color: ${dt('menubar.color')}; - border: 1px solid ${dt('menubar.border.color')}; - border-radius: ${dt('rounded.base')}; -} - -.p-menubar-root-list, -.p-menubar-submenu { - margin: 0; - padding: 0; - list-style: none; - outline: 0 none; -} - -.p-menubar-root-list { - display: flex; - align-items: center; - flex-wrap: wrap; -} - -.p-menubar-root-list > .p-menubar-item-active > .p-menubar-submenu { - display: block; -} - -.p-menubar-item-content { - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}); - color: ${dt('menubar.item.color')}; -} - -.p-menubar-item-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; - color: inherit; - padding: 0.5rem 0.75rem; - user-select: none; -} - -.p-menubar-item-label { - line-height: 1; -} - -.p-menubar-item-icon { - color: ${dt('menubar.item.icon.color')}; - margin-right: 0.5rem; -} - -.p-menubar-item.p-focus > .p-menubar-item-content { - color: ${dt('menubar.item.focus.color')}; - background: ${dt('menubar.item.focus.background')}; -} - -.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon, -.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon { - color: ${dt('menubar.item.icon.focus.color')}; -} - -.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover { - color: ${dt('menubar.item.focus.color')}; - background: ${dt('menubar.item.focus.background')}; -} - -.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon, -.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon { - color: ${dt('menubar.item.icon.focus.color')}; -} - -.p-menubar-item-active > .p-menubar-item-content { - color: ${dt('menubar.item.focus.color')}; - background: ${dt('menubar.item.focus.background')}; -} - -.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon, -.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { - color: ${dt('menubar.item.icon.focus.color')}; -} - -.p-menubar-submenu-icon { - color: ${dt('menubar.item.icon.color')}; - margin-left: auto; - font-size: 0.875rem; - width: 0.875rem; - height: 0.875rem; -} - -.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon { - margin-left: 0.5rem; -} - -.p-menubar-submenu { - display: none; - position: absolute; - min-width: 12.5rem; - z-index: 1; - padding: 0.25rem 0.25rem; - background: ${dt('menubar.background')}; - color: ${dt('menubar.color')}; - border: 1px solid ${dt('menubar.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-menubar-submenu .p-menubar-separator { - border-top: 1px solid ${dt('menubar.separator.border.color')}; - margin: 2px 0; -} - -.p-menubar-submenu .p-menubar-item { - position: relative; - margin: 2px 0; -} - -.p-menubar-submenu .p-menubar-item:first-child { - margin-top: 0; -} - -.p-menubar-submenu .p-menubar-item:last-child { - margin-bottom: 0; -} - - .p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu { - display: block; - left: 100%; - top: 0; -} - -.p-menubar-end { - margin-left: auto; - align-self: center; -} - -.p-menubar-button { - display: none; - justify-content: center; - align-items: center; - cursor: pointer; - width: 1.75rem; - height: 1.75rem; - position: relative; - color: ${dt('menubar.mobile.toggle.color')}; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-menubar-button:hover { - color: ${dt('menubar.mobile.toggle.hover.color')}; - background: ${dt('menubar.mobile.toggle.hover.background')}; -} - -.p-menubar-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-menubar-mobile { - position: relative; -} - -.p-menubar-mobile .p-menubar-button { - display: flex; -} - -.p-menubar-mobile .p-menubar-root-list { - position: absolute; - display: none; - width: 100%; - padding: 0.25rem 0.25rem; - background: ${dt('menubar.background')}; - border: 1px solid ${dt('menubar.border.color')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-menubar-mobile-active .p-menubar-root-list { - display: flex; - flex-direction: column; - top: 100%; - left: 0; - z-index: 1; -} - -.p-menubar-mobile .p-menubar-root-list .p-menubar-item { - width: 100%; - position: static; -} - -.p-menubar-mobile .p-menubar-root-list .p-menubar-separator { - border-top: 1px solid #e2e8f0; - margin: 2px 0; -} - -.p-menubar-mobile .p-menubar-root-list > .p-menubar-item { - position: relative; - margin: 2px 0; -} - -.p-menubar-mobile .p-menubar-root-list > .p-menubar-item:first-child { - margin-top: 0; -} - -.p-menubar-mobile .p-menubar-root-list > .p-menubar-item:last-child { - margin-bottom: 0; -} - -.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon { - margin-left: auto; - transition: transform 0.2s; -} - -.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { - transform: rotate(-180deg); -} - -.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon { - transition: transform 0.2s; - transform: rotate(90deg); -} - -.p-menubar-mobile .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon { - transform: rotate(-90deg); -} - -.p-menubar-mobile .p-menubar-submenu { - width: 100%; - position: static; - box-shadow: none; - border: 0 none; - padding-left: 1rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/message/index.js b/components/lib/themes/primeone/base/message/index.js deleted file mode 100644 index 4ca2235f5..000000000 --- a/components/lib/themes/primeone/base/message/index.js +++ /dev/null @@ -1,177 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-message-content { - display: flex; - align-items: center; - padding: 0.5rem 0.75rem; -} - -.p-message { - margin: 1rem 0; - border-radius: 6px; -} - -.p-message-icon { - flex-shrink: 0; -} - -.p-message-close-button { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - margin: 0 0 0 auto; - overflow: hidden; - position: relative; - width: 1.75rem; - height: 1.75rem; - border-radius: 50%; - background: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - color: inherit; - padding: 0; - border: none; - cursor: pointer; - user-select: none; -} - -.p-message-close-button:focus-visible { - outline-width: ${dt('focus.ring.width')}; - outline-style: ${dt('focus.ring.style')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-message-info { - background: ${dt('message.info.background')}; - border: 1px solid ${dt('message.info.border.color')}; - color: ${dt('message.info.color')}; - box-shadow: ${dt('message.info.box.shadow')}; -} - -.p-message-info .p-message-close-button:focus-visible { - outline-color: ${dt('message.info.color')}; -} - -.p-message-info .p-message-close-button:hover { - background: ${dt('message.info.close.hover.background')}; -} - -.p-message-success { - background: ${dt('message.success.background')}; - border: 1px solid ${dt('message.success.border.color')}; - color: ${dt('message.success.color')}; - box-shadow: ${dt('message.success.box.shadow')}; -} - -.p-message-success .p-message-close-button:focus-visible { - outline-color: ${dt('message.success.color')}; -} - -.p-message-success .p-message-close-button:hover { - background: ${dt('message.success.close.hover.background')}; -} - -.p-message-warn { - background: ${dt('message.warn.background')}; - border: 1px solid ${dt('message.warn.border.color')}; - color: ${dt('message.warn.color')}; - box-shadow: ${dt('message.warn.box.shadow')}; -} - -.p-message-warn .p-message-close-button:focus-visible { - outline-color: ${dt('message.warn.color')}; -} - -.p-message-warn .p-message-close-button:hover { - background: ${dt('message.warn.close.hover.background')}; -} - -.p-message-error { - background: ${dt('message.error.background')}; - border: 1px solid ${dt('message.error.border.color')}; - color: ${dt('message.error.color')}; - box-shadow: ${dt('message.error.box.shadow')}; -} - -.p-message-error .p-message-close-button:focus-visible { - outline-color: ${dt('message.error.color')}; -} - -.p-message-error .p-message-close-button:hover { - background: ${dt('message.error.close.hover.background')}; -} - -.p-message-secondary { - background: ${dt('message.secondary.background')}; - border: 1px solid ${dt('message.secondary.border.color')}; - color: ${dt('message.secondary.color')}; - box-shadow: ${dt('message.secondary.box.shadow')}; -} - -.p-message-secondary .p-message-close-button:focus-visible { - outline-color: ${dt('message.secondary.color')}; -} - -.p-message-secondary .p-message-close-button:hover { - background: ${dt('message.secondary.close.hover.background')}; -} - -.p-message-contrast { - background: ${dt('message.contrast.background')}; - border: 1px solid ${dt('message.contrast.border.color')}; - color: ${dt('message.contrast.color')}; - box-shadow: ${dt('message.contrast.box.shadow')}; -} - -.p-message-contrast .p-message-close-button:focus-visible { - outline-color: ${dt('message.contrast.color')}; -} - -.p-message-contrast .p-message-close-button:hover { - background: ${dt('message.contrast.close.hover.background')}; -} - -.p-message-text { - font-size: 1rem; - font-weight: 500; -} - -.p-message-icon { - font-size: 1rem; - margin-right: 0.5rem; -} - -.p-message .p-icon:not(.p-message-close-button-icon) { - width: 1rem; - height: 1rem; -} - -.p-message-enter-from { - opacity: 0; -} - -.p-message-enter-active { - transition: opacity 0.3s; -} - -.p-message.p-message-leave-from { - max-height: 1000px; -} - -.p-message.p-message-leave-to { - max-height: 0; - opacity: 0; - margin: 0; -} - -.p-message-leave-active { - overflow: hidden; - transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s; -} - -.p-message-leave-active .p-message-close-button { - display: none; -} -` -}; diff --git a/components/lib/themes/primeone/base/metergroup/index.js b/components/lib/themes/primeone/base/metergroup/index.js deleted file mode 100644 index a4dbf874d..000000000 --- a/components/lib/themes/primeone/base/metergroup/index.js +++ /dev/null @@ -1,93 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-metergroup { - display: flex; - gap: 1rem; -} - -.p-metergroup-meters { - display: flex; - background: ${dt('metergroup.meters.background')}; - border-radius: ${dt('rounded.base')}; -} - -.p-metergroup-meter { - border: 0 none; -} - -.p-metergroup-label-list { - display: flex; - flex-wrap: wrap; - margin: 0; - padding: 0; - list-style-type: none; -} - -.p-metergroup-label { - display: inline-flex; - align-items: center; - gap: 0.5rem; -} - -.p-metergroup-label-marker { - display: inline-flex; - width: 0.5rem; - height: 0.5rem; - border-radius: 100%; -} - -.p-metergroup-label-icon { - width: 1rem; - height: 1rem; -} - -.p-metergroup-horizontal { - flex-direction: column; -} - -.p-metergroup-label-list-horizontal { - gap: 1rem; -} - -.p-metergroup-horizontal .p-metergroup-meters { - height: 0.5rem; -} - -.p-metergroup-horizontal .p-metergroup-meter:first-of-type { - border-top-left-radius: ${dt('rounded.base')}; - border-bottom-left-radius: ${dt('rounded.base')}; -} -.p-metergroup-horizontal .p-metergroup-meter:last-of-type { - border-top-right-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; -} - -.p-metergroup-vertical { - flex-direction: row; -} - -.p-metergroup-label-list-vertical { - flex-direction: column; - gap: 0.5rem; -} - -.p-metergroup-vertical .p-metergroup-meters { - flex-direction: column; - width: 0.5rem; - height: 100%; -} - -.p-metergroup-vertical .p-metergroup-label-list { - align-items: start; -} - -.p-metergroup-vertical .p-metergroup-meter:first-of-type { - border-top-left-radius: ${dt('rounded.base')}; - border-top-right-radius: ${dt('rounded.base')}; -} -.p-metergroup-vertical .p-metergroup-meter:last-of-type { - border-bottom-left-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/multiselect/index.js b/components/lib/themes/primeone/base/multiselect/index.js deleted file mode 100644 index 4e6cf9c05..000000000 --- a/components/lib/themes/primeone/base/multiselect/index.js +++ /dev/null @@ -1,204 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-multiselect { - display: inline-flex; - cursor: pointer; - position: relative; - user-select: none; - background: ${dt('multiselect.background')}; - border: 1px solid ${dt('multiselect.border.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - box-shadow: ${dt('multiselect.box.shadow')}; -} - -.p-multiselect:not(.p-disabled):hover { - border-color: ${dt('multiselect.hover.border.color')}; -} - -.p-multiselect:not(.p-disabled).p-focus { - border-color: ${dt('multiselect.focus.border.color')}; - outline: 0 none; -} - -.p-multiselect.p-variant-filled { - background: ${dt('multiselect.filled.background')}; -} - -.p-multiselect.p-variant-filled.p-focus { - background: ${dt('multiselect.filled.focus.background')}; -} - -.p-multiselect.p-invalid { - border-color: ${dt('multiselect.invalid.border.color')}; -} - -.p-multiselect.p-disabled { - opacity: 1; - background: ${dt('multiselect.disabled.background')}; -} - -.p-multiselect-dropdown { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - background: transparent; - color: ${dt('multiselect.toggle.color')}; - width: 2.5rem; - border-top-right-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; -} - -.p-multiselect-label-container { - overflow: hidden; - flex: 1 1 auto; - cursor: pointer; -} - -.p-multiselect-label { - display: block; - white-space: nowrap; - cursor: pointer; - overflow: hidden; - text-overflow: ellipsis; - padding: 0.5rem 0.75rem; - color: ${dt('multiselect.color')}; -} - -.p-multiselect-label.p-placeholder { - color: ${dt('multiselect.placeholder.color')}; -} - -.p-multiselect.p-disabled .p-multiselect-label { - color: ${dt('multiselect.disabled.color')}; -} - -.p-inputwrapper-filled.p-multiselect.p-multiselect-display-chip .p-multiselect-label { - padding: 0.25rem 0.25rem; -} - -.p-multiselect-label-empty { - overflow: hidden; - visibility: hidden; -} - -.p-multiselect .p-multiselect-overlay { - min-width: 100%; -} - -.p-multiselect-overlay { - position: absolute; - top: 0; - left: 0; - background: ${dt('multiselect.overlay.background')}; - color: ${dt('multiselect.overlay.color')}; - border: 1px solid ${dt('multiselect.overlay.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-multiselect-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 0.5rem 1rem 0 1rem; -} - -.p-multiselect-header .p-checkbox { - margin-right: 0.5rem; -} - -.p-multiselect-filter-container { - position: relative; - flex: 1 1 auto; -} - -.p-multiselect-filter-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; - right: 0.75rem; - color: ${dt('multiselect.filter.icon.color')}; -} - -.p-multiselect-filter-container .p-inputtext { - width: 100%; - padding-right: 1.75rem; -} - -.p-multiselect-list-container { - overflow: auto; -} - -.p-multiselect-list { - margin: 0; - padding: 0; - list-style-type: none; - padding: 0.25rem 0.25rem; -} - -.p-multiselect-option { - cursor: pointer; - font-weight: normal; - white-space: nowrap; - position: relative; - overflow: hidden; - display: flex; - align-items: center; - margin: 2px 0; - padding: 0.5rem 0.75rem; - border: 0 none; - color: ${dt('multiselect.item.color')}; - background: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; -} - -.p-multiselect-option:first-child { - margin-top: 0; -} - -.p-multiselect-option:last-child { - margin-bottom: 0; -} - -.p-multiselect-option:not(.p-multiselect-option-selected):not(.p-disabled).p-focus { - background: ${dt('multiselect.item.focus.background')}; - color: ${dt('multiselect.item.focus.color')}; -} - -.p-multiselect-option.p-multiselect-option-selected { - background: ${dt('multiselect.item.selected.background')}; - color: ${dt('multiselect.item.selected.color')}; -} - -.p-multiselect-option.p-multiselect-option-selected.p-focus { - background: ${dt('multiselect.item.selected.focus.background')}; - color: ${dt('multiselect.item.selected.focus.color')}; -} - -.p-multiselect-option .p-checkbox { - margin-right: 0.5rem; -} - -.p-multiselect-option-group { - cursor: auto; - margin: 0; - padding: 0.5rem 0.75rem; - color: ${dt('multiselect.item.group.color')}; - background: ${dt('multiselect.item.group.background')}; - font-weight: 600; -} - -.p-multiselect-empty-message { - padding: 0.5rem 0.75rem; - background: transparent; -} - -.p-fluid .p-multiselect { - display: flex; -} -` -}; diff --git a/components/lib/themes/primeone/base/orderlist/index.js b/components/lib/themes/primeone/base/orderlist/index.js deleted file mode 100644 index f417e8555..000000000 --- a/components/lib/themes/primeone/base/orderlist/index.js +++ /dev/null @@ -1,15 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-orderlist { - display: flex; - gap: 1.125rem; -} - -.p-orderlist-controls { - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.5rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/organizationchart/index.js b/components/lib/themes/primeone/base/organizationchart/index.js deleted file mode 100644 index 9280f39aa..000000000 --- a/components/lib/themes/primeone/base/organizationchart/index.js +++ /dev/null @@ -1,111 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-organizationchart-table { - border-spacing: 0; - border-collapse: separate; - margin: 0 auto; -} - -.p-organizationchart-table > tbody > tr > td { - text-align: center; - vertical-align: top; - padding: 0 0.75rem; -} - -.p-organizationchart-node { - display: inline-block; - position: relative; - border: 1px solid ${dt('organizationchart.node.border.color')}; - background: ${dt('organizationchart.node.background')}; - color: ${dt('organizationchart.node.color')}; - padding: 0.75rem 1rem; - border-radius: ${dt('rounded.base')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; -} - -.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) { - padding: 0.75rem 1rem 1.25rem 1rem; -} - -.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-highlight):hover { - background: ${dt('organizationchart.node.hover.background')}; - color: ${dt('organizationchart.node.hover.color')}; -} - -.p-organizationchart-node.p-highlight { - background: ${dt('highlight.background')}; - color: ${dt('highlight.color')}; -} - -.p-organizationchart-node-toggle-button { - position: absolute; - bottom: -0.75rem; - margin-left: -0.75rem; - z-index: 2; - left: 50%; - user-select: none; - cursor: pointer; - width: 1.5rem; - height: 1.5rem; - text-decoration: none; - background: ${dt('organizationchart.toggle.icon.background')}; - color: ${dt('organizationchart.toggle.icon.color')}; - border-radius: 50%; - border: 1px solid ${dt('organizationchart.toggle.icon.border.color')}; - display: inline-flex; - justify-content: center; - align-items: center; - outline-color: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-organizationchart-node-toggle-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-organizationchart-node-toggle-button-icon { - position: relative; - top: 1px; -} - -.p-organizationchart-connector-down { - margin: 0 auto; - height: 20px; - width: 1px; - background: ${dt('organizationchart.connector.color')}; -} - -.p-organizationchart-connector-right { - border-radius: 0; - border-left: 1px solid ${dt('organizationchart.connector.color')}; - border-top-left-radius: ${dt('rounded.base')}; -} - -.p-organizationchart-connector-left { - border-radius: 0; - border-right: 1px solid ${dt('organizationchart.connector.color')}; -} - -.p-organizationchart-connector-top { - border-top: 1px solid ${dt('organizationchart.connector.color')}; -} - -.p-organizationchart-node-selectable { - cursor: pointer; -} - -.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) { - border-right: 0 none; -} - -.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) { - border-top-right-radius: ${dt('rounded.base')}; -} - -.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) { - border-left: 1px solid ${dt('organizationchart.connector.color')}; - border-top-left-radius: ${dt('rounded.base')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/paginator/index.js b/components/lib/themes/primeone/base/paginator/index.js deleted file mode 100644 index c81333041..000000000 --- a/components/lib/themes/primeone/base/paginator/index.js +++ /dev/null @@ -1,76 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-paginator { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - background: ${dt('paginator.background')}; - color: ${dt('paginator.color')}; - border: 0 none; - padding: 0.5rem 1rem; - border-radius: ${dt('rounded.base')}; - gap: 0.25rem; -} - -.p-paginator-content-start { - margin-right: auto; -} - -.p-paginator-content-end { - margin-left: auto; -} - -.p-paginator-page, -.p-paginator-next, -.p-paginator-last, -.p-paginator-first, -.p-paginator-prev { - cursor: pointer; - display: inline-flex; - align-items: center; - justify-content: center; - line-height: 1; - user-select: none; - overflow: hidden; - position: relative; - background: transparent; - border: 0 none; - color: ${dt('paginator.navigator.color')}; - min-width: 2.5rem; - height: 2.5rem; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: 50%; - padding: 0; - margin: 0; -} - -.p-paginator-page:not(.p-disabled):not(.p-paginator-page-active):hover, -.p-paginator-first:not(.p-disabled):hover, -.p-paginator-prev:not(.p-disabled):hover, -.p-paginator-next:not(.p-disabled):hover, -.p-paginator-last:not(.p-disabled):hover { - background: ${dt('paginator.navigator.hover.background')}; - color: ${dt('paginator.navigator.hover.color')}; -} - -.p-paginator-current { - color: ${dt('paginator.current.page.report.color')}; -} - -.p-paginator-pages { - display: flex; - align-items: center; - gap: 0.25rem; -} - -.p-paginator-page.p-paginator-page-active { - background: ${dt('highlight.background')}; - color: ${dt('highlight.color')}; -} - -.p-paginator-jtp-input .p-inputtext { - max-width: 2.5rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/panel/index.js b/components/lib/themes/primeone/base/panel/index.js deleted file mode 100644 index fb0bba797..000000000 --- a/components/lib/themes/primeone/base/panel/index.js +++ /dev/null @@ -1,34 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-panel { - border: 1px solid ${dt('panel.border.color')}; - border-radius: ${dt('rounded.base')}; - background: ${dt('panel.background')}; - color: ${dt('panel.color')}; -} - -.p-panel-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 1.125rem; -} - -.p-panel-toggleable .p-panel-header { - padding: 0.75rem 1.125rem; -} - -.p-panel-title { - line-height: 1; - font-weight: 600; -} - -.p-panel-content { - padding: 0 1.125rem 1.125rem 1.125rem; -} - -.p-panel-footer { - padding: 0 1.125rem 1.125rem 1.125rem; -} - ` -}; diff --git a/components/lib/themes/primeone/base/panelmenu/index.js b/components/lib/themes/primeone/base/panelmenu/index.js deleted file mode 100644 index df48d6193..000000000 --- a/components/lib/themes/primeone/base/panelmenu/index.js +++ /dev/null @@ -1,129 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-panelmenu { - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -.p-panelmenu-panel { - background: ${dt('panelmenu.panel.background')}; - border: 1px solid ${dt('panelmenu.panel.border.color')}; - color: ${dt('panelmenu.panel.color')}; - border-radius: ${dt('rounded.base')}; - padding: 0.25rem 0.25rem; -} - -.p-panelmenu-header { - outline: 0 none; - border: 0 none; -} - -.p-panelmenu-header-content { - border: 0 none; - color: ${dt('panelmenu.item.color')}; - border-radius: ${dt('rounded.base')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-panelmenu-header-link { - display: flex; - gap: 0.5rem; - align-items: center; - user-select: none; - cursor: pointer; - position: relative; - text-decoration: none; - color: inherit; - padding: 0.5rem 0.75rem; - font-weight: 600; -} - -.p-panelmenu-header-icon, -.p-panelmenu-item-icon, -.p-panelmenu-submenu-icon { - color: ${dt('panelmenu.item.icon.color')}; -} - -.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { - background: ${dt('panelmenu.item.focus.background')}; - color: ${dt('panelmenu.item.focus.color')}; -} - -.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon, -.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon { - color: ${dt('panelmenu.item.icon.focus.color')}; -} - -.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover { - background: ${dt('panelmenu.item.focus.background')}; - color: ${dt('panelmenu.item.focus.color')}; -} - -.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon, -.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon { - color: ${dt('panelmenu.item.icon.focus.color')}; -} - -.p-panelmenu .p-panelmenu-item { - margin: 2px 0; -} - -.p-panelmenu .p-panelmenu-item:first-child { - margin-top: 0; -} - -.p-panelmenu .p-panelmenu-item:last-child { - margin-bottom: 0; -} - -.p-panelmenu-submenu { - margin: 4px 0 0 0; - padding: 0 0 0 1rem; - list-style: none; -} - -.p-panelmenu-item-link { - display: flex; - gap: 0.5rem; - align-items: center; - user-select: none; - cursor: pointer; - text-decoration: none; - color: inherit; - position: relative; - overflow: hidden; - padding: 0.5rem 0.75rem; -} - -.p-panelmenu-item-label { - line-height: 1; -} - -.p-panelmenu-item-content { - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; - color: ${dt('panelmenu.item.color')}; -} - -.p-panelmenu-item.p-focus > .p-panelmenu-item-content { - background: ${dt('panelmenu.item.focus.background')}; - color: ${dt('panelmenu.item.focus.color')}; -} - -.p-panelmenu-item.p-focus > .p-panelmenu-item-icon { - color: ${dt('panelmenu.item.focus.color')}; -} - -.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover { - background: ${dt('panelmenu.item.focus.background')}; - color: ${dt('panelmenu.item.focus.color')}; -} - -.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon, -.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon { - color: ${dt('panelmenu.item.icon.focus.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/password/index.js b/components/lib/themes/primeone/base/password/index.js deleted file mode 100644 index 4fa674e84..000000000 --- a/components/lib/themes/primeone/base/password/index.js +++ /dev/null @@ -1,70 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-password { - display: inline-flex; - position: relative; -} - -.p-password .p-password-overlay { - min-width: 100%; -} - -.p-password-meter { - height: 10px; - margin-bottom: 0.75rem; - background: ${dt('password.meter.border.color')}; - border-radius: ${dt('rounded.base')}; -} - -.p-password-meter-value { - height: 100%; - width: 0; - transition: width 1s ease-in-out; - border-radius: ${dt('rounded.base')}; -} - -.p-password-meter-weak { - background: ${dt('password.strength.weak.background')}; -} - -.p-password-meter-medium { - background: ${dt('password.strength.medium.background')}; -} - -.p-password-meter-strong { - background: ${dt('password.strength.strong.background')}; -} - -.p-fluid .p-password { - display: flex; -} - -.p-password-input::-ms-reveal, -.p-password-input::-ms-clear { - display: none; -} - -.p-password-overlay { - padding: 0.75rem; - background: ${dt('password.overlay.background')}; - color: ${dt('password.overlay.color')}; - border: 1px solid ${dt('password.overlay.border.color')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - border-radius: ${dt('rounded.base')}; -} - -.p-password-toggle-mask-icon { - right: 0.75rem; - color: ${dt('password.icon.color')}; - position: absolute; - top: 50%; - margin-top: -0.5rem; - width: 1rem; - height: 1rem; -} - -.p-password:has(.p-password-toggle-mask-icon) .p-password-input { - padding-right: 2.5rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/picklist/index.js b/components/lib/themes/primeone/base/picklist/index.js deleted file mode 100644 index 720d5ed0a..000000000 --- a/components/lib/themes/primeone/base/picklist/index.js +++ /dev/null @@ -1,23 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-picklist { - display: flex; - gap: 1.125rem; -} - -.p-picklist-controls { - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.5rem; -} - -.p-picklist-list-container { - flex: 1 1 50%; -} - -.p-picklist .p-listbox { - height: 100%; -} -` -}; diff --git a/components/lib/themes/primeone/base/popover/index.js b/components/lib/themes/primeone/base/popover/index.js deleted file mode 100644 index d36aa1318..000000000 --- a/components/lib/themes/primeone/base/popover/index.js +++ /dev/null @@ -1,81 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-popover { - margin-top: 10px; - background: ${dt('popover.background')}; - color: ${dt('popover.color')}; - border: 1px solid ${dt('popover.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-popover-content { - padding: 0.75rem; -} - -.p-popover-flipped { - margin-top: 0; - margin-bottom: 10px; -} - -.p-popover-enter-from { - opacity: 0; - transform: scaleY(0.8); -} - -.p-popover-leave-to { - opacity: 0; -} - -.p-popover-enter-active { - transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); -} - -.p-popover-leave-active { - transition: opacity 0.1s linear; -} - -.p-popover:after, -.p-popover:before { - bottom: 100%; - left: ${dt('{overlay.arrow.left} + 1.25rem', 0)}; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -.p-popover:after { - border-width: 8px; - margin-left: -8px; - border-style: solid; - border-color: transparent; - border-bottom-color: ${dt('popover.background')}; -} - -.p-popover:before { - border-width: 10px; - margin-left: -10px; - border-style: solid; - border-color: transparent; - border-bottom-color: ${dt('popover.border.color')}; -} - -.p-popover-flipped:after, -.p-popover-flipped:before { - bottom: auto; - top: 100%; -} - -.p-popover.p-popover-flipped:after { - border-bottom-color: transparent; - border-top-color: ${dt('popover.background')}; -} - -.p-popover.p-popover-flipped:before { - border-bottom-color: transparent; - border-top-color: ${dt('popover.border.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/progressbar/index.js b/components/lib/themes/primeone/base/progressbar/index.js deleted file mode 100644 index 549547c79..000000000 --- a/components/lib/themes/primeone/base/progressbar/index.js +++ /dev/null @@ -1,122 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-progressbar { - position: relative; - overflow: hidden; - border: 0 none; - height: 1.25rem; - background: ${dt('progressbar.background')}; - border-radius: ${dt('rounded.base')}; -} - -.p-progressbar-value { - border: 0 none; - margin: 0; - background: ${dt('progressbar.value.background')}; -} - -.p-progressbar-label { - color: ${dt('progressbar.label.color')}; - line-height: 1.25rem; - font-size: .75rem; - font-weight: 600; -} - -.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; - transition: width 1s ease-in-out; -} - -.p-progressbar-determinate .p-progressbar-label { - display: inline-flex; -} - -.p-progressbar-indeterminate .p-progressbar-value::before { - content: ""; - position: absolute; - background-color: inherit; - top: 0; - left: 0; - bottom: 0; - will-change: left, right; - 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; - animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; - animation-delay: 1.15s; -} - -@-webkit-keyframes p-progressbar-indeterminate-anim { - 0% { - left: -35%; - right: 100%; - } - 60% { - left: 100%; - right: -90%; - } - 100% { - left: 100%; - right: -90%; - } -} -@keyframes p-progressbar-indeterminate-anim { - 0% { - left: -35%; - right: 100%; - } - 60% { - left: 100%; - right: -90%; - } - 100% { - left: 100%; - right: -90%; - } -} -@-webkit-keyframes p-progressbar-indeterminate-anim-short { - 0% { - left: -200%; - right: 100%; - } - 60% { - left: 107%; - right: -8%; - } - 100% { - left: 107%; - right: -8%; - } -} -@keyframes p-progressbar-indeterminate-anim-short { - 0% { - left: -200%; - right: 100%; - } - 60% { - left: 107%; - right: -8%; - } - 100% { - left: 107%; - right: -8%; - } -} -` -}; diff --git a/components/lib/themes/primeone/base/progressspinner/index.js b/components/lib/themes/primeone/base/progressspinner/index.js deleted file mode 100644 index 86932c803..000000000 --- a/components/lib/themes/primeone/base/progressspinner/index.js +++ /dev/null @@ -1,74 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-progressspinner { - position: relative; - margin: 0 auto; - width: 100px; - height: 100px; - display: inline-block; -} - -.p-progressspinner::before { - content: ""; - display: block; - padding-top: 100%; -} - -.p-progressspinner-spin { - height: 100%; - transform-origin: center center; - width: 100%; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - margin: auto; - animation: p-progressspinner-rotate 2s linear infinite; -} - -.p-progressspinner-circle { - stroke-dasharray: 89, 200; - stroke-dashoffset: 0; - stroke: ${dt('progressspinner.color-1')}; - animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite; - stroke-linecap: round; -} - -@keyframes p-progressspinner-rotate { - 100% { - transform: rotate(360deg); - } -} -@keyframes p-progressspinner-dash { - 0% { - stroke-dasharray: 1, 200; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -35px; - } - 100% { - stroke-dasharray: 89, 200; - stroke-dashoffset: -124px; - } -} -@keyframes p-progressspinner-color { - 100%, - 0% { - stroke: ${dt('progressspinner.color-1')}; - } - 40% { - stroke: ${dt('progressspinner.color-2')}; - } - 66% { - stroke: ${dt('progressspinner.color-3')}; - } - 80%, - 90% { - stroke: ${dt('progressspinner.color-4')}; - } -} -` -}; diff --git a/components/lib/themes/primeone/base/radiobutton/index.js b/components/lib/themes/primeone/base/radiobutton/index.js deleted file mode 100644 index b02a2e80a..000000000 --- a/components/lib/themes/primeone/base/radiobutton/index.js +++ /dev/null @@ -1,111 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-radiobutton { - position: relative; - display: inline-flex; - user-select: none; - vertical-align: bottom; - width: ${dt('radiobutton.width')}; - height: ${dt('radiobutton.height')}; -} - -.p-radiobutton-input { - cursor: pointer; - appearance: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - opacity: 0; - z-index: 1; - outline: 0 none; - border: 1px solid transparent; - border-radius: 50%; -} - -.p-radiobutton-box { - display: flex; - justify-content: center; - align-items: center; - border-radius: 50%; - border: 1px solid ${dt('radiobutton.border.color')}; - background: ${dt('radiobutton.background')}; - width: ${dt('radiobutton.width')}; - height: ${dt('radiobutton.height')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - box-shadow: ${dt('radiobutton.box.shadow')}; -} - -.p-radiobutton-icon { - transition-duration: ${dt('transition.duration')}; - background: transparent; - font-size: ${dt('radiobutton.icon.size')}; - width: ${dt('radiobutton.icon.size')}; - height: ${dt('radiobutton.icon.size')}; - border-radius: 50%; - backface-visibility: hidden; - transform: translateZ(0) scale(0.1); -} - -.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { - border-color: ${dt('radiobutton.hover.border.color')}; -} - -.p-radiobutton.p-radiobutton-checked .p-radiobutton-box { - border-color: ${dt('radiobutton.checked.border.color')}; - background: ${dt('radiobutton.checked.background')}; -} - -.p-radiobutton.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { - background: ${dt('radiobutton.icon.checked.color')}; - transform: translateZ(0) scale(1, 1); - visibility: visible; -} - -.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box { - border-color: ${dt('radiobutton.checked.hover.border.color')}; - background: ${dt('radiobutton.checked.hover.background')}; -} - -.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon { - background: ${dt('radiobutton.icon.checked.hover.color')}; -} - -.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-radiobutton.p-invalid > .p-radiobutton-box { - border-color: ${dt('radiobutton.invalid.border.color')}; -} - -.p-radiobutton.p-variant-filled .p-radiobutton-box { - background: ${dt('radiobutton.filled.background')}; -} - -.p-radiobutton.p-variant-filled.p-radiobutton-checked .p-radiobutton-box { - background: ${dt('radiobutton.checked.background')}; -} - -.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box { - background: ${dt('radiobutton.checked.hover.background')}; -} - -.p-radiobutton.p-disabled { - opacity: 1; -} - -.p-radiobutton.p-disabled .p-radiobutton-box { - background: ${dt('radiobutton.disabled.background')}; -} - -.p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon { - color: ${dt('radiobutton.icon.disabled.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/rating/index.js b/components/lib/themes/primeone/base/rating/index.js deleted file mode 100644 index b2d2f062c..000000000 --- a/components/lib/themes/primeone/base/rating/index.js +++ /dev/null @@ -1,40 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-rating { - position: relative; - display: flex; - align-items: center; - gap: 0.25rem; -} - -.p-rating-option { - display: inline-flex; - align-items: center; - cursor: pointer; - outline-color: transparent; - border-radius: 50%; - cursor: pointer; -} - -.p-rating-option.p-focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-rating-icon { - color: ${dt('rating.icon.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - font-size: 1rem; - width: 1rem; - height: 1rem; -} - -.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon { - color: ${dt('rating.icon.hover.color')}; -} - -.p-rating-option-active .p-rating-icon { - color: ${dt('rating.icon.active.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/scrollpanel/index.js b/components/lib/themes/primeone/base/scrollpanel/index.js deleted file mode 100644 index cd5a0523e..000000000 --- a/components/lib/themes/primeone/base/scrollpanel/index.js +++ /dev/null @@ -1,67 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-scrollpanel-content-container { - overflow: hidden; - width: 100%; - height: 100%; - position: relative; - z-index: 1; - float: left; -} - -.p-scrollpanel-content { - height: calc(100% + 18px); - width: calc(100% + 18px); - padding: 0 18px 18px 0; - position: relative; - overflow: auto; - box-sizing: border-box; - scrollbar-width: none; -} - -.p-scrollpanel-content::-webkit-scrollbar { - display: none; -} - -.p-scrollpanel-bar { - position: relative; - border-radius: 3px; - z-index: 2; - cursor: pointer; - opacity: 0; - outline-color: transparent; - transition: outline-color ${dt('transition.duration')}; - background: ${dt('scrollpanel.bar.background')}; - border: 0 none; - transition: outline-color ${dt('transition.duration')}, opacity ${dt('transition.duration')}; -} - -.p-scrollpanel-bar:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-scrollpanel-bar-y { - width: 9px; - top: 0; -} - -.p-scrollpanel-bar-x { - height: 9px; - bottom: 0; -} - -.p-scrollpanel-hidden { - visibility: hidden; -} - -.p-scrollpanel:hover .p-scrollpanel-bar, -.p-scrollpanel:active .p-scrollpanel-bar { - opacity: 1; -} - -.p-scrollpanel-grabbed { - user-select: none; -} -` -}; diff --git a/components/lib/themes/primeone/base/scrolltop/index.js b/components/lib/themes/primeone/base/scrolltop/index.js deleted file mode 100644 index d13b02bd8..000000000 --- a/components/lib/themes/primeone/base/scrolltop/index.js +++ /dev/null @@ -1,58 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-scrolltop { - position: fixed; - bottom: 20px; - right: 20px; - display: flex; - align-items: center; - justify-content: center; - background: ${dt('scrolltop.background')}; - color: ${dt('scrolltop.color')}; -} - -.p-scrolltop:hover { - background: ${dt('scrolltop.hover.background')}; - color: ${dt('scrolltop.hover.text')}; -} - -.p-scrolltop-icon { - font-size: 1.5rem; - width: 1.5rem; - height: 1.5rem; -} - -.p-scrolltop-sticky { - position: sticky; -} - -.p-scrolltop-sticky { - margin-left: auto; -} - -.p-scrolltop-enter-from { - opacity: 0; -} - -.p-scrolltop-enter-active { - transition: opacity 0.15s; -} - -.p-scrolltop.p-scrolltop-leave-to { - opacity: 0; -} - -.p-scrolltop-leave-active { - transition: opacity 0.15s; -} - -.p-scrolltop { - width: 3rem; - height: 3rem; - border-radius: 50%; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} -` -}; diff --git a/components/lib/themes/primeone/base/select/index.js b/components/lib/themes/primeone/base/select/index.js deleted file mode 100644 index 6d0235ad7..000000000 --- a/components/lib/themes/primeone/base/select/index.js +++ /dev/null @@ -1,215 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-select { - display: inline-flex; - cursor: pointer; - position: relative; - user-select: none; - background: ${dt('select.background')}; - border: 1px solid ${dt('select.border.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - box-shadow: ${dt('select.box.shadow')}; -} - -.p-select:not(.p-disabled):hover { - border-color: ${dt('select.hover.border.color')}; -} - -.p-select:not(.p-disabled).p-focus { - border-color:${dt('select.focus.border.color')}; - outline: 0 none; -} - -.p-select.p-variant-filled { - background: ${dt('select.filled.background')}; -} - -.p-select.p-variant-filled.p-focus { - background: ${dt('select.filled.focus.background')}; -} - -.p-select.p-invalid { - border-color: ${dt('select.invalid.border.color')}; -} - -.p-select.p-disabled { - opacity: 1; - background: ${dt('select.disabled.background')}; -} - -.p-select-clear-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; - color: #94a3b8; - right: 2.5rem; -} - -.p-select-dropdown { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - background: transparent; - color: ${dt('select.toggle.color')}; - width: 2.5rem; - border-top-right-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; -} - -.p-select-label { - display: block; - white-space: nowrap; - overflow: hidden; - flex: 1 1 auto; - width: 1%; - padding: 0.5rem 0.75rem; - text-overflow: ellipsis; - cursor: pointer; - color: ${dt('select.color')}; - background: transparent; - border: 0 none; - outline: 0 none; -} - -.p-select-label.p-placeholder { - color: ${dt('select.placeholder.color')}; -} - -.p-select:has(.p-select-clear-icon) .p-select-label { - padding-right: 1.75rem; -} - -.p-select.p-disabled .p-select-label { - color: ${dt('select.disabled.color')}; -} - -.p-select-label-empty { - overflow: hidden; - opacity: 0; -} - -input.p-select-label { - cursor: default; -} - -.p-select .p-select-overlay { - min-width: 100%; -} - -.p-select-overlay { - position: absolute; - top: 0; - left: 0; - background: ${dt('select.overlay.background')}; - color: ${dt('select.overlay.color')}; - border: 1px solid ${dt('select.overlay.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-select-header { - padding: 0.5rem 0.5rem 0 0.5rem; -} - -.p-select-filter { - width: 100%; - padding-right: 1.75rem; - margin-right: -1.75rem; -} - -.p-select-filter-container { - position: relative; -} - -.p-select-filter-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; - right: 0.75rem; - color: ${dt('select.filter.icon.color')}; -} - -.p-select-list-container { - overflow: auto; -} - -.p-select-option-group { - cursor: auto; - margin: 0; - padding: 0.5rem 0.75rem; - background: ${dt('select.item.group.background')}; - color: ${dt('select.item.group.color')}; - font-weight: 600; -} - -.p-select-list { - margin: 0; - padding: 0; - list-style-type: none; - padding: 0.25rem 0.25rem; -} - -.p-select-option { - cursor: pointer; - font-weight: normal; - white-space: nowrap; - position: relative; - overflow: hidden; - display: flex; - align-items: center; - margin: 2px 0; - padding: 0.5rem 0.75rem; - border: 0 none; - color: ${dt('select.item.color')}; - background: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; -} - -.p-select-option:first-child { - margin-top: 0; -} - -.p-select-option:last-child { - margin-bottom: 0; -} - -.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus { - background: ${dt('select.item.focus.background')}; - color: ${dt('select.item.focus.color')}; -} - -.p-select-option.p-select-option-selected { - background: ${dt('select.item.selected.background')}; - color: ${dt('select.item.selected.color')}; -} - -.p-select-option.p-select-option-selected.p-focus { - background: ${dt('select.item.selected.focus.background')}; - color: ${dt('select.item.selected.focus.color')}; -} - -.p-select-option-check-icon { - position: relative; - margin-left: -0.375rem; - margin-right: 0.375rem; - color: ${dt('select.checkmark.color')}; -} - -.p-select-empty-message { - padding: 0.5rem 0.75rem; - background: transparent; -} - -.p-fluid .p-select { - display: flex; -} - -.p-fluid .p-select .p-select-label { - width: 1%; -} -` -}; diff --git a/components/lib/themes/primeone/base/selectbutton/index.js b/components/lib/themes/primeone/base/selectbutton/index.js deleted file mode 100644 index 52885db37..000000000 --- a/components/lib/themes/primeone/base/selectbutton/index.js +++ /dev/null @@ -1,35 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-selectbutton { - display: inline-flex; - user-select: none; - vertical-align: bottom; - outline-color: transparent; - border-radius: ${dt('rounded.base')}; -} - -.p-selectbutton .p-togglebutton { - border-radius: 0; -} - -.p-selectbutton .p-togglebutton:focus-visible { - position: relative; - z-index: 1; -} - -.p-selectbutton .p-togglebutton:first-child { - border-top-left-radius: ${dt('rounded.base')}; - border-bottom-left-radius: ${dt('rounded.base')}; -} - -.p-selectbutton .p-togglebutton:last-child { - border-top-right-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; -} - -.p-selectbutton.p-invalid { - outline: 1px solid ${dt('selectbutton.invalid.border.color')}; - outline-offset: 0; -} -` -}; diff --git a/components/lib/themes/primeone/base/skeleton/index.js b/components/lib/themes/primeone/base/skeleton/index.js deleted file mode 100644 index 0fa1e3548..000000000 --- a/components/lib/themes/primeone/base/skeleton/index.js +++ /dev/null @@ -1,39 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-skeleton { - overflow: hidden; - background-color: ${dt('skeleton.background')}; - border-radius: ${dt('rounded.base')}; -} - -.p-skeleton::after { - content: ""; - animation: p-skeleton-animation 1.2s infinite; - height: 100%; - left: 0; - position: absolute; - right: 0; - top: 0; - transform: translateX(-100%); - z-index: 1; - background: linear-gradient( 90deg, rgba(255, 255, 255, 0), ${dt('skeleton.animation.background')}, rgba(255, 255, 255, 0) ); -} - -.p-skeleton-circle { - border-radius: 50%; -} - -.p-skeleton-animation-none::after { - animation: none; -} - -@keyframes p-skeleton-animation { - from { - transform: translateX(-100%); - } - to { - transform: translateX(100%); - } -} -` -}; diff --git a/components/lib/themes/primeone/base/slider/index.js b/components/lib/themes/primeone/base/slider/index.js deleted file mode 100644 index e6d1cef30..000000000 --- a/components/lib/themes/primeone/base/slider/index.js +++ /dev/null @@ -1,83 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-slider { - position: relative; - background: ${dt('slider.track.background')}; - border-radius: ${dt('rounded.base')}; -} - -.p-slider-handle { - cursor: grab; - touch-action: none; - display: flex; - justify-content: center; - align-items: center; - height: 20px; - width: 20px; - background: ${dt('slider.handle.background')}; - border: 0 none; - border-radius: 50%; - transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-slider-handle::before { - content: ""; - width: 16px; - height: 16px; - display: block; - background-color: ${dt('slider.handle.content.background')}; - border-radius: 50%; - box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14); -} - -.p-slider:not(.p-disabled) .p-slider-handle:hover { - background: ${dt('slider.handle.hover.background')}; - border-color: transparent; -} - -.p-slider-handle:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: 0; -} - -.p-slider-range { - display: block; - background: ${dt('slider.range.background')}; - border-radius: ${dt('rounded.base')}; -} - -.p-slider.p-slider-horizontal { - height: 3px; -} - -.p-slider-horizontal .p-slider-range { - top: 0; - left: 0; - height: 100%; -} - -.p-slider-horizontal .p-slider-handle { - top: 50%; - margin-top: -10px; - margin-left: -10px; -} - -.p-slider-vertical { - height: 100px; - width: 3px; -} - -.p-slider-vertical .p-slider-handle { - left: 50%; - margin-left: -10px; - margin-bottom: -10px; -} - -.p-slider-vertical .p-slider-range { - bottom: 0; - left: 0; - width: 100%; -} -` -}; diff --git a/components/lib/themes/primeone/base/speeddial/index.js b/components/lib/themes/primeone/base/speeddial/index.js deleted file mode 100644 index e9da673db..000000000 --- a/components/lib/themes/primeone/base/speeddial/index.js +++ /dev/null @@ -1,80 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-speeddial { - position: static; - display: flex; - gap: 0.25rem; -} - -.p-speeddial-button { - z-index: 1; - width: 2.5rem; - height: 2.5rem; -} - -.p-speeddial-button.p-speeddial-rotate { - transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt( - 'transition.duration' - )}, outline-color ${dt('transition.duration')}; - will-change: transform; -} - -.p-speeddial-list { - margin: 0; - padding: 0; - list-style: none; - display: flex; - align-items: center; - justify-content: center; - transition: top 0s linear ${dt('transition.duration')}; - pointer-events: none; - outline: 0 none; - z-index: 2; - gap: 0.25rem; -} - -.p-speeddial-item { - transform: scale(0); - opacity: 0; - transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s; - will-change: transform; -} - -.p-speeddial-circle .p-speeddial-item, -.p-speeddial-semi-circle .p-speeddial-item, -.p-speeddial-quarter-circle .p-speeddial-item { - position: absolute; -} - -.p-speeddial-mask { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - opacity: 0; - background-color: ${dt('mask.background')}; - border-radius: 6px; - transition: opacity 150ms; -} - -.p-speeddial-mask-visible { - pointer-events: none; - opacity: 1; - transition: opacity 150ms; -} - -.p-speeddial-open .p-speeddial-list { - pointer-events: auto; -} - -.p-speeddial-open .p-speeddial-item { - transform: scale(1); - opacity: 1; -} - -.p-speeddial-open .p-speeddial-rotate { - transform: rotate(45deg); -} -` -}; diff --git a/components/lib/themes/primeone/base/splitbutton/index.js b/components/lib/themes/primeone/base/splitbutton/index.js deleted file mode 100644 index 1e72c9596..000000000 --- a/components/lib/themes/primeone/base/splitbutton/index.js +++ /dev/null @@ -1,71 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-splitbutton { - display: inline-flex; - position: relative; - border-radius: ${dt('rounded.base')}; -} - -.p-splitbutton-button { - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: 0 none; -} - -.p-splitbutton-button:not(:disabled):hover, -.p-splitbutton-button:not(:disabled):active { - border-right: 0 none; -} - -.p-splitbutton-dropdown { - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.p-splitbutton .p-menu { - min-width: 100%; -} - -.p-fluid .p-splitbutton { - display: flex; -} - -.p-splitbutton.p-button-rounded .p-splitbutton-button { - border-top-left-radius: 2rem; - border-bottom-left-radius: 2rem;; -} - -.p-splitbutton.p-button-rounded .p-splitbutton-dropdown { - border-top-right-radius: 2rem; - border-bottom-right-radius: 2rem;; -} - -.p-splitbutton.p-button-raised { - box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); -} - -/* -.p-splitbutton .p-splitbutton-button, -.p-splitbutton.p-button-rounded > .p-splitbutton-button.p-button, -.p-splitbutton.p-button-outlined > .p-splitbutton-button.p-button, -.p-splitbutton.p-button-outlined > .p-splitbutton-button.p-button-outlined.p-button:hover { - flex: 1 1 auto; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-right: 0 none; -} - -.p-splitbutton-dropdown, -.p-splitbutton.p-button-rounded > .p-splitbutton-dropdown.p-button, -.p-splitbutton.p-button-outlined > .p-splitbutton-dropdown.p-button { - display: flex; - align-items: center; - justify-content: center; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - - -*/ -` -}; diff --git a/components/lib/themes/primeone/base/splitter/index.js b/components/lib/themes/primeone/base/splitter/index.js deleted file mode 100644 index 69cbf33d5..000000000 --- a/components/lib/themes/primeone/base/splitter/index.js +++ /dev/null @@ -1,80 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-splitter { - display: flex; - flex-wrap: nowrap; - border: 1px solid ${dt('splitter.border.color')}; - background: ${dt('splitter.background')}; - border-radius: ${dt('rounded.base')}; - color: ${dt('splitter.color')}; -} - -.p-splitter-vertical { - flex-direction: column; -} - -.p-splitter-gutter { - flex-grow: 0; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - z-index: 1; - background: ${dt('splitter.gutter.background')}; -} - -.p-splitter-gutter-handle { - border-radius: ${dt('rounded.base')}; - background: transparent; - transition: outline-color ${dt('transition.duration')}; - outline-color: transparent; -} - -.p-splitter-gutter-handle:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-splitter-horizontal.p-splitter-resizing { - cursor: col-resize; - user-select: none; -} - -.p-splitter-vertical.p-splitter-resizing { - cursor: row-resize; - user-select: none; -} - -.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle { - height: 24px; - width: 100%; -} - -.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle { - width: 24px; - height: 100%; -} - -.p-splitter-horizontal > .p-splitter-gutter { - cursor: col-resize; -} - -.p-splitter-vertical > .p-splitter-gutter { - cursor: row-resize; -} - -.p-splitter-panel { - flex-grow: 1; - overflow: hidden; -} - -.p-splitter-panel-nested { - display: flex; -} - -.p-splitter-panel .p-splitter { - flex-grow: 1; - border: 0 none; -} -` -}; diff --git a/components/lib/themes/primeone/base/stepper/index.js b/components/lib/themes/primeone/base/stepper/index.js deleted file mode 100644 index 01ddd4ab0..000000000 --- a/components/lib/themes/primeone/base/stepper/index.js +++ /dev/null @@ -1,170 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-stepper-list { - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - margin: 0; - padding: 0; - list-style-type: none; - overflow-x: auto; -} - -.p-stepper-item { - position: relative; - display: flex; - flex: 1 1 auto; - align-items: center; - padding: 0.5rem; -} - -.p-stepper-item:last-of-type { - flex: initial; -} - -.p-stepper-item-header { - border: 0 none; - display: inline-flex; - align-items: center; - text-decoration: none; - cursor: pointer; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - background: transparent; -} - -.p-stepper-item .p-stepper-item-header:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-stepper.p-stepper-readonly .p-stepper-item { - cursor: auto; -} - -.p-stepper-item-title { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - margin-left: 0.5rem; - color: ${dt('stepper.title.color')}; - font-weight: 500; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-stepper-item-number { - display: flex; - align-items: center; - justify-content: center; - position: relative; - color: ${dt('stepper.marker.color')}; - border: 1px solid ${dt('stepper.marker.border.color')}; - border-width: 2px; - background: ${dt('stepper.marker.background')}; - min-width: 2rem; - height: 2rem; - line-height: 2rem; - font-size: 1.143rem; - border-radius: 50%; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-stepper-item-number::after { - content: " "; - position: absolute; - width: 100%; - height: 100%; - border-radius: 50%; - box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); -} - -.p-stepper-item-active .p-stepper-item-header { - cursor: default; -} - -.p-stepper-item-active .p-stepper-item-number { - background: ${dt('stepper.marker.active.background')}; - color: ${dt('stepper.marker.active.color')}; -} - -.p-stepper-item-active .p-stepper-item-title { - color: ${dt('stepper.title.active.color')}; -} - -.p-stepper-item:not(.p-disabled):focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-stepper-item:has(~ .p-stepper-item-active) .p-stepper-separator { - background: ${dt('stepper.connector.active.background')}; -} - -.p-stepper-separator { - flex: 1 1 0; - background: ${dt('stepper.connector.background')}; - width: 100%; - height: 2px; - margin-inline-start: 1rem; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-stepper-panels { - background: ${dt('stepper.content.background')}; - color: ${dt('stepper.content.color')}; - padding: 0.875rem 1.125rem 1.125rem 1.125rem; -} - -.p-stepper-vertical .p-stepper-list { - flex-direction: column; -} - -.p-stepper-vertical { - display: flex; - flex-direction: column; -} - -.p-stepper-vertical .p-stepper-panel-content-container { - display: flex; - flex: 1 1 auto; -} - -.p-stepper-vertical .p-stepper-panel { - display: flex; - flex-direction: column; - flex: initial; -} - -.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { - flex: 1 1 auto; -} - -.p-stepper-vertical .p-stepper-panel .p-stepper-item { - flex: initial; -} - -.p-stepper-vertical .p-stepper-panel .p-stepper-panel-content { - width: 100%; - padding-left: 1rem; -} - -.p-stepper-vertical .p-stepper-panel .p-stepper-separator { - flex: 0 0 auto; - width: 2px; - height: auto; - margin-inline-start: calc(1.75rem + 2px); -} - -.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { - background: ${dt('stepper.connector.active.background')}; -} - -.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-panel-content { - padding-left: 3rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/steps/index.js b/components/lib/themes/primeone/base/steps/index.js deleted file mode 100644 index 149f55fe5..000000000 --- a/components/lib/themes/primeone/base/steps/index.js +++ /dev/null @@ -1,117 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-steps { - position: relative; -} - -.p-steps-list { - padding: 0; - margin: 0; - list-style-type: none; - display: flex; -} - -.p-steps-item { - position: relative; - display: flex; - justify-content: center; - flex: 1 1 auto; -} - -.p-steps-item.p-disabled, -.p-steps-item.p-disabled * { - opacity: 1; - pointer-events: auto; - user-select: auto; - cursor: auto; -} - -.p-steps-item:before { - content: " "; - border-top: 2px solid ${dt('steps.connector.border.color')}; - width: 100%; - top: 50%; - left: 0; - display: block; - position: absolute; - margin-top: -1rem; - margin-top: calc(-1rem + 1px); -} - -.p-steps-item:first-child::before { - width: calc(50% + 1rem); - transform: translateX(100%); -} - -.p-steps-item:last-child::before { - width: 50%; -} - -.p-steps-item-link { - display: inline-flex; - flex-direction: column; - align-items: center; - overflow: hidden; - text-decoration: none; - transition: outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; -} - -.p-steps-item-link:not(.p-disabled):focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-steps-item-label { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - margin-top: 0.5rem; - color: ${dt('steps.item.color')}; - display: block; - font-weight: 500; -} - -.p-steps-item-number { - display: flex; - align-items: center; - justify-content: center; - color: ${dt('steps.marker.color')}; - border: 2px solid ${dt('steps.marker.border.color')}; - background: ${dt('steps.marker.background')}; - min-width: 2rem; - height: 2rem; - line-height: 2rem; - font-size: 1.143rem; - z-index: 1; - border-radius: 50%; - position: relative; - font-weight: 500; -} - -.p-steps-item-number::after { - content: " "; - position: absolute; - width: 100%; - height: 100%; - border-radius: 50%; - box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); -} - -.p-steps:not(.p-readonly) .p-steps-item { - cursor: pointer; -} - -.p-steps-item-active .p-steps-item-number { - background: ${dt('steps.marker.active.background')}; - color: ${dt('steps.marker.active.color')}; -} - -.p-steps-item-active .p-steps-item-label { - font-weight: 500; - color: ${dt('steps.item.active.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/tabmenu/index.js b/components/lib/themes/primeone/base/tabmenu/index.js deleted file mode 100644 index 7fd2de440..000000000 --- a/components/lib/themes/primeone/base/tabmenu/index.js +++ /dev/null @@ -1,74 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-tabmenu { - overflow-x: auto; -} - -.p-tabmenu-tablist { - display: flex; - margin: 0; - padding: 0; - list-style-type: none; - flex: 1 1 auto; - background: ${dt('tabmenu.nav.background')}; - border: 1px solid ${dt('tabmenu.nav.border.color')}; - border-width: 0 0 1px 0; - position: relative; -} - -.p-tabmenu-item-link { - cursor: pointer; - user-select: none; - display: flex; - align-items: center; - text-decoration: none; - position: relative; - overflow: hidden; - border-style: solid; - border-width: 0 0 1px 0; - border-color: transparent transparent ${dt('tabmenu.header.border.color')} transparent; - color: ${dt('tabmenu.header.color')}; - padding: 1rem 1.125rem; - font-weight: 600; - border-top-right-radius: ${dt('rounded.base')}; - border-top-left-radius: ${dt('rounded.base')}; - transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - margin: 0 0 -1px 0; - outline-color: transparent; -} - -.p-tabmenu-item-link:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: -1px; -} - -.p-tabmenu-item-icon { - margin-right: 0.5rem; -} - -.p-tabmenu-item-label { - line-height: 1; -} -.p-tabmenu-item:not(.p-tabmenu-item-active):not(.p-disabled):hover .p-tabmenu-item-link { - color: ${dt('tabmenu.header.hover.color')}; -} - -.p-tabmenu-item-active .p-tabmenu-item-link { - color: ${dt('tabmenu.header.active.border.color')}; -} - -.p-tabmenu-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: -1px; - height: 1px; - background-color: ${dt('tabmenu.header.active.border.color')}; - transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); -} - -.p-tabmenu::-webkit-scrollbar { - display: none; -} -` -}; diff --git a/components/lib/themes/primeone/base/tabs/index.js b/components/lib/themes/primeone/base/tabs/index.js deleted file mode 100644 index d25d602e3..000000000 --- a/components/lib/themes/primeone/base/tabs/index.js +++ /dev/null @@ -1,120 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-tabs { - display: flex; - flex-direction: column; -} - -.p-tablist { - position: relative; -} - -.p-tabs-scrollable > .p-tablist { - overflow: hidden; -} - -.p-tablist-viewport { - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - scrollbar-width: none; - overscroll-behavior: contain auto; -} - -.p-tablist-viewport::-webkit-scrollbar { - display: none; -} - -.p-tablist-tab-list { - position: relative; - display: flex; - background: ${dt('tabs.nav.background')}; - border: 1px solid ${dt('tabs.nav.border.color')}; - border-width: 0 0 1px 0; -} - -.p-tablist-prev-button, -.p-tablist-next-button { - all: unset; - position: absolute; - top: 0; - z-index: 2; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background: ${dt('tabs.navigator.icon.background')}; - color: ${dt('tabs.navigator.icon.color')}; - width: 2.5rem; - transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - box-shadow: ${dt('tabs.navigator.icon.box.shadow')}; - cursor: pointer; -} - -.p-tablist-prev-button:focus-visible, -.p-tablist-next-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-tablist-prev-button:hover, -.p-tablist-next-button:hover { - color: ${dt('tabs.navigator.icon.hover.color')}; -} - -.p-tablist-prev-button { - left: 0; -} - -.p-tablist-next-button { - right: 0; -} - -.p-tab { - cursor: pointer; - border-style: solid; - border-width: 0 0 1px 0; - border-color: transparent transparent ${dt('tabs.header.border.color')} transparent; - color: ${dt('tabs.header.color')}; - background: ${dt('tabs.nav.background')}; - padding: 1rem 1.125rem; - font-weight: 600; - border-top-right-radius: ${dt('rounded.base')}; - border-top-left-radius: ${dt('rounded.base')}; - transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - margin: 0 0 -1px 0; - outline-color: transparent; - line-height: 1; - white-space: nowrap; -} - -.p-tab:not(.p-disabled):focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: -1px; -} - -.p-tab:not(.p-tab-active):not(.p-disabled):hover { - color: ${dt('tabs.header.hover.color')}; -} - -.p-tab-active { - color: ${dt('tabs.header.active.color')}; -} - -.p-tabpanels { - background: ${dt('tabs.navigator.content.background')}; - color: ${dt('tabs.navigator.content.color')}; - padding: 0.875rem 1.125rem 1.125rem 1.125rem; -} - -.p-tablist-active-bar { - z-index: 1; - display: block; - position: absolute; - bottom: -1px; - height: 1px; - background-color: ${dt('tabs.header.active.border.color')}; - transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); -} -` -}; diff --git a/components/lib/themes/primeone/base/tabview/index.js b/components/lib/themes/primeone/base/tabview/index.js deleted file mode 100644 index e69854945..000000000 --- a/components/lib/themes/primeone/base/tabview/index.js +++ /dev/null @@ -1,132 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-tabview-tablist-container { - position: relative; -} - -.p-tabview-scrollable > .p-tabview-tablist-container { - overflow: hidden; -} - -.p-tabview-tablist-scroll-container { - overflow-x: auto; - overflow-y: hidden; - scroll-behavior: smooth; - scrollbar-width: none; - overscroll-behavior: contain auto; -} - -.p-tabview-tablist-scroll-container::-webkit-scrollbar { - display: none; -} - -.p-tabview-tablist { - display: flex; - margin: 0; - padding: 0; - list-style-type: none; - flex: 1 1 auto; - background: ${dt('tabview.nav.background')}; - border: 1px solid ${dt('tabview.nav.border.color')}; - border-width: 0 0 1px 0; - position: relative; -} - -.p-tabview-tab-header { - cursor: pointer; - user-select: none; - display: flex; - align-items: center; - text-decoration: none; - position: relative; - overflow: hidden; - border-style: solid; - border-width: 0 0 1px 0; - border-color: transparent transparent ${dt('tabview.header.border.color')} transparent; - color: ${dt('tabview.header.color')}; - padding: 1rem 1.125rem; - font-weight: 600; - border-top-right-radius: ${dt('rounded.base')}; - border-top-left-radius: ${dt('rounded.base')}; - transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - margin: 0 0 -1px 0; - outline-color: transparent; -} - -.p-tabview-tablist-item:not(.p-disabled) .p-tabview-tab-header:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: -1px; -} - -.p-tabview-tablist-item:not(.p-highlight):not(.p-disabled):hover > .p-tabview-tab-header { - color: ${dt('tabview.header.hover.color')}; -} - -.p-tabview-tablist-item.p-highlight > .p-tabview-tab-header { - color: ${dt('tabview.header.active.color')}; -} - -.p-tabview-tab-title { - line-height: 1; - white-space: nowrap; -} - -.p-tabview-next-button, -.p-tabview-prev-button { - position: absolute; - top: 0; - margin: 0; - padding: 0; - z-index: 2; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background: ${dt('tabview.navigator.icon.background')}; - color: ${dt('tabview.navigator.icon.color')}; - width: 2.5rem; - border-radius: 0; - outline-color: transparent; - transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - box-shadow: ${dt('tabview.navigator.icon.box.shadow')}; - border: none; - cursor: pointer; - user-select: none; -} - -.p-tabview-next-button:focus-visible, -.p-tabview-prev-button:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-tabview-next-button:hover, -.p-tabview-prev-button:hover { - color: ${dt('tabview.navigator.icon.hover.color')}; -} - -.p-tabview-prev-button { - left: 0; -} - -.p-tabview-next-button { - right: 0; -} - -.p-tabview-panels { - background: ${dt('tabview.navigator.content.background')}; - color: ${dt('tabview.navigator.content.color')}; - padding: 0.875rem 1.125rem 1.125rem 1.125rem; -} - -.p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: -1px; - height: 1px; - background-color: ${dt('tabview.header.active.border.color')}; - transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); -} -` -}; diff --git a/components/lib/themes/primeone/base/tag/index.js b/components/lib/themes/primeone/base/tag/index.js deleted file mode 100644 index c352f63b3..000000000 --- a/components/lib/themes/primeone/base/tag/index.js +++ /dev/null @@ -1,56 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-tag { - display: inline-flex; - align-items: center; - justify-content: center; - background: ${dt('tag.primary.background')}; - color: ${dt('tag.primary.color')}; - font-size: 0.875rem; - font-weight: 700; - padding: 0.25rem 0.4rem; - border-radius: ${dt('rounded.base')}; - gap: 0.25rem; -} - -.p-tag-icon { - font-size: 0.75rem; - width: 0.75rem; - height: 0.75rem; -} - -.p-tag-rounded { - border-radius: 10rem; -} - -.p-tag-success { - background: ${dt('tag.success.background')}; - color: ${dt('tag.success.color')}; -} - -.p-tag-info { - background: ${dt('tag.info.background')}; - color: ${dt('tag.info.color')}; -} - -.p-tag-warn { - background: ${dt('tag.warn.background')}; - color: ${dt('tag.warn.color')}; -} - -.p-tag-danger { - background: ${dt('tag.danger.background')}; - color: ${dt('tag.danger.color')}; -} - -.p-tag-secondary { - background: ${dt('tag.secondary.background')}; - color: ${dt('tag.secondary.color')}; -} - -.p-tag-contrast { - background: ${dt('tag.contrast.background')}; - color: ${dt('tag.contrast.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/terminal/index.js b/components/lib/themes/primeone/base/terminal/index.js deleted file mode 100644 index ecafe73ef..000000000 --- a/components/lib/themes/primeone/base/terminal/index.js +++ /dev/null @@ -1,42 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-terminal { - height: 18rem; - overflow: auto; - background: ${dt('terminal.background')}; - color: ${dt('terminal.color')}; - border: 1px solid ${dt('terminal.border.color')}; - padding: 0.5rem 0.75rem; - border-radius: ${dt('rounded.base')}; -} - -.p-terminal-prompt { - display: flex; - align-items: center; -} - -.p-terminal-prompt-value { - flex: 1 1 auto; - border: 0 none; - background-color: transparent; - color: inherit; - padding: 0; - outline: 0 none; - font-family: inherit; - font-feature-settings: inherit; - font-size: 1rem; -} - -.p-terminal-prompt-label { - margin-right: 0.25rem; -} - -.p-terminal-input::-ms-clear { - display: none; -} - -.p-terminal-command-response { - margin: 2px 0; -} -` -}; diff --git a/components/lib/themes/primeone/base/textarea/index.js b/components/lib/themes/primeone/base/textarea/index.js deleted file mode 100644 index b717aaba7..000000000 --- a/components/lib/themes/primeone/base/textarea/index.js +++ /dev/null @@ -1,58 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-inputtextarea { - font-family: inherit; - font-feature-settings: inherit; - font-size: 1rem; - color: ${dt('textarea.color')}; - background: ${dt('textarea.background')}; - padding: 0.5rem 0.75rem; - border: 1px solid ${dt('textarea.border.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - appearance: none; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - box-shadow: ${dt('textarea.box.shadow')}; -} - -.p-inputtextarea:enabled:hover { - border-color: ${dt('textarea.hover.border.color')}; -} - -.p-inputtextarea:enabled:focus { - border-color: ${dt('textarea.focus.border.color')}; - outline: 0 none; -} - -.p-inputtextarea.p-invalid { - border-color: ${dt('textarea.invalid.border.color')}; -} - -.p-inputtextarea.p-variant-filled { - background-color: ${dt('textarea.filled.background')}; -} - -.p-inputtextarea.p-variant-filled:enabled:focus { - background-color: ${dt('textarea.filled.focus.background')}; -} - -.p-inputtextarea:disabled { - opacity: 1; - background: ${dt('textarea.disabled.background')}; - color: ${dt('textarea.disabled.color')}; -} - -.p-inputtextarea::placeholder { - color: ${dt('textarea.placeholder.color')}; -} - -.p-fluid .p-inputtextarea { - width: 100%; -} - -.p-inputtextarea-resizable { - overflow: hidden; - resize: none; -} -` -}; diff --git a/components/lib/themes/primeone/base/tieredmenu/index.js b/components/lib/themes/primeone/base/tieredmenu/index.js deleted file mode 100644 index 837e78951..000000000 --- a/components/lib/themes/primeone/base/tieredmenu/index.js +++ /dev/null @@ -1,128 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-tieredmenu { - padding: 0.25rem 0.25rem; - background: ${dt('tieredmenu.background')}; - color: ${dt('tieredmenu.color')}; - border: 1px solid ${dt('tieredmenu.border.color')}; - border-radius: ${dt('rounded.base')}; - min-width: 12.5rem; -} - -.p-tieredmenu-root-list, -.p-tieredmenu-submenu { - margin: 0; - padding: 0; - list-style: none; - outline: 0 none; -} - -.p-tieredmenu-submenu { - position: absolute; - min-width: 100%; - z-index: 1; - padding: 0.25rem 0.25rem; - background: ${dt('tieredmenu.background')}; - color: ${dt('tieredmenu.color')}; - border: 1px solid ${dt('tieredmenu.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-tieredmenu-item { - position: relative; - margin: 2px 0; -} - -.p-tieredmenu-item:first-child { - margin-top: 0; -} - -.p-tieredmenu-item:last-child { - margin-bottom: 0; -} - -.p-tieredmenu-item-content { - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; - border-radius: ${dt('rounded.sm')}; - color: ${dt('tieredmenu.item.color')}; -} - -.p-tieredmenu-item-link { - cursor: pointer; - display: flex; - align-items: center; - text-decoration: none; - overflow: hidden; - position: relative; - color: inherit; - padding: 0.5rem 0.75rem; - user-select: none; -} - -.p-tieredmenu-item-label { - line-height: 1; -} - -.p-tieredmenu-item-icon { - color: ${dt('tieredmenu.item.icon.color')}; - margin-right: 0.5rem; -} - -.p-tieredmenu-submenu-icon { - color: ${dt('tieredmenu.item.icon.color')}; - margin-left: auto; - font-size: 0.875rem; - width: 0.875rem; - height: 0.875rem; -} - -.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content { - color: ${dt('tieredmenu.item.focus.color')}; - background: ${dt('tieredmenu.item.focus.background')}; -} - -.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon, -.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon { - color: ${dt('tieredmenu.item.icon.focus.color')}; -} - -.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover { - color: ${dt('tieredmenu.item.focus.color')}; - background: ${dt('tieredmenu.item.focus.background')}; -} - -.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon, -.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon { - color: ${dt('tieredmenu.item.icon.focus.color')}; -} - -.p-tieredmenu-item-active > .p-tieredmenu-item-content { - color: ${dt('tieredmenu.item.focus.color')}; - background: ${dt('tieredmenu.item.focus.background')}; -} - -.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon, -.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon { - color: ${dt('tieredmenu.item.icon.focus.color')}; -} - -.p-tieredmenu-separator { - border-top: 1px solid ${dt('tieredmenu.separator.border.color')}; - margin: 2px 0; -} - -.p-tieredmenu-overlay { - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-tieredmenu-enter-from, -.p-tieredmenu-leave-active { - opacity: 0; -} - -.p-tieredmenu-enter-active { - transition: opacity 250ms; -} -` -}; diff --git a/components/lib/themes/primeone/base/timeline/index.js b/components/lib/themes/primeone/base/timeline/index.js deleted file mode 100644 index 4bfa9acc6..000000000 --- a/components/lib/themes/primeone/base/timeline/index.js +++ /dev/null @@ -1,155 +0,0 @@ -export default { - css: ({ dt }) => ` -.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-vertical .p-timeline-event-opposite, -.p-timeline-vertical .p-timeline-event-content { - padding: 0 1rem; -} - -.p-timeline-vertical .p-timeline-event-connector { - width: 2px; -} - -.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: inline-flex; - align-items: center; - justify-content: center; - position: relative; - align-self: baseline; - border: 2px solid ${dt('timeline.marker.border.color')}; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background-color: ${dt('timeline.marker.background')}; -} - -.p-timeline-event-marker::before { - content: " "; - border-radius: 50%; - width: 0.375rem; - height: 0.375rem; - background: ${dt('timeline.marker.content.color')}; -} - -.p-timeline-event-marker::after { - content: " "; - position: absolute; - width: 100%; - height: 100%; - border-radius: 50%; - box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); -} - -.p-timeline-event-connector { - flex-grow: 1; - background-color: ${dt('timeline.connector.color')}; -} - -.p-timeline-horizontal { - flex-direction: row; -} - -.p-timeline-horizontal .p-timeline-event { - flex-direction: column; - flex: 1; -} - -.p-timeline-horizontal .p-timeline-event:last-child { - flex: 0; -} - -.p-timeline-horizontal .p-timeline-event-separator { - flex-direction: row; -} - -.p-timeline-horizontal .p-timeline-event-connector { - width: 100%; - height: 2px; -} - -.p-timeline-horizontal .p-timeline-event-opposite, -.p-timeline-horizontal .p-timeline-event-content { - padding: 1rem 0; -} - -.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { - flex-direction: column-reverse; -} - -.p-timeline-bottom .p-timeline-event { - flex-direction: column-reverse; -} -` -}; diff --git a/components/lib/themes/primeone/base/toast/index.js b/components/lib/themes/primeone/base/toast/index.js deleted file mode 100644 index 0b06e137e..000000000 --- a/components/lib/themes/primeone/base/toast/index.js +++ /dev/null @@ -1,219 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-toast { - width: 25rem; - white-space: pre-line; - word-break: break-word; -} - -.p-toast-message { - backdrop-filter: blur(${dt('toast.blur')}); - margin: 0 0 1rem 0; - border-radius: ${dt('rounded.base')}; -} - -.p-toast-message-icon { - flex-shrink: 0; - font-size: 1.125rem; - width: 1.125rem; - height: 1.125rem; -} - -.p-toast-message-content { - display: flex; - align-items: flex-start; - padding: 0.75rem; - gap: 0.5rem; -} - -.p-toast-message-text { - flex: 1 1 auto; -} - -.p-toast-summary { - font-weight: 500; -} -.p-toast-detail { - margin-top: 0.5rem; - font-size: 0.875rem; -} - -.p-toast-close-button { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - border-radius: 50%; - cursor: pointer; - background: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - color: inherit; - width: 1.75rem; - height: 1.75rem; - margin: -25% 0 0 0; - right: -25%; - padding: 0; - border: none; - user-select: none; -} - -.p-toast-close-button:focus-visible { - outline-width: ${dt('focus.ring.width')}; - outline-style: ${dt('focus.ring.style')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-toast-message-info { - background: ${dt('toast.info.background')}; - border: 1px solid ${dt('toast.info.border.color')}; - color: ${dt('toast.info.color')}; - box-shadow: ${dt('toast.info.box.shadow')}; -} - -.p-toast-message-info .p-toast-detail { - color: ${dt('toast.info.detail.color')}; -} - -.p-toast-message-info .p-toast-close-button:focus-visible { - color: ${dt('toast.info.color')}; -} - -.p-toast-message-info .p-toast-close-button:hover { - background: ${dt('toast.info.close.hover.background')}; -} - -.p-toast-message-success { - background: ${dt('toast.success.background')}; - border: 1px solid ${dt('toast.success.border.color')}; - color: ${dt('toast.success.color')}; - box-shadow: ${dt('toast.success.box.shadow')}; -} - -.p-toast-message-success .p-toast-detail { - color: ${dt('toast.success.detail.color')}; -} - -.p-toast-message-success .p-toast-close-button:focus-visible { - color: ${dt('toast.success.color')}; -} - -.p-toast-message-success .p-toast-close-button:hover { - background: ${dt('toast.success.close.hover.background')}; -} - -.p-toast-message-warn { - background: ${dt('toast.warn.background')}; - border: 1px solid ${dt('toast.warn.border.color')}; - color: ${dt('toast.warn.color')}; - box-shadow: ${dt('toast.warn.box.shadow')}; -} - -.p-toast-message-warn .p-toast-detail { - color: ${dt('toast.warn.detail.color')}; -} - -.p-toast-message-warn .p-toast-close-button:focus-visible { - color: ${dt('toast.warn.color')}; -} - -.p-toast-message-warn .p-toast-close-button:hover { - background: ${dt('toast.warn.close.hover.background')}; -} - -.p-toast-message-error { - background: ${dt('toast.error.background')}; - border: 1px solid ${dt('toast.error.border.color')}; - color: ${dt('toast.error.color')}; - box-shadow: ${dt('toast.error.box.shadow')}; -} - -.p-toast-message-error .p-toast-detail { - color: ${dt('toast.error.detail.color')}; -} - -.p-toast-message-error .p-toast-close-button:focus-visible { - color: ${dt('toast.error.color')}; -} - -.p-toast-message-error .p-toast-close-button:hover { - background: ${dt('toast.error.close.hover.background')}; -} - -.p-toast-message-secondary { - background: ${dt('toast.secondary.background')}; - border: 1px solid ${dt('toast.secondary.border.color')}; - color: ${dt('toast.secondary.color')}; - box-shadow: ${dt('toast.secondary.box.shadow')}; -} - -.p-toast-message-secondary .p-toast-detail { - color: ${dt('toast.secondary.detail.color')}; -} - -.p-toast-message-secondary .p-toast-close-button:focus-visible { - color: ${dt('toast.secondary.color')}; -} - -.p-toast-message-secondary .p-toast-close-button:hover { - background: ${dt('toast.secondary.close.hover.background')}; -} - -.p-toast-message-contrast { - background: ${dt('toast.contrast.background')}; - border: 1px solid ${dt('toast.contrast.border.color')}; - color: ${dt('toast.contrast.color')}; - box-shadow: ${dt('toast.contrast.box.shadow')}; -} - -.p-toast-message-contrast .p-toast-detail { - color: ${dt('toast.contrast.detail.color')}; -} - -.p-toast-message-contrast .p-toast-close-button:focus-visible { - color: ${dt('toast.contrast.color')}; -} - -.p-toast-message-contrast .p-toast-close-button:hover { - background: ${dt('toast.contrast.close.hover.background')}; -} - -.p-toast-top-center { - transform: translateX(-50%); -} - -.p-toast-bottom-center { - transform: translateX(-50%); -} - -.p-toast-center { - min-width: 20vw; - transform: translate(-50%, -50%); -} - -.p-toast-message-enter-from { - opacity: 0; - transform: translateY(50%); -} - -.p-toast-message-leave-from { - max-height: 1000px; -} - -.p-toast .p-toast-message.p-toast-message-leave-to { - max-height: 0; - opacity: 0; - margin-bottom: 0; - overflow: hidden; -} - -.p-toast-message-enter-active { - transition: transform 0.3s, opacity 0.3s; -} - -.p-toast-message-leave-active { - transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; -} -` -}; diff --git a/components/lib/themes/primeone/base/togglebutton/index.js b/components/lib/themes/primeone/base/togglebutton/index.js deleted file mode 100644 index 7588ccb8b..000000000 --- a/components/lib/themes/primeone/base/togglebutton/index.js +++ /dev/null @@ -1,87 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-togglebutton { - display: inline-flex; - cursor: pointer; - user-select: none; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - color: ${dt('togglebutton.color')}; - background: ${dt('togglebutton.background')}; - border: 1px solid ${dt('togglebutton.border.color')}; - padding: 0.5rem 1rem; - font-size: 1rem; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - gap: 0.5rem; - font-weight: 500; -} - -.p-togglebutton-label, -.p-togglebutton-icon { - position: relative; - transition: none; -} - -.p-togglebutton::before { - content: ""; - background: transparent; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - position: absolute; - left: 0.25rem; - top: 0.25rem; - width: calc(100% - 0.5rem); - height: calc(100% - 0.5rem); - border-radius: ${dt('rounded.sm')}; -} - -.p-togglebutton.p-togglebutton-checked::before { - background: ${dt('togglebutton.checked.background')}; - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); -} - -.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover { - color: ${dt('togglebutton.hover.color')}; -} - -.p-togglebutton.p-togglebutton-checked { - color: ${dt('togglebutton.checked.color')}; -} - -.p-togglebutton:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-togglebutton.p-invalid { - border-color: ${dt('togglebutton.invalid.border.color')}; -} - -.p-togglebutton:disabled { - opacity: 1; - cursor: default; - background: ${dt('togglebutton.disabled.background')}; - border-color: ${dt('togglebutton.disabled.border.color')}; - color: ${dt('togglebutton.disabled.color')}; -} - -.p-togglebutton-icon { - color: ${dt('togglebutton.icon.color')}; -} - -.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon { - color: ${dt('togglebutton.icon.hover.color')}; -} - -.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon { - color: ${dt('togglebutton.icon.checked.color')}; -} - -.p-togglebutton:disabled .p-togglebutton-icon { - color: ${dt('togglebutton.icon.disabled.color')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/toggleswitch/index.js b/components/lib/themes/primeone/base/toggleswitch/index.js deleted file mode 100644 index af73cdd29..000000000 --- a/components/lib/themes/primeone/base/toggleswitch/index.js +++ /dev/null @@ -1,90 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-toggleswitch { - display: inline-block; - width: 2.5rem; - height: 1.5rem; -} - -.p-toggleswitch-input { - cursor: pointer; - appearance: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - opacity: 0; - z-index: 1; - outline: 0 none; - border-radius: ${dt('toggleswitch.border.radius')}; -} - -.p-toggleswitch-slider { - position: absolute; - cursor: pointer; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 0 none; - background: ${dt('toggleswitch.background')}; - transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('toggleswitch.border.radius')}; - outline-color: transparent; -} - -.p-toggleswitch-slider:before { - position: absolute; - content: ""; - top: 50%; - background: ${dt('toggleswitch.handle.background')}; - width: 1rem; - height: 1rem; - left: 0.25rem; - margin-top: -0.5rem; - border-radius: ${dt('toggleswitch.handle.border.radius')}; - transition: all ${dt('transition.duration')}; -} - -.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider { - background: ${dt('toggleswitch.checked.background')}; -} - -.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before { - background: ${dt('toggleswitch.handle.checked.background')}; - left: 1.25rem; -} - -.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider { - background: ${dt('toggleswitch.hover.background')}; -} - -.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider:before { - background: ${dt('toggleswitch.handle.hover.background')}; -} - -.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider { - background: ${dt('toggleswitch.checked.hover.background')}; -} - -.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider:before { - background: ${dt('toggleswitch.handle.checked.hover.background')}; -} - -.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: ${dt('focus.ring.offset')}; -} - -.p-toggleswitch.p-invalid > .p-toggleswitch-slider { - background: ${dt('toggleswitch.invalid.background')}; -} - -.p-toggleswitch.p-invalid > .p-toggleswitch-slider:before { - background: ${dt('toggleswitch.handle.invalid.background')}; -} -` -}; diff --git a/components/lib/themes/primeone/base/toolbar/index.js b/components/lib/themes/primeone/base/toolbar/index.js deleted file mode 100644 index 12797336b..000000000 --- a/components/lib/themes/primeone/base/toolbar/index.js +++ /dev/null @@ -1,23 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-toolbar { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - padding: 0.75rem; - background: ${dt('toolbar.background')}; - border: 1px solid ${dt('toolbar.border.color')}; - color: ${dt('toolbar.color')}; - border-radius: ${dt('rounded.base')}; - gap: 0.5rem; -} - -.p-toolbar-start, -.p-toolbar-center, -.p-toolbar-end { - display: flex; - align-items: center; -} -` -}; diff --git a/components/lib/themes/primeone/base/tooltip/index.js b/components/lib/themes/primeone/base/tooltip/index.js deleted file mode 100644 index 6f790ba1d..000000000 --- a/components/lib/themes/primeone/base/tooltip/index.js +++ /dev/null @@ -1,62 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-tooltip { - position: absolute; - display: none; - max-width: 12.5rem; -} - -.p-tooltip-right, -.p-tooltip-left { - padding: 0 0.25rem; -} - -.p-tooltip-top, -.p-tooltip-bottom { - padding: 0.25rem 0; -} - -.p-tooltip-text { - white-space: pre-line; - word-break: break-word; - background: ${dt('tooltip.background')}; - color: ${dt('tooltip.color')}; - padding: 0.5rem 0.75rem; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - border-radius: 6px; -} - -.p-tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - scale: 2; -} - -.p-tooltip-right .p-tooltip-arrow { - margin-top: -0.25rem; - border-width: 0.25em 0.25em 0.25em 0; - border-right-color: ${dt('tooltip.background')}; -} - -.p-tooltip-left .p-tooltip-arrow { - margin-top: -0.25rem; - border-width: 0.25em 0 0.25em 0.25rem; - border-left-color: ${dt('tooltip.background')}; -} - -.p-tooltip-top .p-tooltip-arrow { - margin-left: -0.25rem; - border-width: 0.25em 0.25em 0; - border-top-color: ${dt('tooltip.background')}; - border-bottom-color: ${dt('tooltip.background')}; -} - -.p-tooltip-bottom .p-tooltip-arrow { - margin-left: -0.25rem; - border-width: 0 0.25em 0.25rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/tree/index.js b/components/lib/themes/primeone/base/tree/index.js deleted file mode 100644 index ebf0c2407..000000000 --- a/components/lib/themes/primeone/base/tree/index.js +++ /dev/null @@ -1,180 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-tree { - background: ${dt('tree.background')}; - color: ${dt('tree.color')}; - border-radius: ${dt('rounded.base')}; - border: 0 none; - padding: 1rem; -} - -.p-tree-root-children { - margin: 0; - padding: 0; - list-style-type: none; - overflow: auto; -} - -.p-tree-node { - padding: 0 0; - outline: 0 none; - margin: 2px 0; -} - -.p-tree-root-children > .p-tree-node:first-child { - margin-top: 0; -} - -.p-tree-root-children > .p-tree-node:last-child { - margin-bottom: 0; -} - -.p-tree-node-content { - border-radius: ${dt('rounded.base')}; - padding: 0.25rem 0.5rem; - display: flex; - align-items: center; - outline-color: transparent; - color: ${dt('tree.node.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-tree-node:focus-visible > .p-tree-node-content { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: -2px; -} - -.p-tree-node-content.p-tree-node-selected { - background: ${dt('highlight.background')}; - color: ${dt('highlight.color')}; -} - -.p-tree-node-toggle-button { - cursor: pointer; - user-select: none; - display: inline-flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - flex-shrink: 0; - margin: 0 0.5rem 0 0; - width: 1.75rem; - height: 1.75rem; - color: ${dt('tree.toggle.color')}; - border: 0 none; - background: transparent; - border-radius: 50%; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - padding: 0; -} - -.p-tree-node-toggle-button:enabled:hover { - background: ${dt('tree.toggle.hover.background')}; - color: ${dt('tree.toggle.hover.color')}; -} - -.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button, -.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-icon { - color: inherit; -} - -.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover { - background: ${dt('tree.toggle.highlight.hover.background')}; -} - -.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover { - background: ${dt('tree.node.hover.background')}; - color: ${dt('tree.node.hover.color')}; -} - -.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-toggle-button { - color: ${dt('tree.toggle.hover.color')}; -} - -.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon { - color: ${dt('tree.icon.hover.color')}; -} - -.p-tree-node-children { - margin: 0; - padding: 0; - list-style-type: none; - padding: 0 0 0 1rem; -} - -.p-tree-root { - overflow: auto; -} - -.p-tree-node-selectable { - cursor: pointer; - user-select: none; -} - -.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button { - visibility: hidden; -} - -.p-tree-node-icon { - margin-right: 0.5rem; - color: ${dt('tree.icon.color')}; - transition: color ${dt('transition.duration')}; -} - -.p-tree-node-content .p-checkbox { - margin-right: 0.5rem; -} - -.p-tree-filter-input { - width: 100%; - padding-right: 1.75rem; -} - -.p-tree-filter-container { - position: relative; - display: block; - width: 100%; - margin-bottom: 0.5rem; -} - -.p-tree-filter-icon { - position: absolute; - top: 50%; - margin-top: -0.5rem; - right: 0.75rem; - color: ${dt('tree.filter.icon.color')}; -} - -.p-tree-loading { - position: relative; - min-height: 4rem; -} - -.p-tree-loading-icon { - font-size: 2rem; - width: 2rem; - height: 2rem; -} - -.p-tree-mask { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; -} - -.p-tree-flex-scrollable { - display: flex; - flex: 1; - height: 100%; - flex-direction: column; -} - -.p-tree-flex-scrollable .p-tree-root { - flex: 1; -} -` -}; diff --git a/components/lib/themes/primeone/base/treeselect/index.js b/components/lib/themes/primeone/base/treeselect/index.js deleted file mode 100644 index d2014667c..000000000 --- a/components/lib/themes/primeone/base/treeselect/index.js +++ /dev/null @@ -1,115 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-treeselect { - display: inline-flex; - cursor: pointer; - position: relative; - user-select: none; - background: ${dt('treeselect.background')}; - border: 1px solid ${dt('treeselect.border.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - border-radius: ${dt('rounded.base')}; - outline-color: transparent; - box-shadow: ${dt('treeselect.box.shadow')}; -} - -.p-treeselect:not(.p-disabled):hover { - border-color: ${dt('treeselect.hover.border.color')}; -} - -.p-treeselect:not(.p-disabled).p-focus { - border-color: ${dt('treeselect.focus.border.color')}; - outline: 0 none; -} - -.p-treeselect.p-variant-filled { - background: ${dt('treeselect.filled.background')}; -} - -.p-treeselect.p-variant-filled.p-focus { - background: ${dt('treeselect.filled.focus.background')}; -} - -.p-treeselect.p-invalid { - border-color: ${dt('treeselect.invalid.border.color')}; -} - -.p-treeselect.p-disabled { - opacity: 1; - background: ${dt('treeselect.disabled.background')}; -} - -.p-treeselect-dropdown { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - background: transparent; - color: ${dt('treeselect.toggle.color')}; - width: 2.5rem; - border-top-right-radius: ${dt('rounded.base')}; - border-bottom-right-radius: ${dt('rounded.base')}; -} - -.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; - padding: 0.5rem 0.75rem; - color: ${dt('treeselect.color')}; -} - -.p-treeselect-label.p-placeholder { - color: ${dt('treeselect.placeholder.color')}; -} - -.p-treeselect.p-disabled .p-treeselect-label { - color: ${dt('treeselect.disabled.color')}; -} - -.p-inputwrapper-filled.p-treeselect.p-treeselect-display-chip .p-treeselect-label { - padding: 0.25rem 0.25rem; -} - -.p-treeselect-label-empty { - overflow: hidden; - visibility: hidden; -} - -.p-treeselect .p-treeselect-overlay { - min-width: 100%; -} - -.p-treeselect-overlay { - position: absolute; - top: 0; - left: 0; - background: ${dt('treeselect.overlay.background')}; - color: ${dt('treeselect.overlay.color')}; - border: 1px solid ${dt('treeselect.overlay.border.color')}; - border-radius: ${dt('rounded.base')}; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); -} - -.p-treeselect-empty-message { - padding: 0.5rem 0.75rem; - background: transparent; -} - -.p-fluid .p-treeselect { - display: flex; -} - -.p-treeselect-overlay .p-tree { - padding: 0.25rem 0.25rem; -} -` -}; diff --git a/components/lib/themes/primeone/base/treeselect/package.json b/components/lib/themes/primeone/base/treeselect/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/base/treeselect/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/base/treetable/index.js b/components/lib/themes/primeone/base/treetable/index.js deleted file mode 100644 index 36d03bb21..000000000 --- a/components/lib/themes/primeone/base/treetable/index.js +++ /dev/null @@ -1,446 +0,0 @@ -export default { - css: ({ dt }) => ` -.p-treetable { - position: relative; -} - -.p-treetable-table { - border-spacing: 0px; - width: 100%; -} - -.p-treetable-sortable-column { - cursor: pointer; - user-select: none; - outline-color: transparent; -} - -.p-treetable-column-title, -.p-treetable-sort-icon, -.p-treetable-sort-badge { - vertical-align: middle; -} - -.p-treetable-sort-icon { - color: ${dt('treetable.sort.icon.color')}; - margin-left: 0.5rem; - transition: color ${dt('transition.duration')}; -} - -.p-treetable-sort-badge { - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 50%; - height: 1rem; - min-width: 1rem; - line-height: 1rem; - margin-left: 0.5rem; -} - -.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover { - background: ${dt('treetable.header.cell.hover.background')}; - color: ${dt('treetable.header.cell.hover.color')}; -} - -.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon { - color: ${dt('treetable.sort.icon.hover.color')}; -} - -.p-treetable-column-sorted { - background: ${dt('highlight.background')}; - color: ${dt('highlight.color')}; -} - -.p-treetable-sortable-column:focus-visible { - outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; - outline-offset: -1px; -} - -.p-treetable-column-sorted .p-treetable-sort-icon { - color: ${dt('highlight.color')}; -} - -.p-treetable-hoverable .p-treetable-selectable-row { - cursor: pointer; -} - -.p-treetable-scrollable > .p-treetable-table-container { - position: relative; -} - -.p-treetable-scrollable-table > .p-treetable-thead { - top: 0; - z-index: 1; -} - -.p-treetable-scrollable-table > .p-treetable-frozen-tbody { - position: sticky; - z-index: 1; -} - -.p-treetable-scrollable-table>.p-treetable-tfoot { - bottom: 0; - z-index: 1; -} - -.p-treetable-scrollable .p-treetable-frozen-column { - position: sticky; - background: inherit; -} - -.p-treetable-scrollable th.p-treetable-frozen-column { - z-index: 1; -} - -.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead, -.p-treetable-scrollable > .p-treetable-table-container > .p-virtualscroller > .p-treetable-table > .p-treetable-thead { - background: ${dt('treetable.header.cell.background')}; -} - -.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot, -.p-treetable-scrollable > .p-treetable-table-container > .p-virtualscroller > .p-treetable-table > .p-treetable-tfoot { - background: ${dt('treetable.footer.cell.background')}; -} - -.p-treetable-flex-scrollable { - display: flex; - flex-direction: column; - height: 100%; -} - -.p-treetable-flex-scrollable>.p-treetable-table-container { - display: flex; - flex-direction: column; - flex: 1; - height: 100%; -} - -.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header { - position: sticky; - z-index: 1; -} - -/* Resizable */ -.p-treetable-resizable-table > .p-treetable-thead > tr > th, -.p-treetable-resizable-table > .p-treetable-tfoot > tr > td, -.p-treetable-resizable-table > .p-treetable-tbody > tr > td { - overflow: hidden; - white-space: nowrap; -} - -.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) { - background-clip: padding-box; - position: relative; -} - -.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer { - display: none; -} - -.p-treetable-column-resizer { - display: block; - position: absolute; - top: 0; - right: 0; - margin: 0; - width: 0.5rem; - height: 100%; - padding: 0px; - cursor: col-resize; - border: 1px solid transparent; -} - -.p-treetable-column-header-content { - display: flex; - align-items: center; -} - -.p-treetable-column-resize-indicator { - width: 1px; - position: absolute; - z-index: 10; - display: none; - background: ${dt('treetable.resizer.color')}; -} - -.p-treetable-row-reorder-indicator-up, -.p-treetable-row-reorder-indicator-down { - position: absolute; - display: none; -} - -.p-treetable-reorderable-column, -.p-treetable-reorderable-row-handle { - cursor: move; -} - -.p-treetable-mask { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - z-index: 2; -} - -.p-treetable-virtualscroller-spacer { - display: flex; -} - -.p-treetable .p-virtualscroller .p-virtualscroller-loading { - transform: none !important; - min-height: 0; - position: sticky; - top: 0; - left: 0; -} - -.p-treetable-paginator-top { - border: solid ${dt('treetable.header.border.color')}; - border-width: 0 0 1px 0; -} - -.p-treetable-header { - background: ${dt('treetable.header.background')}; - color: ${dt('treetable.header.color')}; - border: 1px solid ${dt('treetable.header.border.color')}; - border-width: 0 0 1px 0; - padding: 0.75rem 1rem; - font-weight: 600; -} - -.p-treetable-footer { - background: ${dt('treetable.footer.background')}; - color: ${dt('treetable.footer.color')}; - border: 1px solid ${dt('treetable.footer.border.color')}; - border-width: 0 0 1px 0; - padding: 0.75rem 1rem; - font-weight: 600; -} - -.p-treetable-thead > tr > th { - text-align: left; - padding: 0.75rem 1rem; - background: ${dt('treetable.header.cell.background')}; - border: 1px solid ${dt('treetable.header.cell.border.color')}; - border-width: 0 0 1px 0; - color: ${dt('treetable.header.cell.color')}; - font-weight: 600; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-treetable-tbody > tr { - outline-color: transparent; - background: ${dt('treetable.row.background')}; - color: ${dt('treetable.row.color')}; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; -} - -.p-treetable-tbody > tr > td { - text-align: left; - border: 1px solid ${dt('treetable.body.cell.border.color')}; - border-width: 0 0 1px 0; - padding: 0.75rem 1rem; -} - -.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover { - background: ${dt('treetable.row.hover.background')}; - color: ${dt('treetable.row.hover.color')}; -} - -.p-treetable-tbody > tr.p-treetable-row-selected { - background: ${dt('highlight.background')}; - color: ${dt('highlight.color')}; -} - -.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td { - border-bottom-color: ${dt('treetable.body.cell.selected.border.color')}; -} - -.p-treetable-tbody > tr.p-treetable-row-selectedt > td { - border-bottom-color: ${dt('treetable.body.cell.selected.border.color')}; -} - -.p-treetable-tbody > tr:focus-visible { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: -1px; -} - -.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: -1px; -} - -.p-treetable-tfoot > tr > td { - text-align: left; - padding: 0.75rem 1rem; - border: 1px solid ${dt('treetable.footer.cell.border.color')}; - border-width: 0 0 1px 0; - font-weight: 600; - color: ${dt('treetable.footer.cell.color')}; - background: ${dt('treetable.footer.cell.background')}; -} - -.p-treetable-loading-icon { - font-size: 2rem; - width: 2rem; - height: 2rem; -} - -.p-treetable-gridlines .p-treetable-header { - border-width: 1px; -} - -.p-treetable-gridlines .p-treetable-footer { - border-width: 0 1px 1px 1px; -} - -.p-treetable-gridlines .p-treetable-paginator-top { - border-width: 0 1px 0 1px; -} - -.p-treetable-gridlines .p-treetable-paginator-bottom { - border-width: 0 1px 1px 1px; - border-style: solid; - border-color: ${dt('treetable.footer.border.color')}; -} - -.p-treetable-gridlines .p-treetable-thead > tr > th { - border-width: 1px 0 1px 1px; -} - -.p-treetable-gridlines .p-treetable-thead > tr > th:last-child { - border-width: 1px; -} - -.p-treetable-gridlines .p-treetable-tbody > tr > td { - border-width: 1px 0 0 1px; -} - -.p-treetable-gridlines .p-treetable-tbody > tr > td:last-child { - border-width: 1px 1px 0 1px; -} - -p-treetable-gridlines .p-treetable-tbody > tr:last-child>td { - border-width: 1px 0 1px 1px; -} - -.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td:last-child { - border-width: 1px; -} - -.p-treetable-gridlines .p-treetable-tfoot>tr>td { - border-width: 1px 0 1px 1px; -} - -.p-treetable-gridlines .p-treetable-tfoot > tr > td:last-child { - border-width: 1px 1px 1px 1px; -} - -.p-treetable.p-treetable-gridlines .p-treetable-thead +.p-treetable-tfoot > tr > td { - border-width: 0 0 1px 1px; -} - -.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td:last-child { - border-width: 0 1px 1px 1px; -} - -.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td { - border-width: 0 0 1px 1px; -} - -.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td:last-child { - border-width: 0 1px 1px 1px; -} - -.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td { - border-width: 0 0 0 1px; -} - -.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td:last-child { - border-width: 0 1px 0 1px; -} - -.p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd { - background: ${dt('treetable.row.striped.background')}); -} - -.p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight { - background: ${dt('highlight.background')}); - color: ${dt('highlight.color')}); -} - -.p-treetable.p-treetable-sm .p-treetable-header { - padding: 0.375rem 0.5rem; -} - -.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { - padding: 0.375rem 0.5rem; -} - -.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { - padding: 0.375rem 0.5rem; -} - -.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { - padding: 0.375rem 0.5rem; -} - -.p-treetable.p-treetable-sm .p-treetable-footer { - padding: 0.375rem 0.5rem; -} - -.p-treetable.p-treetable-lg .p-treetable-header { - padding: 0.9375rem 1.25rem; -} - -.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { - padding: 0.9375rem 1.25rem; -} - -.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td { - padding: 0.9375rem 1.25rem; -} - -.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td { - padding: 0.9375rem 1.25rem; -} - -.p-treetable.p-treetable-lg .p-treetable-footer { - padding: 0.9375rem 1.25rem; -} - -.p-treetable-row-toggle-button { - display: inline-flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - width: 1.75rem; - height: 1.75rem; - color: ${dt('treetable.row.action.color')}; - border: 0 none; - background: transparent; - cursor: pointer; - border-radius: 50%; - transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; - user-select: none; -} - -.p-treetable-row-toggle-button:enabled:hover { - color: ${dt('treetable.row.action.hover.color')}; - background: ${dt('treetable.row.action.hover.background')}; -} - -.p-treetable-row-toggle-button:focus-visible { - outline: 1px solid ${dt('focus.ring.color')}; - outline-offset: 2px; -} - -.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-row-toggle-button:hover{ - background: ${dt('treetable.row.action.highlight.hover.background')}; - color: inherit; -} -` -}; diff --git a/components/lib/themes/primeone/base/treetable/package.json b/components/lib/themes/primeone/base/treetable/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/base/treetable/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/index.js b/components/lib/themes/primeone/index.js deleted file mode 100644 index 70a7315ca..000000000 --- a/components/lib/themes/primeone/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'primevue/themes/primeone/base'; diff --git a/components/lib/themes/primeone/package.json b/components/lib/themes/primeone/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/accordion/package.json b/components/lib/themes/primeone/presets/aura/accordion/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/accordion/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/autocomplete/package.json b/components/lib/themes/primeone/presets/aura/autocomplete/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/autocomplete/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/avatar/package.json b/components/lib/themes/primeone/presets/aura/avatar/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/avatar/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/badge/package.json b/components/lib/themes/primeone/presets/aura/badge/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/badge/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/blockui/package.json b/components/lib/themes/primeone/presets/aura/blockui/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/blockui/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/breadcrumb/package.json b/components/lib/themes/primeone/presets/aura/breadcrumb/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/breadcrumb/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/button/package.json b/components/lib/themes/primeone/presets/aura/button/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/button/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/buttongroup/package.json b/components/lib/themes/primeone/presets/aura/buttongroup/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/buttongroup/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/card/package.json b/components/lib/themes/primeone/presets/aura/card/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/card/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/carousel/package.json b/components/lib/themes/primeone/presets/aura/carousel/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/carousel/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/cascadeselect/package.json b/components/lib/themes/primeone/presets/aura/cascadeselect/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/cascadeselect/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/checkbox/package.json b/components/lib/themes/primeone/presets/aura/checkbox/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/checkbox/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/chip/package.json b/components/lib/themes/primeone/presets/aura/chip/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/chip/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/colorpicker/package.json b/components/lib/themes/primeone/presets/aura/colorpicker/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/colorpicker/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/confirmdialog/package.json b/components/lib/themes/primeone/presets/aura/confirmdialog/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/confirmdialog/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/confirmpopup/package.json b/components/lib/themes/primeone/presets/aura/confirmpopup/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/confirmpopup/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/contextmenu/package.json b/components/lib/themes/primeone/presets/aura/contextmenu/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/contextmenu/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/datatable/package.json b/components/lib/themes/primeone/presets/aura/datatable/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/datatable/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/dataview/package.json b/components/lib/themes/primeone/presets/aura/dataview/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/dataview/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/datepicker/package.json b/components/lib/themes/primeone/presets/aura/datepicker/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/datepicker/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/dialog/package.json b/components/lib/themes/primeone/presets/aura/dialog/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/dialog/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/divider/package.json b/components/lib/themes/primeone/presets/aura/divider/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/divider/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/dock/package.json b/components/lib/themes/primeone/presets/aura/dock/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/dock/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/drawer/package.json b/components/lib/themes/primeone/presets/aura/drawer/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/drawer/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/editor/package.json b/components/lib/themes/primeone/presets/aura/editor/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/editor/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/fieldset/package.json b/components/lib/themes/primeone/presets/aura/fieldset/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/fieldset/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/fileupload/package.json b/components/lib/themes/primeone/presets/aura/fileupload/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/fileupload/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/floatlabel/package.json b/components/lib/themes/primeone/presets/aura/floatlabel/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/floatlabel/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/galleria/package.json b/components/lib/themes/primeone/presets/aura/galleria/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/galleria/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/iconfield/package.json b/components/lib/themes/primeone/presets/aura/iconfield/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/iconfield/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/image/package.json b/components/lib/themes/primeone/presets/aura/image/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/image/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/inlinemessage/package.json b/components/lib/themes/primeone/presets/aura/inlinemessage/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/inlinemessage/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/inplace/package.json b/components/lib/themes/primeone/presets/aura/inplace/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/inplace/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/inputchips/package.json b/components/lib/themes/primeone/presets/aura/inputchips/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/inputchips/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/inputgroup/package.json b/components/lib/themes/primeone/presets/aura/inputgroup/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/inputgroup/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/inputnumber/package.json b/components/lib/themes/primeone/presets/aura/inputnumber/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/inputnumber/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/inputotp/package.json b/components/lib/themes/primeone/presets/aura/inputotp/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/inputotp/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/inputtext/package.json b/components/lib/themes/primeone/presets/aura/inputtext/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/inputtext/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/knob/package.json b/components/lib/themes/primeone/presets/aura/knob/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/knob/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/listbox/package.json b/components/lib/themes/primeone/presets/aura/listbox/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/listbox/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/megamenu/package.json b/components/lib/themes/primeone/presets/aura/megamenu/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/megamenu/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/menu/package.json b/components/lib/themes/primeone/presets/aura/menu/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/menu/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/menubar/package.json b/components/lib/themes/primeone/presets/aura/menubar/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/menubar/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/message/package.json b/components/lib/themes/primeone/presets/aura/message/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/message/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/metergroup/package.json b/components/lib/themes/primeone/presets/aura/metergroup/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/metergroup/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/multiselect/package.json b/components/lib/themes/primeone/presets/aura/multiselect/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/multiselect/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/orderlist/package.json b/components/lib/themes/primeone/presets/aura/orderlist/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/orderlist/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/organizationchart/package.json b/components/lib/themes/primeone/presets/aura/organizationchart/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/organizationchart/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/package.json b/components/lib/themes/primeone/presets/aura/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/paginator/package.json b/components/lib/themes/primeone/presets/aura/paginator/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/paginator/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/panel/package.json b/components/lib/themes/primeone/presets/aura/panel/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/panel/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/panelmenu/package.json b/components/lib/themes/primeone/presets/aura/panelmenu/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/panelmenu/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/password/package.json b/components/lib/themes/primeone/presets/aura/password/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/password/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/picklist/package.json b/components/lib/themes/primeone/presets/aura/picklist/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/picklist/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/popover/package.json b/components/lib/themes/primeone/presets/aura/popover/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/popover/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/progressbar/package.json b/components/lib/themes/primeone/presets/aura/progressbar/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/progressbar/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/progressspinner/package.json b/components/lib/themes/primeone/presets/aura/progressspinner/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/progressspinner/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/radiobutton/package.json b/components/lib/themes/primeone/presets/aura/radiobutton/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/radiobutton/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/rating/package.json b/components/lib/themes/primeone/presets/aura/rating/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/rating/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/scrollpanel/package.json b/components/lib/themes/primeone/presets/aura/scrollpanel/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/scrollpanel/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/scrolltop/package.json b/components/lib/themes/primeone/presets/aura/scrolltop/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/scrolltop/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/select/package.json b/components/lib/themes/primeone/presets/aura/select/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/select/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/selectbutton/package.json b/components/lib/themes/primeone/presets/aura/selectbutton/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/selectbutton/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/skeleton/package.json b/components/lib/themes/primeone/presets/aura/skeleton/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/skeleton/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/slider/package.json b/components/lib/themes/primeone/presets/aura/slider/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/slider/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/speeddial/package.json b/components/lib/themes/primeone/presets/aura/speeddial/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/speeddial/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/splitbutton/package.json b/components/lib/themes/primeone/presets/aura/splitbutton/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/splitbutton/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/splitter/package.json b/components/lib/themes/primeone/presets/aura/splitter/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/splitter/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/stepper/package.json b/components/lib/themes/primeone/presets/aura/stepper/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/stepper/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/steps/package.json b/components/lib/themes/primeone/presets/aura/steps/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/steps/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/tabmenu/package.json b/components/lib/themes/primeone/presets/aura/tabmenu/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/tabmenu/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/tabs/package.json b/components/lib/themes/primeone/presets/aura/tabs/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/tabs/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/tabview/package.json b/components/lib/themes/primeone/presets/aura/tabview/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/tabview/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/tag/package.json b/components/lib/themes/primeone/presets/aura/tag/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/tag/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/terminal/package.json b/components/lib/themes/primeone/presets/aura/terminal/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/terminal/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/textarea/package.json b/components/lib/themes/primeone/presets/aura/textarea/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/textarea/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/tieredmenu/package.json b/components/lib/themes/primeone/presets/aura/tieredmenu/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/tieredmenu/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/timeline/package.json b/components/lib/themes/primeone/presets/aura/timeline/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/timeline/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/toast/package.json b/components/lib/themes/primeone/presets/aura/toast/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/toast/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/togglebutton/package.json b/components/lib/themes/primeone/presets/aura/togglebutton/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/togglebutton/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/toggleswitch/package.json b/components/lib/themes/primeone/presets/aura/toggleswitch/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/toggleswitch/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/toolbar/package.json b/components/lib/themes/primeone/presets/aura/toolbar/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/toolbar/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/tooltip/package.json b/components/lib/themes/primeone/presets/aura/tooltip/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/tooltip/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/tree/package.json b/components/lib/themes/primeone/presets/aura/tree/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/tree/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/treeselect/package.json b/components/lib/themes/primeone/presets/aura/treeselect/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/treeselect/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/aura/treetable/package.json b/components/lib/themes/primeone/presets/aura/treetable/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/aura/treetable/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/themes/primeone/presets/package.json b/components/lib/themes/primeone/presets/package.json deleted file mode 100644 index f8e9d7ae0..000000000 --- a/components/lib/themes/primeone/presets/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./index.cjs.js", - "module": "./index.esm.js", - "unpkg": "./index.min.js", - "types": "./index.d.ts" -} diff --git a/components/lib/tieredmenu/style/TieredMenuStyle.js b/components/lib/tieredmenu/style/TieredMenuStyle.js index 26a235bec..363a0c946 100644 --- a/components/lib/tieredmenu/style/TieredMenuStyle.js +++ b/components/lib/tieredmenu/style/TieredMenuStyle.js @@ -1,5 +1,132 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-tieredmenu { + padding: 0.25rem 0.25rem; + background: ${dt('tieredmenu.background')}; + color: ${dt('tieredmenu.color')}; + border: 1px solid ${dt('tieredmenu.border.color')}; + border-radius: ${dt('rounded.base')}; + min-width: 12.5rem; +} + +.p-tieredmenu-root-list, +.p-tieredmenu-submenu { + margin: 0; + padding: 0; + list-style: none; + outline: 0 none; +} + +.p-tieredmenu-submenu { + position: absolute; + min-width: 100%; + z-index: 1; + padding: 0.25rem 0.25rem; + background: ${dt('tieredmenu.background')}; + color: ${dt('tieredmenu.color')}; + border: 1px solid ${dt('tieredmenu.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-tieredmenu-item { + position: relative; + margin: 2px 0; +} + +.p-tieredmenu-item:first-child { + margin-top: 0; +} + +.p-tieredmenu-item:last-child { + margin-bottom: 0; +} + +.p-tieredmenu-item-content { + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; + border-radius: ${dt('rounded.sm')}; + color: ${dt('tieredmenu.item.color')}; +} + +.p-tieredmenu-item-link { + cursor: pointer; + display: flex; + align-items: center; + text-decoration: none; + overflow: hidden; + position: relative; + color: inherit; + padding: 0.5rem 0.75rem; + user-select: none; +} + +.p-tieredmenu-item-label { + line-height: 1; +} + +.p-tieredmenu-item-icon { + color: ${dt('tieredmenu.item.icon.color')}; + margin-right: 0.5rem; +} + +.p-tieredmenu-submenu-icon { + color: ${dt('tieredmenu.item.icon.color')}; + margin-left: auto; + font-size: 0.875rem; + width: 0.875rem; + height: 0.875rem; +} + +.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content { + color: ${dt('tieredmenu.item.focus.color')}; + background: ${dt('tieredmenu.item.focus.background')}; +} + +.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon, +.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon { + color: ${dt('tieredmenu.item.icon.focus.color')}; +} + +.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover { + color: ${dt('tieredmenu.item.focus.color')}; + background: ${dt('tieredmenu.item.focus.background')}; +} + +.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon, +.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon { + color: ${dt('tieredmenu.item.icon.focus.color')}; +} + +.p-tieredmenu-item-active > .p-tieredmenu-item-content { + color: ${dt('tieredmenu.item.focus.color')}; + background: ${dt('tieredmenu.item.focus.background')}; +} + +.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon, +.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon { + color: ${dt('tieredmenu.item.icon.focus.color')}; +} + +.p-tieredmenu-separator { + border-top: 1px solid ${dt('tieredmenu.separator.border.color')}; + margin: 2px 0; +} + +.p-tieredmenu-overlay { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-tieredmenu-enter-from, +.p-tieredmenu-leave-active { + opacity: 0; +} + +.p-tieredmenu-enter-active { + transition: opacity 250ms; +} +`; + const inlineStyles = { submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' }) }; @@ -34,6 +161,7 @@ const classes = { export default BaseStyle.extend({ name: 'tieredmenu', + theme, classes, inlineStyles }); diff --git a/components/lib/timeline/style/TimelineStyle.js b/components/lib/timeline/style/TimelineStyle.js index b297e6536..d4995e70c 100644 --- a/components/lib/timeline/style/TimelineStyle.js +++ b/components/lib/timeline/style/TimelineStyle.js @@ -1,5 +1,159 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.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-vertical .p-timeline-event-opposite, +.p-timeline-vertical .p-timeline-event-content { + padding: 0 1rem; +} + +.p-timeline-vertical .p-timeline-event-connector { + width: 2px; +} + +.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: inline-flex; + align-items: center; + justify-content: center; + position: relative; + align-self: baseline; + border: 2px solid ${dt('timeline.marker.border.color')}; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background-color: ${dt('timeline.marker.background')}; +} + +.p-timeline-event-marker::before { + content: " "; + border-radius: 50%; + width: 0.375rem; + height: 0.375rem; + background: ${dt('timeline.marker.content.color')}; +} + +.p-timeline-event-marker::after { + content: " "; + position: absolute; + width: 100%; + height: 100%; + border-radius: 50%; + box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12); +} + +.p-timeline-event-connector { + flex-grow: 1; + background-color: ${dt('timeline.connector.color')}; +} + +.p-timeline-horizontal { + flex-direction: row; +} + +.p-timeline-horizontal .p-timeline-event { + flex-direction: column; + flex: 1; +} + +.p-timeline-horizontal .p-timeline-event:last-child { + flex: 0; +} + +.p-timeline-horizontal .p-timeline-event-separator { + flex-direction: row; +} + +.p-timeline-horizontal .p-timeline-event-connector { + width: 100%; + height: 2px; +} + +.p-timeline-horizontal .p-timeline-event-opposite, +.p-timeline-horizontal .p-timeline-event-content { + padding: 1rem 0; +} + +.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) { + flex-direction: column-reverse; +} + +.p-timeline-bottom .p-timeline-event { + flex-direction: column-reverse; +} +`; + const classes = { root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout], event: 'p-timeline-event', @@ -12,5 +166,6 @@ const classes = { export default BaseStyle.extend({ name: 'timeline', + theme, classes }); diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js index 09cc6083b..581bb2465 100644 --- a/components/lib/toast/style/ToastStyle.js +++ b/components/lib/toast/style/ToastStyle.js @@ -1,5 +1,223 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-toast { + width: 25rem; + white-space: pre-line; + word-break: break-word; +} + +.p-toast-message { + backdrop-filter: blur(${dt('toast.blur')}); + margin: 0 0 1rem 0; + border-radius: ${dt('rounded.base')}; +} + +.p-toast-message-icon { + flex-shrink: 0; + font-size: 1.125rem; + width: 1.125rem; + height: 1.125rem; +} + +.p-toast-message-content { + display: flex; + align-items: flex-start; + padding: 0.75rem; + gap: 0.5rem; +} + +.p-toast-message-text { + flex: 1 1 auto; +} + +.p-toast-summary { + font-weight: 500; +} +.p-toast-detail { + margin-top: 0.5rem; + font-size: 0.875rem; +} + +.p-toast-close-button { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + border-radius: 50%; + cursor: pointer; + background: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + color: inherit; + width: 1.75rem; + height: 1.75rem; + margin: -25% 0 0 0; + right: -25%; + padding: 0; + border: none; + user-select: none; +} + +.p-toast-close-button:focus-visible { + outline-width: ${dt('focus.ring.width')}; + outline-style: ${dt('focus.ring.style')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-toast-message-info { + background: ${dt('toast.info.background')}; + border: 1px solid ${dt('toast.info.border.color')}; + color: ${dt('toast.info.color')}; + box-shadow: ${dt('toast.info.box.shadow')}; +} + +.p-toast-message-info .p-toast-detail { + color: ${dt('toast.info.detail.color')}; +} + +.p-toast-message-info .p-toast-close-button:focus-visible { + color: ${dt('toast.info.color')}; +} + +.p-toast-message-info .p-toast-close-button:hover { + background: ${dt('toast.info.close.hover.background')}; +} + +.p-toast-message-success { + background: ${dt('toast.success.background')}; + border: 1px solid ${dt('toast.success.border.color')}; + color: ${dt('toast.success.color')}; + box-shadow: ${dt('toast.success.box.shadow')}; +} + +.p-toast-message-success .p-toast-detail { + color: ${dt('toast.success.detail.color')}; +} + +.p-toast-message-success .p-toast-close-button:focus-visible { + color: ${dt('toast.success.color')}; +} + +.p-toast-message-success .p-toast-close-button:hover { + background: ${dt('toast.success.close.hover.background')}; +} + +.p-toast-message-warn { + background: ${dt('toast.warn.background')}; + border: 1px solid ${dt('toast.warn.border.color')}; + color: ${dt('toast.warn.color')}; + box-shadow: ${dt('toast.warn.box.shadow')}; +} + +.p-toast-message-warn .p-toast-detail { + color: ${dt('toast.warn.detail.color')}; +} + +.p-toast-message-warn .p-toast-close-button:focus-visible { + color: ${dt('toast.warn.color')}; +} + +.p-toast-message-warn .p-toast-close-button:hover { + background: ${dt('toast.warn.close.hover.background')}; +} + +.p-toast-message-error { + background: ${dt('toast.error.background')}; + border: 1px solid ${dt('toast.error.border.color')}; + color: ${dt('toast.error.color')}; + box-shadow: ${dt('toast.error.box.shadow')}; +} + +.p-toast-message-error .p-toast-detail { + color: ${dt('toast.error.detail.color')}; +} + +.p-toast-message-error .p-toast-close-button:focus-visible { + color: ${dt('toast.error.color')}; +} + +.p-toast-message-error .p-toast-close-button:hover { + background: ${dt('toast.error.close.hover.background')}; +} + +.p-toast-message-secondary { + background: ${dt('toast.secondary.background')}; + border: 1px solid ${dt('toast.secondary.border.color')}; + color: ${dt('toast.secondary.color')}; + box-shadow: ${dt('toast.secondary.box.shadow')}; +} + +.p-toast-message-secondary .p-toast-detail { + color: ${dt('toast.secondary.detail.color')}; +} + +.p-toast-message-secondary .p-toast-close-button:focus-visible { + color: ${dt('toast.secondary.color')}; +} + +.p-toast-message-secondary .p-toast-close-button:hover { + background: ${dt('toast.secondary.close.hover.background')}; +} + +.p-toast-message-contrast { + background: ${dt('toast.contrast.background')}; + border: 1px solid ${dt('toast.contrast.border.color')}; + color: ${dt('toast.contrast.color')}; + box-shadow: ${dt('toast.contrast.box.shadow')}; +} + +.p-toast-message-contrast .p-toast-detail { + color: ${dt('toast.contrast.detail.color')}; +} + +.p-toast-message-contrast .p-toast-close-button:focus-visible { + color: ${dt('toast.contrast.color')}; +} + +.p-toast-message-contrast .p-toast-close-button:hover { + background: ${dt('toast.contrast.close.hover.background')}; +} + +.p-toast-top-center { + transform: translateX(-50%); +} + +.p-toast-bottom-center { + transform: translateX(-50%); +} + +.p-toast-center { + min-width: 20vw; + transform: translate(-50%, -50%); +} + +.p-toast-message-enter-from { + opacity: 0; + transform: translateY(50%); +} + +.p-toast-message-leave-from { + max-height: 1000px; +} + +.p-toast .p-toast-message.p-toast-message-leave-to { + max-height: 0; + opacity: 0; + margin-bottom: 0; + overflow: hidden; +} + +.p-toast-message-enter-active { + transition: transform 0.3s, opacity 0.3s; +} + +.p-toast-message-leave-active { + transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s; +} +`; + // Position const inlineStyles = { root: ({ position }) => ({ @@ -48,6 +266,7 @@ const classes = { export default BaseStyle.extend({ name: 'toast', + theme, classes, inlineStyles }); diff --git a/components/lib/togglebutton/style/ToggleButtonStyle.js b/components/lib/togglebutton/style/ToggleButtonStyle.js index 460b54ebd..9537fa98d 100644 --- a/components/lib/togglebutton/style/ToggleButtonStyle.js +++ b/components/lib/togglebutton/style/ToggleButtonStyle.js @@ -1,5 +1,91 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-togglebutton { + display: inline-flex; + cursor: pointer; + user-select: none; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + color: ${dt('togglebutton.color')}; + background: ${dt('togglebutton.background')}; + border: 1px solid ${dt('togglebutton.border.color')}; + padding: 0.5rem 1rem; + font-size: 1rem; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + gap: 0.5rem; + font-weight: 500; +} + +.p-togglebutton-label, +.p-togglebutton-icon { + position: relative; + transition: none; +} + +.p-togglebutton::before { + content: ""; + background: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + position: absolute; + left: 0.25rem; + top: 0.25rem; + width: calc(100% - 0.5rem); + height: calc(100% - 0.5rem); + border-radius: ${dt('rounded.sm')}; +} + +.p-togglebutton.p-togglebutton-checked::before { + background: ${dt('togglebutton.checked.background')}; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); +} + +.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover { + color: ${dt('togglebutton.hover.color')}; +} + +.p-togglebutton.p-togglebutton-checked { + color: ${dt('togglebutton.checked.color')}; +} + +.p-togglebutton:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-togglebutton.p-invalid { + border-color: ${dt('togglebutton.invalid.border.color')}; +} + +.p-togglebutton:disabled { + opacity: 1; + cursor: default; + background: ${dt('togglebutton.disabled.background')}; + border-color: ${dt('togglebutton.disabled.border.color')}; + color: ${dt('togglebutton.disabled.color')}; +} + +.p-togglebutton-icon { + color: ${dt('togglebutton.icon.color')}; +} + +.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon { + color: ${dt('togglebutton.icon.hover.color')}; +} + +.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon { + color: ${dt('togglebutton.icon.checked.color')}; +} + +.p-togglebutton:disabled .p-togglebutton-icon { + color: ${dt('togglebutton.icon.disabled.color')}; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-togglebutton p-component', @@ -14,5 +100,6 @@ const classes = { export default BaseStyle.extend({ name: 'togglebutton', + theme, classes }); diff --git a/components/lib/toggleswitch/style/ToggleSwitchStyle.js b/components/lib/toggleswitch/style/ToggleSwitchStyle.js index 2ac9d0293..5e75248e4 100644 --- a/components/lib/toggleswitch/style/ToggleSwitchStyle.js +++ b/components/lib/toggleswitch/style/ToggleSwitchStyle.js @@ -1,5 +1,94 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-toggleswitch { + display: inline-block; + width: 2.5rem; + height: 1.5rem; +} + +.p-toggleswitch-input { + cursor: pointer; + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + border-radius: ${dt('toggleswitch.border.radius')}; +} + +.p-toggleswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 0 none; + background: ${dt('toggleswitch.background')}; + transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('toggleswitch.border.radius')}; + outline-color: transparent; +} + +.p-toggleswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + background: ${dt('toggleswitch.handle.background')}; + width: 1rem; + height: 1rem; + left: 0.25rem; + margin-top: -0.5rem; + border-radius: ${dt('toggleswitch.handle.border.radius')}; + transition: all ${dt('transition.duration')}; +} + +.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider { + background: ${dt('toggleswitch.checked.background')}; +} + +.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider:before { + background: ${dt('toggleswitch.handle.checked.background')}; + left: 1.25rem; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider { + background: ${dt('toggleswitch.hover.background')}; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider:before { + background: ${dt('toggleswitch.handle.hover.background')}; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider { + background: ${dt('toggleswitch.checked.hover.background')}; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider:before { + background: ${dt('toggleswitch.handle.checked.hover.background')}; +} + +.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-toggleswitch.p-invalid > .p-toggleswitch-slider { + background: ${dt('toggleswitch.invalid.background')}; +} + +.p-toggleswitch.p-invalid > .p-toggleswitch-slider:before { + background: ${dt('toggleswitch.handle.invalid.background')}; +} +`; + const inlineStyles = { root: { position: 'relative' } }; @@ -19,6 +108,7 @@ const classes = { export default BaseStyle.extend({ name: 'toggleswitch', + theme, classes, inlineStyles }); diff --git a/components/lib/toolbar/style/ToolbarStyle.js b/components/lib/toolbar/style/ToolbarStyle.js index a99d55696..2eaf239f0 100644 --- a/components/lib/toolbar/style/ToolbarStyle.js +++ b/components/lib/toolbar/style/ToolbarStyle.js @@ -1,5 +1,27 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-toolbar { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + padding: 0.75rem; + background: ${dt('toolbar.background')}; + border: 1px solid ${dt('toolbar.border.color')}; + color: ${dt('toolbar.color')}; + border-radius: ${dt('rounded.base')}; + gap: 0.5rem; +} + +.p-toolbar-start, +.p-toolbar-center, +.p-toolbar-end { + display: flex; + align-items: center; +} +`; + const classes = { root: 'p-toolbar p-component', start: 'p-toolbar-start', @@ -9,5 +31,6 @@ const classes = { export default BaseStyle.extend({ name: 'toolbar', + theme, classes }); diff --git a/components/lib/tooltip/style/TooltipStyle.js b/components/lib/tooltip/style/TooltipStyle.js index 1ad125abe..f53cf5746 100644 --- a/components/lib/tooltip/style/TooltipStyle.js +++ b/components/lib/tooltip/style/TooltipStyle.js @@ -1,5 +1,66 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-tooltip { + position: absolute; + display: none; + max-width: 12.5rem; +} + +.p-tooltip-right, +.p-tooltip-left { + padding: 0 0.25rem; +} + +.p-tooltip-top, +.p-tooltip-bottom { + padding: 0.25rem 0; +} + +.p-tooltip-text { + white-space: pre-line; + word-break: break-word; + background: ${dt('tooltip.background')}; + color: ${dt('tooltip.color')}; + padding: 0.5rem 0.75rem; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: 6px; +} + +.p-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + scale: 2; +} + +.p-tooltip-right .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0.25em 0.25em 0; + border-right-color: ${dt('tooltip.background')}; +} + +.p-tooltip-left .p-tooltip-arrow { + margin-top: -0.25rem; + border-width: 0.25em 0 0.25em 0.25rem; + border-left-color: ${dt('tooltip.background')}; +} + +.p-tooltip-top .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0.25em 0.25em 0; + border-top-color: ${dt('tooltip.background')}; + border-bottom-color: ${dt('tooltip.background')}; +} + +.p-tooltip-bottom .p-tooltip-arrow { + margin-left: -0.25rem; + border-width: 0 0.25em 0.25rem; +} +`; + const classes = { root: 'p-tooltip p-component', arrow: 'p-tooltip-arrow', @@ -8,5 +69,6 @@ const classes = { export default BaseStyle.extend({ name: 'tooltip-directive', + theme, classes }); diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js index 55224706a..c10154e6e 100644 --- a/components/lib/tree/style/TreeStyle.js +++ b/components/lib/tree/style/TreeStyle.js @@ -1,5 +1,184 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-tree { + background: ${dt('tree.background')}; + color: ${dt('tree.color')}; + border-radius: ${dt('rounded.base')}; + border: 0 none; + padding: 1rem; +} + +.p-tree-root-children { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; +} + +.p-tree-node { + padding: 0 0; + outline: 0 none; + margin: 2px 0; +} + +.p-tree-root-children > .p-tree-node:first-child { + margin-top: 0; +} + +.p-tree-root-children > .p-tree-node:last-child { + margin-bottom: 0; +} + +.p-tree-node-content { + border-radius: ${dt('rounded.base')}; + padding: 0.25rem 0.5rem; + display: flex; + align-items: center; + outline-color: transparent; + color: ${dt('tree.node.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-tree-node:focus-visible > .p-tree-node-content { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: -2px; +} + +.p-tree-node-content.p-tree-node-selected { + background: ${dt('highlight.background')}; + color: ${dt('highlight.color')}; +} + +.p-tree-node-toggle-button { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + margin: 0 0.5rem 0 0; + width: 1.75rem; + height: 1.75rem; + color: ${dt('tree.toggle.color')}; + border: 0 none; + background: transparent; + border-radius: 50%; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + padding: 0; +} + +.p-tree-node-toggle-button:enabled:hover { + background: ${dt('tree.toggle.hover.background')}; + color: ${dt('tree.toggle.hover.color')}; +} + +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button, +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-icon { + color: inherit; +} + +.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover { + background: ${dt('tree.toggle.highlight.hover.background')}; +} + +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover { + background: ${dt('tree.node.hover.background')}; + color: ${dt('tree.node.hover.color')}; +} + +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-toggle-button { + color: ${dt('tree.toggle.hover.color')}; +} + +.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon { + color: ${dt('tree.icon.hover.color')}; +} + +.p-tree-node-children { + margin: 0; + padding: 0; + list-style-type: none; + padding: 0 0 0 1rem; +} + +.p-tree-root { + overflow: auto; +} + +.p-tree-node-selectable { + cursor: pointer; + user-select: none; +} + +.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button { + visibility: hidden; +} + +.p-tree-node-icon { + margin-right: 0.5rem; + color: ${dt('tree.icon.color')}; + transition: color ${dt('transition.duration')}; +} + +.p-tree-node-content .p-checkbox { + margin-right: 0.5rem; +} + +.p-tree-filter-input { + width: 100%; + padding-right: 1.75rem; +} + +.p-tree-filter-container { + position: relative; + display: block; + width: 100%; + margin-bottom: 0.5rem; +} + +.p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + right: 0.75rem; + color: ${dt('tree.filter.icon.color')}; +} + +.p-tree-loading { + position: relative; + min-height: 4rem; +} + +.p-tree-loading-icon { + font-size: 2rem; + width: 2rem; + height: 2rem; +} + +.p-tree-mask { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; +} + +.p-tree-flex-scrollable { + display: flex; + flex: 1; + height: 100%; + flex-direction: column; +} + +.p-tree-flex-scrollable .p-tree-root { + flex: 1; +} +`; + const classes = { root: ({ props }) => [ 'p-tree p-component', @@ -36,5 +215,6 @@ const classes = { export default BaseStyle.extend({ name: 'tree', + theme, classes }); diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js index c0a104d85..0c2418284 100644 --- a/components/lib/treeselect/style/TreeSelectStyle.js +++ b/components/lib/treeselect/style/TreeSelectStyle.js @@ -1,5 +1,119 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-treeselect { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + background: ${dt('treeselect.background')}; + border: 1px solid ${dt('treeselect.border.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + border-radius: ${dt('rounded.base')}; + outline-color: transparent; + box-shadow: ${dt('treeselect.box.shadow')}; +} + +.p-treeselect:not(.p-disabled):hover { + border-color: ${dt('treeselect.hover.border.color')}; +} + +.p-treeselect:not(.p-disabled).p-focus { + border-color: ${dt('treeselect.focus.border.color')}; + outline: 0 none; +} + +.p-treeselect.p-variant-filled { + background: ${dt('treeselect.filled.background')}; +} + +.p-treeselect.p-variant-filled.p-focus { + background: ${dt('treeselect.filled.focus.background')}; +} + +.p-treeselect.p-invalid { + border-color: ${dt('treeselect.invalid.border.color')}; +} + +.p-treeselect.p-disabled { + opacity: 1; + background: ${dt('treeselect.disabled.background')}; +} + +.p-treeselect-dropdown { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + background: transparent; + color: ${dt('treeselect.toggle.color')}; + width: 2.5rem; + border-top-right-radius: ${dt('rounded.base')}; + border-bottom-right-radius: ${dt('rounded.base')}; +} + +.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; + padding: 0.5rem 0.75rem; + color: ${dt('treeselect.color')}; +} + +.p-treeselect-label.p-placeholder { + color: ${dt('treeselect.placeholder.color')}; +} + +.p-treeselect.p-disabled .p-treeselect-label { + color: ${dt('treeselect.disabled.color')}; +} + +.p-inputwrapper-filled.p-treeselect.p-treeselect-display-chip .p-treeselect-label { + padding: 0.25rem 0.25rem; +} + +.p-treeselect-label-empty { + overflow: hidden; + visibility: hidden; +} + +.p-treeselect .p-treeselect-overlay { + min-width: 100%; +} + +.p-treeselect-overlay { + position: absolute; + top: 0; + left: 0; + background: ${dt('treeselect.overlay.background')}; + color: ${dt('treeselect.overlay.color')}; + border: 1px solid ${dt('treeselect.overlay.border.color')}; + border-radius: ${dt('rounded.base')}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +} + +.p-treeselect-empty-message { + padding: 0.5rem 0.75rem; + background: transparent; +} + +.p-fluid .p-treeselect { + display: flex; +} + +.p-treeselect-overlay .p-tree { + padding: 0.25rem 0.25rem; +} +`; + const inlineStyles = { root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined }) }; @@ -42,6 +156,7 @@ const classes = { export default BaseStyle.extend({ name: 'treeselect', + theme, classes, inlineStyles }); diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js index 175d81728..0321227a1 100644 --- a/components/lib/treetable/style/TreeTableStyle.js +++ b/components/lib/treetable/style/TreeTableStyle.js @@ -1,5 +1,450 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-treetable { + position: relative; +} + +.p-treetable-table { + border-spacing: 0px; + width: 100%; +} + +.p-treetable-sortable-column { + cursor: pointer; + user-select: none; + outline-color: transparent; +} + +.p-treetable-column-title, +.p-treetable-sort-icon, +.p-treetable-sort-badge { + vertical-align: middle; +} + +.p-treetable-sort-icon { + color: ${dt('treetable.sort.icon.color')}; + margin-left: 0.5rem; + transition: color ${dt('transition.duration')}; +} + +.p-treetable-sort-badge { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 50%; + height: 1rem; + min-width: 1rem; + line-height: 1rem; + margin-left: 0.5rem; +} + +.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover { + background: ${dt('treetable.header.cell.hover.background')}; + color: ${dt('treetable.header.cell.hover.color')}; +} + +.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon { + color: ${dt('treetable.sort.icon.hover.color')}; +} + +.p-treetable-column-sorted { + background: ${dt('highlight.background')}; + color: ${dt('highlight.color')}; +} + +.p-treetable-sortable-column:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-treetable-column-sorted .p-treetable-sort-icon { + color: ${dt('highlight.color')}; +} + +.p-treetable-hoverable .p-treetable-selectable-row { + cursor: pointer; +} + +.p-treetable-scrollable > .p-treetable-table-container { + position: relative; +} + +.p-treetable-scrollable-table > .p-treetable-thead { + top: 0; + z-index: 1; +} + +.p-treetable-scrollable-table > .p-treetable-frozen-tbody { + position: sticky; + z-index: 1; +} + +.p-treetable-scrollable-table>.p-treetable-tfoot { + bottom: 0; + z-index: 1; +} + +.p-treetable-scrollable .p-treetable-frozen-column { + position: sticky; + background: inherit; +} + +.p-treetable-scrollable th.p-treetable-frozen-column { + z-index: 1; +} + +.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead, +.p-treetable-scrollable > .p-treetable-table-container > .p-virtualscroller > .p-treetable-table > .p-treetable-thead { + background: ${dt('treetable.header.cell.background')}; +} + +.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot, +.p-treetable-scrollable > .p-treetable-table-container > .p-virtualscroller > .p-treetable-table > .p-treetable-tfoot { + background: ${dt('treetable.footer.cell.background')}; +} + +.p-treetable-flex-scrollable { + display: flex; + flex-direction: column; + height: 100%; +} + +.p-treetable-flex-scrollable>.p-treetable-table-container { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; +} + +.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header { + position: sticky; + z-index: 1; +} + +/* Resizable */ +.p-treetable-resizable-table > .p-treetable-thead > tr > th, +.p-treetable-resizable-table > .p-treetable-tfoot > tr > td, +.p-treetable-resizable-table > .p-treetable-tbody > tr > td { + overflow: hidden; + white-space: nowrap; +} + +.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) { + background-clip: padding-box; + position: relative; +} + +.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer { + display: none; +} + +.p-treetable-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; +} + +.p-treetable-column-header-content { + display: flex; + align-items: center; +} + +.p-treetable-column-resize-indicator { + width: 1px; + position: absolute; + z-index: 10; + display: none; + background: ${dt('treetable.resizer.color')}; +} + +.p-treetable-row-reorder-indicator-up, +.p-treetable-row-reorder-indicator-down { + position: absolute; + display: none; +} + +.p-treetable-reorderable-column, +.p-treetable-reorderable-row-handle { + cursor: move; +} + +.p-treetable-mask { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; +} + +.p-treetable-virtualscroller-spacer { + display: flex; +} + +.p-treetable .p-virtualscroller .p-virtualscroller-loading { + transform: none !important; + min-height: 0; + position: sticky; + top: 0; + left: 0; +} + +.p-treetable-paginator-top { + border: solid ${dt('treetable.header.border.color')}; + border-width: 0 0 1px 0; +} + +.p-treetable-header { + background: ${dt('treetable.header.background')}; + color: ${dt('treetable.header.color')}; + border: 1px solid ${dt('treetable.header.border.color')}; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; +} + +.p-treetable-footer { + background: ${dt('treetable.footer.background')}; + color: ${dt('treetable.footer.color')}; + border: 1px solid ${dt('treetable.footer.border.color')}; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; +} + +.p-treetable-thead > tr > th { + text-align: left; + padding: 0.75rem 1rem; + background: ${dt('treetable.header.cell.background')}; + border: 1px solid ${dt('treetable.header.cell.border.color')}; + border-width: 0 0 1px 0; + color: ${dt('treetable.header.cell.color')}; + font-weight: 600; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-treetable-tbody > tr { + outline-color: transparent; + background: ${dt('treetable.row.background')}; + color: ${dt('treetable.row.color')}; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-treetable-tbody > tr > td { + text-align: left; + border: 1px solid ${dt('treetable.body.cell.border.color')}; + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; +} + +.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover { + background: ${dt('treetable.row.hover.background')}; + color: ${dt('treetable.row.hover.color')}; +} + +.p-treetable-tbody > tr.p-treetable-row-selected { + background: ${dt('highlight.background')}; + color: ${dt('highlight.color')}; +} + +.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td { + border-bottom-color: ${dt('treetable.body.cell.selected.border.color')}; +} + +.p-treetable-tbody > tr.p-treetable-row-selectedt > td { + border-bottom-color: ${dt('treetable.body.cell.selected.border.color')}; +} + +.p-treetable-tbody > tr:focus-visible { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: -1px; +} + +.p-treetable-tfoot > tr > td { + text-align: left; + padding: 0.75rem 1rem; + border: 1px solid ${dt('treetable.footer.cell.border.color')}; + border-width: 0 0 1px 0; + font-weight: 600; + color: ${dt('treetable.footer.cell.color')}; + background: ${dt('treetable.footer.cell.background')}; +} + +.p-treetable-loading-icon { + font-size: 2rem; + width: 2rem; + height: 2rem; +} + +.p-treetable-gridlines .p-treetable-header { + border-width: 1px; +} + +.p-treetable-gridlines .p-treetable-footer { + border-width: 0 1px 1px 1px; +} + +.p-treetable-gridlines .p-treetable-paginator-top { + border-width: 0 1px 0 1px; +} + +.p-treetable-gridlines .p-treetable-paginator-bottom { + border-width: 0 1px 1px 1px; + border-style: solid; + border-color: ${dt('treetable.footer.border.color')}; +} + +.p-treetable-gridlines .p-treetable-thead > tr > th { + border-width: 1px 0 1px 1px; +} + +.p-treetable-gridlines .p-treetable-thead > tr > th:last-child { + border-width: 1px; +} + +.p-treetable-gridlines .p-treetable-tbody > tr > td { + border-width: 1px 0 0 1px; +} + +.p-treetable-gridlines .p-treetable-tbody > tr > td:last-child { + border-width: 1px 1px 0 1px; +} + +p-treetable-gridlines .p-treetable-tbody > tr:last-child>td { + border-width: 1px 0 1px 1px; +} + +.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td:last-child { + border-width: 1px; +} + +.p-treetable-gridlines .p-treetable-tfoot>tr>td { + border-width: 1px 0 1px 1px; +} + +.p-treetable-gridlines .p-treetable-tfoot > tr > td:last-child { + border-width: 1px 1px 1px 1px; +} + +.p-treetable.p-treetable-gridlines .p-treetable-thead +.p-treetable-tfoot > tr > td { + border-width: 0 0 1px 1px; +} + +.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td:last-child { + border-width: 0 1px 1px 1px; +} + +.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td { + border-width: 0 0 1px 1px; +} + +.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td:last-child { + border-width: 0 1px 1px 1px; +} + +.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td { + border-width: 0 0 0 1px; +} + +.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td:last-child { + border-width: 0 1px 0 1px; +} + +.p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd { + background: ${dt('treetable.row.striped.background')}); +} + +.p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight { + background: ${dt('highlight.background')}); + color: ${dt('highlight.color')}); +} + +.p-treetable.p-treetable-sm .p-treetable-header { + padding: 0.375rem 0.5rem; +} + +.p-treetable.p-treetable-sm .p-treetable-thead > tr > th { + padding: 0.375rem 0.5rem; +} + +.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td { + padding: 0.375rem 0.5rem; +} + +.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td { + padding: 0.375rem 0.5rem; +} + +.p-treetable.p-treetable-sm .p-treetable-footer { + padding: 0.375rem 0.5rem; +} + +.p-treetable.p-treetable-lg .p-treetable-header { + padding: 0.9375rem 1.25rem; +} + +.p-treetable.p-treetable-lg .p-treetable-thead > tr > th { + padding: 0.9375rem 1.25rem; +} + +.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td { + padding: 0.9375rem 1.25rem; +} + +.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td { + padding: 0.9375rem 1.25rem; +} + +.p-treetable.p-treetable-lg .p-treetable-footer { + padding: 0.9375rem 1.25rem; +} + +.p-treetable-row-toggle-button { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + width: 1.75rem; + height: 1.75rem; + color: ${dt('treetable.row.action.color')}; + border: 0 none; + background: transparent; + cursor: pointer; + border-radius: 50%; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; + outline-color: transparent; + user-select: none; +} + +.p-treetable-row-toggle-button:enabled:hover { + color: ${dt('treetable.row.action.hover.color')}; + background: ${dt('treetable.row.action.hover.background')}; +} + +.p-treetable-row-toggle-button:focus-visible { + outline: 1px solid ${dt('focus.ring.color')}; + outline-offset: 2px; +} + +.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-row-toggle-button:hover{ + background: ${dt('treetable.row.action.highlight.hover.background')}; + color: inherit; +} +`; + const classes = { root: ({ instance, props }) => [ 'p-treetable p-component', @@ -61,5 +506,6 @@ const classes = { export default BaseStyle.extend({ name: 'treetable', + theme, classes }); diff --git a/components/lib/virtualscroller/style/VirtualScrollerStyle.js b/components/lib/virtualscroller/style/VirtualScrollerStyle.js index 18453318a..e14b74b5a 100644 --- a/components/lib/virtualscroller/style/VirtualScrollerStyle.js +++ b/components/lib/virtualscroller/style/VirtualScrollerStyle.js @@ -1,67 +1,65 @@ import BaseStyle from 'primevue/base/style'; const css = ` -@layer primevue { - .p-virtualscroller { - position: relative; - overflow: auto; - contain: strict; - transform: translateZ(0); - will-change: scroll-position; - outline: 0 none; - } +.p-virtualscroller { + position: relative; + overflow: auto; + contain: strict; + transform: translateZ(0); + will-change: scroll-position; + outline: 0 none; +} - .p-virtualscroller-content { - position: absolute; - top: 0; - left: 0; - /* contain: content; */ - min-height: 100%; - min-width: 100%; - will-change: transform; - } +.p-virtualscroller-content { + position: absolute; + top: 0; + left: 0; + /* contain: content; */ + min-height: 100%; + min-width: 100%; + will-change: transform; +} - .p-virtualscroller-spacer { - position: absolute; - top: 0; - left: 0; - height: 1px; - width: 1px; - transform-origin: 0 0; - pointer-events: none; - } +.p-virtualscroller-spacer { + position: absolute; + top: 0; + left: 0; + height: 1px; + width: 1px; + transform-origin: 0 0; + pointer-events: none; +} - .p-virtualscroller .p-virtualscroller-loader { - position: sticky; - top: 0; - left: 0; - width: 100%; - height: 100%; - } +.p-virtualscroller .p-virtualscroller-loader { + position: sticky; + top: 0; + left: 0; + width: 100%; + height: 100%; +} - .p-virtualscroller-loader.p-component-overlay { - display: flex; - align-items: center; - justify-content: center; - } +.p-virtualscroller-loader.p-component-overlay { + display: flex; + align-items: center; + justify-content: center; +} - .p-virtualscroller-loading-icon { - font-size: 2rem; - } +.p-virtualscroller-loading-icon { + font-size: 2rem; +} - .p-virtualscroller-loading-icon.p-icon { - width: 2rem; - height: 2rem; - } +.p-virtualscroller-loading-icon.p-icon { + width: 2rem; + height: 2rem; +} - .p-virtualscroller-horizontal > .p-virtualscroller-content { - display: flex; - } +.p-virtualscroller-horizontal > .p-virtualscroller-content { + display: flex; +} - /* Inline */ - .p-virtualscroller-inline .p-virtualscroller-content { - position: static; - } +/* Inline */ +.p-virtualscroller-inline .p-virtualscroller-content { + position: static; } `;