From 9d86edb302519702d2e2d3683d69a338ffb887f0 Mon Sep 17 00:00:00 2001 From: "kl.nevermore" Date: Tue, 6 Aug 2024 19:46:47 +0800 Subject: [PATCH 01/96] fix:#6987 Dropdown filter freezes screen (#6991) --- components/lib/dropdown/Dropdown.js | 4 ++++ components/lib/dropdown/DropdownPanel.js | 1 - 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index 1d98fb1703..ca0cb1e871 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -989,6 +989,10 @@ export const Dropdown = React.memo( } }, [overlayVisibleState, filterState, props.filter]); + useUpdateEffect(() => { + virtualScrollerRef.current && virtualScrollerRef.current.scrollInView(0); + }, [filterState]); + useUpdateEffect(() => { if (filterState && (!props.options || props.options.length === 0)) { setFilterState(''); diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js index 0ac2945cd7..48a375f91d 100644 --- a/components/lib/dropdown/DropdownPanel.js +++ b/components/lib/dropdown/DropdownPanel.js @@ -50,7 +50,6 @@ export const DropdownPanel = React.memo( }; const onFilterInputChange = (event) => { - props.virtualScrollerRef.current && props.virtualScrollerRef.current.scrollToIndex(0); props.onFilterInputChange && props.onFilterInputChange(event); }; From 72bc4d4e1994bc4cb5a5a1adb8a5ba27dcaee1b9 Mon Sep 17 00:00:00 2001 From: Melloware Date: Tue, 6 Aug 2024 16:56:48 -0400 Subject: [PATCH 02/96] Fix #6997: MenuBar re-render on props.model changes (#6999) --- components/lib/menubar/Menubar.js | 7 ++++--- components/lib/menubar/MenubarSub.js | 3 +-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js index 0750070183..2133807752 100644 --- a/components/lib/menubar/Menubar.js +++ b/components/lib/menubar/Menubar.js @@ -491,7 +491,7 @@ export const Menubar = React.memo( } }; - const createProcessedItems = React.useCallback((items, level = 0, parent = {}, parentKey = '') => { + const createProcessedItems = (items, level = 0, parent = {}, parentKey = '') => { const _processedItems = []; items && @@ -511,7 +511,7 @@ export const Menubar = React.memo( }); return _processedItems; - }, []); + }; useMountEffect(() => { if (!idState) { @@ -536,7 +536,8 @@ export const Menubar = React.memo( const processed = createProcessedItems(itemsToProcess, 0, null, ''); setProcessedItems(processed); - }, [props.model, createProcessedItems]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [props.model]); useUpdateEffect(() => { const processedItem = activeItemPath.find((p) => p.key === focusedItemInfo.parentKey); diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js index c9b0da6a86..76b37a5e81 100644 --- a/components/lib/menubar/MenubarSub.js +++ b/components/lib/menubar/MenubarSub.js @@ -239,7 +239,6 @@ export const MenubarSub = React.memo( const menuitemProps = mergeProps( { id, - key: dataId, 'data-id': dataId, role: 'menuitem', 'aria-label': item.label, @@ -259,7 +258,7 @@ export const MenubarSub = React.memo( ); return ( -
  • +
  • {content}
    {submenu}
    • From 0f10825ee3cdebbd711d72fa6f143ee9c4b5f8b0 Mon Sep 17 00:00:00 2001 From: TienDang <147467559+swotiendang@users.noreply.github.com> Date: Wed, 7 Aug 2024 21:58:51 +0700 Subject: [PATCH 03/96] 6993: fix Editor bullet issue when using Quill 2.0.2 (#7004) * 6993: fix Editor bullet issue when using Quill 2.0.2 * 6993: fix melloware comment * Update EditorBase.js --------- Co-authored-by: Melloware --- components/doc/common/codeeditor/templates.js | 2 +- components/lib/editor/EditorBase.js | 1011 +++++++++-------- package-lock.json | 4 +- 3 files changed, 566 insertions(+), 451 deletions(-) diff --git a/components/doc/common/codeeditor/templates.js b/components/doc/common/codeeditor/templates.js index b10a791a97..61432c97ef 100644 --- a/components/doc/common/codeeditor/templates.js +++ b/components/doc/common/codeeditor/templates.js @@ -234,7 +234,7 @@ body { import ReactDOM from 'react-dom/client'; import 'primeicons/primeicons.css'; import { PrimeReactProvider } from 'primereact/api'; -import 'primeflex/primeflex.css'; +import 'primeflex/primeflex.css'; import 'primereact/resources/primereact.css'; import 'primereact/resources/themes/lara-light-indigo/theme.css'; diff --git a/components/lib/editor/EditorBase.js b/components/lib/editor/EditorBase.js index 7fd7ed29f2..6bd3d1470b 100644 --- a/components/lib/editor/EditorBase.js +++ b/components/lib/editor/EditorBase.js @@ -2,62 +2,65 @@ import { ComponentBase } from '../componentbase/ComponentBase'; import { classNames } from '../utils/Utils'; const classes = { - root: ({ props }) => classNames('p-component p-editor-container', props.className), - toolbar: 'p-editor-toolbar', - content: 'p-editor-content' + root: ({ props }) => classNames('', props.className), + toolbar: '', + content: '' }; const styles = ` /*! - * Quill Editor v1.3.7 - * https://quilljs.com/ + * Quill Editor v2.0.2 + * https://quilljs.com + * Copyright (c) 2017-2024, Slab * 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; + box-sizing: border-box; + font-family: Helvetica, Arial, sans-serif; + font-size: 13px; + height: 100%; + margin: 0; + position: relative; } .ql-container.ql-disabled .ql-tooltip { - visibility: hidden; + visibility: hidden; } -.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before { - pointer-events: none; +.ql-container:not(.ql-disabled) li[data-list="checked"] > .ql-ui, +.ql-container:not(.ql-disabled) li[data-list="unchecked"] > .ql-ui { + cursor: pointer; } .ql-clipboard { - left: -100000px; - height: 1px; - overflow-y: hidden; - position: absolute; - top: 50%; + left: -100000px; + height: 1px; + overflow-y: hidden; + position: absolute; + top: 50%; } .ql-clipboard p { - margin: 0; - padding: 0; + 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; + box-sizing: border-box; + counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 + list-9; + 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; + cursor: text; } .ql-editor p, .ql-editor ol, -.ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, @@ -66,374 +69,467 @@ const styles = ` .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.5em; -} -.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.2em; -} -.ql-editor li:not(.ql-direction-rtl)::before { - margin-left: -1.5em; - margin-right: 0.3em; - text-align: right; -} -.ql-editor li.ql-direction-rtl::before { - margin-left: 0.3em; - margin-right: -1.5em; -} -.ql-editor ol li:not(.ql-direction-rtl), -.ql-editor ul li:not(.ql-direction-rtl) { - padding-left: 1.5em; -} -.ql-editor ol li.ql-direction-rtl, -.ql-editor ul li.ql-direction-rtl { - padding-right: 1.5em; -} -.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 { + margin: 0; + padding: 0; +} +@supports (counter-set: none) { + .ql-editor p, + .ql-editor h1, + .ql-editor h2, + .ql-editor h3, + .ql-editor h4, + .ql-editor h5, + .ql-editor h6 { + counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 + list-9; + } +} +@supports not (counter-set: none) { + .ql-editor p, + .ql-editor h1, + .ql-editor h2, + .ql-editor h3, + .ql-editor h4, + .ql-editor h5, + .ql-editor h6 { + counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 + list-8 list-9; + } +} +.ql-editor table { + border-collapse: collapse; +} +.ql-editor td { + border: 1px solid #000; + padding: 2px 5px; +} +.ql-editor ol { + padding-left: 1.5em; +} +.ql-editor li { + list-style-type: none; + padding-left: 1.5em; + position: relative; +} +.ql-editor li > .ql-ui:before { + display: inline-block; + margin-left: -1.5em; + margin-right: 0.3em; + text-align: right; + white-space: nowrap; + width: 1.2em; +} +.ql-editor li[data-list="checked"] > .ql-ui, +.ql-editor li[data-list="unchecked"] > .ql-ui { + color: #777; +} +.ql-editor li[data-list="bullet"] > .ql-ui:before { + content: "\\2022"; +} +.ql-editor li[data-list="checked"] > .ql-ui:before { + content: "\\2611"; +} +.ql-editor li[data-list="unchecked"] > .ql-ui:before { + content: "\\2610"; +} +@supports (counter-set: none) { + .ql-editor li[data-list] { + counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} +@supports not (counter-set: none) { + .ql-editor li[data-list] { + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 + list-9; + } +} +.ql-editor li[data-list="ordered"] { + counter-increment: list-0; +} +.ql-editor li[data-list="ordered"] > .ql-ui:before { + content: counter(list-0, decimal) ". "; +} +.ql-editor li[data-list="ordered"].ql-indent-1 { + counter-increment: list-1; +} +.ql-editor li[data-list="ordered"].ql-indent-1 > .ql-ui:before { + content: counter(list-1, lower-alpha) ". "; +} +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-1 { + counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} +.ql-editor li[data-list="ordered"].ql-indent-2 { + counter-increment: list-2; } -.ql-editor ol li.ql-indent-2 { - counter-increment: list-2; +.ql-editor li[data-list="ordered"].ql-indent-2 > .ql-ui:before { + content: counter(list-2, lower-roman) ". "; } -.ql-editor ol li.ql-indent-2:before { - content: counter(list-2, lower-roman) ". "; +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-2 { + counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } } -.ql-editor ol li.ql-indent-2 { +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; + } +} +.ql-editor li[data-list="ordered"].ql-indent-3 { + counter-increment: list-3; } -.ql-editor ol li.ql-indent-3 { - counter-increment: list-3; +.ql-editor li[data-list="ordered"].ql-indent-3 > .ql-ui:before { + content: counter(list-3, decimal) ". "; } -.ql-editor ol li.ql-indent-3:before { - content: counter(list-3, decimal) ". "; +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-3 { + counter-set: list-4 list-5 list-6 list-7 list-8 list-9; + } } -.ql-editor ol li.ql-indent-3 { +@supports not (counter-set: none) { + .ql-editor li[data-list].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 li[data-list="ordered"].ql-indent-4 { + counter-increment: list-4; } -.ql-editor ol li.ql-indent-4:before { - content: counter(list-4, lower-alpha) ". "; +.ql-editor li[data-list="ordered"].ql-indent-4 > .ql-ui:before { + content: counter(list-4, lower-alpha) ". "; } -.ql-editor ol li.ql-indent-4 { +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-4 { + counter-set: list-5 list-6 list-7 list-8 list-9; + } +} +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8 list-9; + } +} +.ql-editor li[data-list="ordered"].ql-indent-5 { + counter-increment: list-5; } -.ql-editor ol li.ql-indent-5 { - counter-increment: list-5; +.ql-editor li[data-list="ordered"].ql-indent-5 > .ql-ui:before { + content: counter(list-5, lower-roman) ". "; } -.ql-editor ol li.ql-indent-5:before { - content: counter(list-5, lower-roman) ". "; +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-5 { + counter-set: list-6 list-7 list-8 list-9; + } } -.ql-editor ol li.ql-indent-5 { +@supports not (counter-set: none) { + .ql-editor li[data-list].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 li[data-list="ordered"].ql-indent-6 { + counter-increment: list-6; } -.ql-editor ol li.ql-indent-6:before { - content: counter(list-6, decimal) ". "; +.ql-editor li[data-list="ordered"].ql-indent-6 > .ql-ui:before { + content: counter(list-6, decimal) ". "; } -.ql-editor ol li.ql-indent-6 { +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-6 { + counter-set: list-7 list-8 list-9; + } +} +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-6 { counter-reset: list-7 list-8 list-9; + } +} +.ql-editor li[data-list="ordered"].ql-indent-7 { + counter-increment: list-7; } -.ql-editor ol li.ql-indent-7 { - counter-increment: list-7; +.ql-editor li[data-list="ordered"].ql-indent-7 > .ql-ui:before { + content: counter(list-7, lower-alpha) ". "; } -.ql-editor ol li.ql-indent-7:before { - content: counter(list-7, lower-alpha) ". "; +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-7 { + counter-set: list-8 list-9; + } } -.ql-editor ol li.ql-indent-7 { +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-7 { counter-reset: list-8 list-9; + } +} +.ql-editor li[data-list="ordered"].ql-indent-8 { + counter-increment: list-8; } -.ql-editor ol li.ql-indent-8 { - counter-increment: list-8; +.ql-editor li[data-list="ordered"].ql-indent-8 > .ql-ui:before { + content: counter(list-8, lower-roman) ". "; } -.ql-editor ol li.ql-indent-8:before { - content: counter(list-8, lower-roman) ". "; +@supports (counter-set: none) { + .ql-editor li[data-list].ql-indent-8 { + counter-set: list-9; + } } -.ql-editor ol li.ql-indent-8 { +@supports not (counter-set: none) { + .ql-editor li[data-list].ql-indent-8 { counter-reset: list-9; + } } -.ql-editor ol li.ql-indent-9 { - counter-increment: list-9; +.ql-editor li[data-list="ordered"].ql-indent-9 { + counter-increment: list-9; } -.ql-editor ol li.ql-indent-9:before { - content: counter(list-9, decimal) ". "; +.ql-editor li[data-list="ordered"].ql-indent-9 > .ql-ui:before { + content: counter(list-9, decimal) ". "; } .ql-editor .ql-indent-1:not(.ql-direction-rtl) { - padding-left: 3em; + padding-left: 3em; } .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { - padding-left: 4.5em; + padding-left: 4.5em; } .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right { - padding-right: 3em; + padding-right: 3em; } .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right { - padding-right: 4.5em; + padding-right: 4.5em; } .ql-editor .ql-indent-2:not(.ql-direction-rtl) { - padding-left: 6em; + padding-left: 6em; } .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { - padding-left: 7.5em; + padding-left: 7.5em; } .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right { - padding-right: 6em; + padding-right: 6em; } .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right { - padding-right: 7.5em; + padding-right: 7.5em; } .ql-editor .ql-indent-3:not(.ql-direction-rtl) { - padding-left: 9em; + padding-left: 9em; } .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { - padding-left: 10.5em; + padding-left: 10.5em; } .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right { - padding-right: 9em; + padding-right: 9em; } .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right { - padding-right: 10.5em; + padding-right: 10.5em; } .ql-editor .ql-indent-4:not(.ql-direction-rtl) { - padding-left: 12em; + padding-left: 12em; } .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { - padding-left: 13.5em; + padding-left: 13.5em; } .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right { - padding-right: 12em; + padding-right: 12em; } .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right { - padding-right: 13.5em; + padding-right: 13.5em; } .ql-editor .ql-indent-5:not(.ql-direction-rtl) { - padding-left: 15em; + padding-left: 15em; } .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { - padding-left: 16.5em; + padding-left: 16.5em; } .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right { - padding-right: 15em; + padding-right: 15em; } .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right { - padding-right: 16.5em; + padding-right: 16.5em; } .ql-editor .ql-indent-6:not(.ql-direction-rtl) { - padding-left: 18em; + padding-left: 18em; } .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { - padding-left: 19.5em; + padding-left: 19.5em; } .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right { - padding-right: 18em; + padding-right: 18em; } .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right { - padding-right: 19.5em; + padding-right: 19.5em; } .ql-editor .ql-indent-7:not(.ql-direction-rtl) { - padding-left: 21em; + padding-left: 21em; } .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { - padding-left: 22.5em; + padding-left: 22.5em; } .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right { - padding-right: 21em; + padding-right: 21em; } .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right { - padding-right: 22.5em; + padding-right: 22.5em; } .ql-editor .ql-indent-8:not(.ql-direction-rtl) { - padding-left: 24em; + padding-left: 24em; } .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { - padding-left: 25.5em; + padding-left: 25.5em; } .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right { - padding-right: 24em; + padding-right: 24em; } .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right { - padding-right: 25.5em; + padding-right: 25.5em; } .ql-editor .ql-indent-9:not(.ql-direction-rtl) { - padding-left: 27em; + padding-left: 27em; } .ql-editor li.ql-indent-9:not(.ql-direction-rtl) { - padding-left: 28.5em; + padding-left: 28.5em; } .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right { - padding-right: 27em; + padding-right: 27em; } .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right { - padding-right: 28.5em; + padding-right: 28.5em; +} +.ql-editor li.ql-direction-rtl { + padding-right: 1.5em; +} +.ql-editor li.ql-direction-rtl > .ql-ui:before { + margin-left: 0.3em; + margin-right: -1.5em; + text-align: left; +} +.ql-editor table { + table-layout: fixed; + width: 100%; +} +.ql-editor table td { + outline: none; +} +.ql-editor .ql-code-block-container { + font-family: monospace; } .ql-editor .ql-video { - display: block; - max-width: 100%; + display: block; + max-width: 100%; } .ql-editor .ql-video.ql-align-center { - margin: 0 auto; + margin: 0 auto; } .ql-editor .ql-video.ql-align-right { - margin: 0 0 0 auto; + margin: 0 0 0 auto; } .ql-editor .ql-bg-black { - background-color: #000; + background-color: #000; } .ql-editor .ql-bg-red { - background-color: #e60000; + background-color: #e60000; } .ql-editor .ql-bg-orange { - background-color: #f90; + background-color: #f90; } .ql-editor .ql-bg-yellow { - background-color: #ff0; + background-color: #ff0; } .ql-editor .ql-bg-green { - background-color: #008a00; + background-color: #008a00; } .ql-editor .ql-bg-blue { - background-color: #06c; + background-color: #06c; } .ql-editor .ql-bg-purple { - background-color: #93f; + background-color: #93f; } .ql-editor .ql-color-white { - color: #fff; + color: #fff; } .ql-editor .ql-color-red { - color: #e60000; + color: #e60000; } .ql-editor .ql-color-orange { - color: #f90; + color: #f90; } .ql-editor .ql-color-yellow { - color: #ff0; + color: #ff0; } .ql-editor .ql-color-green { - color: #008a00; + color: #008a00; } .ql-editor .ql-color-blue { - color: #06c; + color: #06c; } .ql-editor .ql-color-purple { - color: #93f; + color: #93f; } .ql-editor .ql-font-serif { - font-family: Georgia, Times New Roman, serif; + font-family: Georgia, Times New Roman, serif; } .ql-editor .ql-font-monospace { - font-family: Monaco, Courier New, monospace; + font-family: Monaco, Courier New, monospace; } .ql-editor .ql-size-small { - font-size: 0.75em; + font-size: 0.75em; } .ql-editor .ql-size-large { - font-size: 1.5em; + font-size: 1.5em; } .ql-editor .ql-size-huge { - font-size: 2.5em; + font-size: 2.5em; } .ql-editor .ql-direction-rtl { - direction: rtl; - text-align: inherit; + direction: rtl; + text-align: inherit; } .ql-editor .ql-align-center { - text-align: center; + text-align: center; } .ql-editor .ql-align-justify { - text-align: justify; + text-align: justify; } .ql-editor .ql-align-right { - text-align: right; + text-align: right; +} +.ql-editor .ql-ui { + position: absolute; } .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; + 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; + 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; + 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%; + float: left; + height: 100%; } .ql-snow.ql-toolbar button:active:hover, .ql-snow .ql-toolbar button:active:hover { - outline: none; + outline: none; } .ql-snow.ql-toolbar input.ql-image[type="file"], .ql-snow .ql-toolbar input.ql-image[type="file"] { - display: none; + display: none; } .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, @@ -449,7 +545,7 @@ const styles = ` .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; + color: #06c; } .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, @@ -479,7 +575,7 @@ const styles = ` .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; + fill: #06c; } .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, @@ -509,448 +605,467 @@ const styles = ` .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; + 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.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; + box-sizing: border-box; } .ql-snow * { - box-sizing: border-box; + box-sizing: border-box; } .ql-snow .ql-hidden { - display: none; + display: none; } .ql-snow .ql-out-bottom, .ql-snow .ql-out-top { - visibility: hidden; + visibility: hidden; } .ql-snow .ql-tooltip { - position: absolute; - transform: translateY(10px); + position: absolute; + transform: translateY(10px); } .ql-snow .ql-tooltip a { - cursor: pointer; - text-decoration: none; + cursor: pointer; + text-decoration: none; } .ql-snow .ql-tooltip.ql-flip { - transform: translateY(-10px); + transform: translateY(-10px); } .ql-snow .ql-formats { - display: inline-block; - vertical-align: middle; + display: inline-block; + vertical-align: middle; } .ql-snow .ql-formats:after { - clear: both; - content: ""; - display: table; + clear: both; + content: ""; + display: table; } .ql-snow .ql-stroke { - fill: none; - stroke: #444; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 2; + 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; + fill: none; + stroke: #444; + stroke-miterlimit: 10; + stroke-width: 2; } .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { - fill: #444; + fill: #444; } .ql-snow .ql-empty { - fill: none; + fill: none; } .ql-snow .ql-even { - fill-rule: evenodd; + fill-rule: evenodd; } .ql-snow .ql-thin, .ql-snow .ql-stroke.ql-thin { - stroke-width: 1; + stroke-width: 1; } .ql-snow .ql-transparent { - opacity: 0.4; + opacity: 0.4; } .ql-snow .ql-direction svg:last-child { - display: none; + display: none; } .ql-snow .ql-direction.ql-active svg:last-child { - display: inline; + display: inline; } .ql-snow .ql-direction.ql-active svg:first-child { - display: none; + display: none; } .ql-snow .ql-editor h1 { - font-size: 2em; + font-size: 2em; } .ql-snow .ql-editor h2 { - font-size: 1.5em; + font-size: 1.5em; } .ql-snow .ql-editor h3 { - font-size: 1.17em; + font-size: 1.17em; } .ql-snow .ql-editor h4 { - font-size: 1em; + font-size: 1em; } .ql-snow .ql-editor h5 { - font-size: 0.83em; + font-size: 0.83em; } .ql-snow .ql-editor h6 { - font-size: 0.67em; + font-size: 0.67em; } .ql-snow .ql-editor a { - text-decoration: underline; + text-decoration: underline; } .ql-snow .ql-editor blockquote { - border-left: 4px solid #ccc; - margin-bottom: 5px; - margin-top: 5px; - padding-left: 16px; + 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 .ql-code-block-container { + 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 .ql-code-block-container { + margin-bottom: 5px; + margin-top: 5px; + padding: 5px 10px; } .ql-snow .ql-editor code { - font-size: 85%; - padding: 2px 4px; + font-size: 85%; + padding: 2px 4px; } -.ql-snow .ql-editor pre.ql-syntax { - background-color: #23241f; - color: #f8f8f2; - overflow: visible; +.ql-snow .ql-editor .ql-code-block-container { + background-color: #23241f; + color: #f8f8f2; + overflow: visible; } .ql-snow .ql-editor img { - max-width: 100%; + 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; + 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%; + 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; + display: inline-block; + line-height: 22px; } .ql-snow .ql-picker-options { - display: none; - min-width: 100%; - padding: 4px 8px; - position: absolute; - white-space: nowrap; + 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; + cursor: pointer; + display: block; + padding-bottom: 5px; + padding-top: 5px; } .ql-snow .ql-picker.ql-expanded .ql-picker-label { - color: #ccc; - z-index: 2; + color: #ccc; + z-index: 2; } .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { - fill: #ccc; + fill: #ccc; } .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { - stroke: #ccc; + stroke: #ccc; } .ql-snow .ql-picker.ql-expanded .ql-picker-options { - display: block; - margin-top: -1px; - top: 100%; - z-index: 1; + display: block; + margin-top: -1px; + top: 100%; + z-index: 1; } .ql-snow .ql-color-picker, .ql-snow .ql-icon-picker { - width: 28px; + width: 28px; } .ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label { - padding: 2px 4px; + padding: 2px 4px; } .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg { - right: 4px; + right: 4px; } .ql-snow .ql-icon-picker .ql-picker-options { - padding: 4px 0px; + padding: 4px 0; } .ql-snow .ql-icon-picker .ql-picker-item { - height: 24px; - width: 24px; - padding: 2px 4px; + height: 24px; + width: 24px; + padding: 2px 4px; } .ql-snow .ql-color-picker .ql-picker-options { - padding: 3px 5px; - width: 152px; + 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; + border: 1px solid transparent; + float: left; + height: 16px; + margin: 2px; + padding: 0; + width: 16px; } .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg { - position: absolute; - margin-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); + 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; + width: 98px; } .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { - content: "Normal"; + 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"; + 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"; + 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"; + 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"; + 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"; + 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"; + content: "Heading 6"; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { - font-size: 2em; + font-size: 2em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { - font-size: 1.5em; + font-size: 1.5em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { - font-size: 1.17em; + font-size: 1.17em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { - font-size: 1em; + font-size: 1em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { - font-size: 0.83em; + font-size: 0.83em; } .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { - font-size: 0.67em; + font-size: 0.67em; } .ql-snow .ql-picker.ql-font { - width: 108px; + 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"; + 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"; + 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"; + content: "Monospace"; } .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { - font-family: Georgia, Times New Roman, serif; + 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; + font-family: Monaco, Courier New, monospace; } .ql-snow .ql-picker.ql-size { - width: 98px; + width: 98px; } .ql-snow .ql-picker.ql-size .ql-picker-label::before, .ql-snow .ql-picker.ql-size .ql-picker-item::before { - content: "Normal"; + 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"; + 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"; + 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"; + content: "Huge"; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { - font-size: 10px; + font-size: 10px; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { - font-size: 18px; + font-size: 18px; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { - font-size: 32px; + font-size: 32px; } .ql-snow .ql-color-picker.ql-background .ql-picker-item { - background-color: #fff; + background-color: #fff; } .ql-snow .ql-color-picker.ql-color .ql-picker-item { - background-color: #000; + background-color: #000; +} +.ql-code-block-container { + position: relative; +} +.ql-code-block-container .ql-ui { + right: 5px; + top: 5px; } .ql-toolbar.ql-snow { - border: 1px solid #ccc; - box-sizing: border-box; - font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; - padding: 8px; + 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; + margin-right: 15px; } .ql-toolbar.ql-snow .ql-picker-label { - border: 1px solid transparent; + 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; + 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; + border-color: #ccc; } .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { - border-color: #ccc; + 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; + border-color: #000; } .ql-toolbar.ql-snow + .ql-container.ql-snow { - border-top: 0px; + border-top: 0; } .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; + background-color: #fff; + border: 1px solid #ccc; + box-shadow: 0 0 5px #ddd; + color: #444; + padding: 5px 12px; + white-space: nowrap; } .ql-snow .ql-tooltip::before { - content: "Visit URL:"; - line-height: 26px; - margin-right: 8px; + 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; + display: none; + border: 1px solid #ccc; + font-size: 13px; + height: 26px; + margin: 0; + padding: 3px 5px; + width: 170px; } .ql-snow .ql-tooltip a.ql-preview { - display: inline-block; - max-width: 200px; - overflow-x: hidden; - text-overflow: ellipsis; - vertical-align: top; + 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; + 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; + content: "Remove"; + margin-left: 8px; } .ql-snow .ql-tooltip a { - line-height: 26px; + line-height: 26px; } .ql-snow .ql-tooltip.ql-editing a.ql-preview, .ql-snow .ql-tooltip.ql-editing a.ql-remove { - display: none; + display: none; } .ql-snow .ql-tooltip.ql-editing input[type="text"] { - display: inline-block; + display: inline-block; } .ql-snow .ql-tooltip.ql-editing a.ql-action::after { - border-right: 0px; - content: "Save"; - padding-right: 0px; + border-right: 0; + content: "Save"; + padding-right: 0; } .ql-snow .ql-tooltip[data-mode="link"]::before { - content: "Enter link:"; + content: "Enter link:"; } .ql-snow .ql-tooltip[data-mode="formula"]::before { - content: "Enter formula:"; + content: "Enter formula:"; } .ql-snow .ql-tooltip[data-mode="video"]::before { - content: "Enter video:"; + content: "Enter video:"; } .ql-snow a { - color: #06c; + color: #06c; } .ql-container.ql-snow { - border: 1px solid #ccc; + border: 1px solid #ccc; } `; diff --git a/package-lock.json b/package-lock.json index 501fedeb66..91b6faf4a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "primereact", - "version": "10.8.1", + "version": "10.8.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "primereact", - "version": "10.8.1", + "version": "10.8.2", "dependencies": { "@docsearch/react": "3.6.1", "chart.js": "4.4.3", From 0adc84553b8f857a1f4491c3c29f74b9786372d3 Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 7 Aug 2024 11:11:34 -0400 Subject: [PATCH 04/96] Fix #7002: Dropdown improve Android key handling (#7003) --- components/lib/dropdown/Dropdown.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index ca0cb1e871..ea4baf02cb 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -188,15 +188,16 @@ export const Dropdown = React.memo( }; const onInputKeyDown = (event) => { - if (props.disabled || DomHandler.isAndroid()) { + if (props.disabled) { event.preventDefault(); return; } const metaKey = event.metaKey || event.ctrlKey; + const code = DomHandler.isAndroid() ? event.key : event.code; - switch (event.code) { + switch (code) { case 'ArrowDown': onArrowDownKey(event); break; @@ -509,7 +510,7 @@ export const Dropdown = React.memo( }; const onBackspaceKey = (event, pressedInInputText = false) => { - if (pressedInInputText) { + if (event && pressedInInputText) { !overlayVisibleState && show(); } }; From 7c7681e3902a4c40d4f696695a0719b68d82c63e Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 7 Aug 2024 14:39:24 -0400 Subject: [PATCH 05/96] Fix #6995: Key should be reference on element and not spread (#7000) --- components/doc/slider/filterdoc.js | 14 ++++++------- .../lib/autocomplete/AutoCompletePanel.js | 7 +++++-- components/lib/breadcrumb/BreadCrumb.js | 21 +++++++++++++------ components/lib/calendar/Calendar.js | 10 ++++----- components/lib/carousel/Carousel.js | 3 +-- .../lib/cascadeselect/CascadeSelectBase.js | 1 + components/lib/chip/Chip.js | 14 ++++++------- components/lib/chips/Chips.js | 3 +-- components/lib/datascroller/DataScroller.js | 13 ++++++------ components/lib/dock/Dock.js | 3 +-- components/lib/galleria/GalleriaItem.js | 7 +++++-- components/lib/galleria/GalleriaThumbnails.js | 3 +-- components/lib/inputotp/InputOtp.js | 3 +-- components/lib/listbox/ListBox.js | 2 +- components/lib/listbox/ListBoxItem.js | 3 +-- components/lib/mention/MentionBase.js | 1 + components/lib/menu/Menu.js | 15 +++++++------ components/lib/menubar/MenubarSub.js | 11 +++++----- components/lib/multiselect/MultiSelect.js | 1 - components/lib/multiselect/MultiSelectItem.js | 2 +- .../lib/multiselect/MultiSelectPanel.js | 16 +++++++++++--- components/lib/panelmenu/PanelMenu.js | 3 +-- components/lib/panelmenu/PanelMenuSub.js | 6 ++---- components/lib/password/Password.js | 2 -- components/lib/rating/Rating.js | 3 +-- components/lib/speeddial/SpeedDial.js | 7 +++++-- components/lib/steps/Steps.js | 7 +++++-- components/lib/tabmenu/TabMenu.js | 7 +++++-- 28 files changed, 105 insertions(+), 83 deletions(-) diff --git a/components/doc/slider/filterdoc.js b/components/doc/slider/filterdoc.js index d040cccc02..b6efe436ec 100644 --- a/components/doc/slider/filterdoc.js +++ b/components/doc/slider/filterdoc.js @@ -22,7 +22,7 @@ export function FilterDoc(props) { const code = { basic: ` -user header +user header setFilter(e.value)} options={filterOptions} className="mb-3" /> -
    - user header +
    + user header setFilter(e.value)} options={filterOptions} className="mb-3" /> -
    - user header +
    + user header setFilter(e.value)} options={filterOptions} className="mb-3" />
    -
    - user header +
    + user header setFilter(e.value)} options={filterOptions} className="mb-3" /> {content}; + return ( +
  • + {content} +
    • + ); }; const createListItem = (item, key, index, listItemProps) => { diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js index acd08e51b6..1c40fffaee 100644 --- a/components/lib/breadcrumb/BreadCrumb.js +++ b/components/lib/breadcrumb/BreadCrumb.js @@ -106,14 +106,17 @@ export const BreadCrumb = React.memo( const menuitemProps = mergeProps( { id: key, - key, className: cx('home', { _className, disabled }), style }, ptm('home') ); - return
  • {content}
    • ; + return ( +
  • + {content} +
    • + ); } return null; @@ -133,14 +136,17 @@ export const BreadCrumb = React.memo( const separatorProps = mergeProps( { id: key, - key, className: cx('separator'), role: 'separator' }, ptm('separator') ); - return
  • {separatorIcon}
    • ; + return ( +
  • + {separatorIcon} +
    • + ); }; const createMenuitem = (item, index) => { @@ -184,14 +190,17 @@ export const BreadCrumb = React.memo( const menuitemProps = mergeProps( { id: key, - key, className: cx('menuitem', { item }), style: item.style }, ptm('menuitem') ); - return
  • {content}
    • ; + return ( +
  • + {content} +
    • + ); }; const createMenuitems = () => { diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index bc484c6140..3fe463b84f 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -3587,8 +3587,7 @@ export const Calendar = React.memo( const dates = createDates(monthMetaData, groupIndex); const containerProps = mergeProps( { - className: cx('container'), - key: UniqueComponentId('calendar_container_') + className: cx('container') }, ptm('container') ); @@ -3605,7 +3604,7 @@ export const Calendar = React.memo( return ( currentView === 'date' && ( -
    +
    {dayNames} @@ -3635,15 +3634,14 @@ export const Calendar = React.memo( const headerProps = mergeProps( { - className: cx('header'), - key: index + className: cx('header') }, ptm('header') ); return (
    -
    +
    {header} {backwardNavigator} {title} diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js index d67fc8de27..391e32d641 100644 --- a/components/lib/carousel/Carousel.js +++ b/components/lib/carousel/Carousel.js @@ -741,7 +741,6 @@ export const Carousel = React.memo( const key = 'carousel-indicator-' + index; const indicatorProps = mergeProps( { - key, className: cx('indicator', { isActive }), 'data-p-highlight': isActive }, @@ -760,7 +759,7 @@ export const Carousel = React.memo( ); return ( -
  • +
  • diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js index 74c6d100e6..4a5b21478c 100644 --- a/components/lib/cascadeselect/CascadeSelectBase.js +++ b/components/lib/cascadeselect/CascadeSelectBase.js @@ -134,6 +134,7 @@ export const CascadeSelectBase = ComponentBase.extend({ disabled: false, loadingIcon: null, dropdownIcon: null, + loading: false, id: null, inputId: null, inputRef: null, diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js index 4bc6a769e9..5bc1277366 100644 --- a/components/lib/chip/Chip.js +++ b/components/lib/chip/Chip.js @@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps } from '../hooks/Hooks'; import { TimesCircleIcon } from '../icons/timescircle'; -import { classNames, IconUtils, ObjectUtils } from '../utils/Utils'; +import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils'; import { ChipBase } from './ChipBase'; export const Chip = React.memo( @@ -41,7 +41,6 @@ export const Chip = React.memo( const removeIconProps = mergeProps( { - key: 'removeIcon', role: 'button', tabIndex: 0, className: cx('removeIcon'), @@ -51,12 +50,11 @@ export const Chip = React.memo( ptm('removeIcon') ); - const icon = props.removeIcon || ; + const icon = props.removeIcon || ; if (props.image) { const imageProps = mergeProps( { - key: 'image', src: props.image, onError: props.onImageError }, @@ -67,7 +65,6 @@ export const Chip = React.memo( } else if (props.icon) { const chipIconProps = mergeProps( { - key: 'icon', className: cx('icon') }, ptm('icon') @@ -79,13 +76,16 @@ export const Chip = React.memo( if (props.label) { const labelProps = mergeProps( { - key: 'label', className: cx('label') }, ptm('label') ); - content.push({props.label}); + content.push( + + {props.label} + + ); } if (props.removable) { diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js index dc376003d7..a2112d9862 100644 --- a/components/lib/chips/Chips.js +++ b/components/lib/chips/Chips.js @@ -349,7 +349,6 @@ export const Chips = React.memo( const icon = createRemoveIcon(value, index); const tokenProps = mergeProps( { - key: `${index}_${value}`, id: props.inputId + '_chips_item_' + index, role: 'option', 'aria-label': value, @@ -364,7 +363,7 @@ export const Chips = React.memo( ); return ( -
  • +
  • {label} {icon}
    • diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js index 9ce1542c13..d35a0c92bb 100644 --- a/components/lib/datascroller/DataScroller.js +++ b/components/lib/datascroller/DataScroller.js @@ -190,15 +190,14 @@ export const DataScroller = React.memo( }; const createItem = (_value, index) => { - const itemProps = mergeProps( - { - key: index + '_datascrollitem' - }, - ptm('item') - ); + const itemProps = ptm('item'); const content = props.itemTemplate ? props.itemTemplate(_value) : _value; - return
  • {content}
    • ; + return ( +
  • + {content} +
    • + ); }; const createEmptyMessage = () => { diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js index cfadbdd910..00d5e2de77 100644 --- a/components/lib/dock/Dock.js +++ b/components/lib/dock/Dock.js @@ -237,7 +237,6 @@ export const Dock = React.memo( { id: key, role: 'menuitem', - key, 'aria-label': label, 'aria-disabled': disabled, 'data-p-focused': active, @@ -250,7 +249,7 @@ export const Dock = React.memo( ); return ( -
  • +
  • {content}
    • ); diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js index b8d6f96a6f..c76647ac49 100644 --- a/components/lib/galleria/GalleriaItem.js +++ b/components/lib/galleria/GalleriaItem.js @@ -287,7 +287,6 @@ export const GalleriaItem = React.memo( const indicatorProps = mergeProps( { className: cx('indicator', { isActive }), - key: key, tabIndex: 0, 'aria-label': ariaPageLabel(index + 1), 'aria-selected': props.activeIndex === index, @@ -308,7 +307,11 @@ export const GalleriaItem = React.memo( ); } - return
  • {indicator}
    • ; + return ( +
  • + {indicator} +
    • + ); }; const createIndicators = () => { diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js index 8d50ce3498..c8fc92fb04 100644 --- a/components/lib/galleria/GalleriaThumbnails.js +++ b/components/lib/galleria/GalleriaThumbnails.js @@ -131,7 +131,6 @@ const GalleriaThumbnailItem = React.memo((props) => { const thumbnailItemProps = mergeProps( { className: classNames(props.className, cx('thumbnailItem', { subProps: props })), - key: 'p-galleria-thumbnail-item-' + props.index, role: 'tab', 'data-p-active': props.current, 'aria-selected': props.current, @@ -157,7 +156,7 @@ const GalleriaThumbnailItem = React.memo((props) => { ); return ( -
    +
    {content}
    ); diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js index 32836fbe74..3993e6002c 100644 --- a/components/lib/inputotp/InputOtp.js +++ b/components/lib/inputotp/InputOtp.js @@ -201,7 +201,6 @@ export const InputOtp = React.memo( }; const inputElementProps = { id: inputElementIndex, - key: inputElementIndex, value: tokens[inputElementIndex] || '', inputMode: props?.integerOnly ? 'numeric' : 'text', type: props?.mask ? 'password' : 'text', @@ -221,7 +220,7 @@ export const InputOtp = React.memo( props: inputElementProps }) ) : ( - + ); const inputElements = [inputElement, ...createInputElements(remainingInputs - 1)]; diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js index 4825db46d4..b36b33e1a0 100644 --- a/components/lib/listbox/ListBox.js +++ b/components/lib/listbox/ListBox.js @@ -749,7 +749,7 @@ export const ListBox = React.memo( ); return ( -
  • +
  • {groupContent}
    • ); diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js index 55b7925db7..2b88b9a265 100644 --- a/components/lib/listbox/ListBoxItem.js +++ b/components/lib/listbox/ListBoxItem.js @@ -66,7 +66,6 @@ export const ListBoxItem = React.memo((props) => { onMouseDown: (event) => props.onOptionMouseDown(event, props.index), onMouseMove: (event) => props.onOptionMouseMove(event, props.index), 'aria-label': props.label, - key: props.optionKey, role: 'option', 'aria-selected': props.selected, 'aria-disabled': props.disabled, @@ -76,7 +75,7 @@ export const ListBoxItem = React.memo((props) => { ); return ( -
  • +
  • {content}
    • diff --git a/components/lib/mention/MentionBase.js b/components/lib/mention/MentionBase.js index 553ef49f8e..0945a22a01 100644 --- a/components/lib/mention/MentionBase.js +++ b/components/lib/mention/MentionBase.js @@ -64,6 +64,7 @@ export const MentionBase = ComponentBase.extend({ defaultProps: { __TYPE: 'Mention', autoHighlight: true, + autoResize: false, className: null, delay: 0, field: null, diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js index 2b8313cf0c..8ea00da93d 100644 --- a/components/lib/menu/Menu.js +++ b/components/lib/menu/Menu.js @@ -302,7 +302,6 @@ export const Menu = React.memo( const submenuHeaderProps = mergeProps( { id: key, - key, role: 'none', className: classNames(submenu.className, cx('submenuHeader', { submenu })), style: sx('submenuHeader', { submenu }), @@ -313,7 +312,9 @@ export const Menu = React.memo( return ( -
  • {submenu.label}
    • +
  • + {submenu.label} +
    • {items}     ); @@ -324,14 +325,13 @@ export const Menu = React.memo( const separatorProps = mergeProps( { id: key, - key, className: classNames(item.className, cx('separator')), role: 'separator' }, ptm('separator') ); - return
  • ; + return
  • ; }; const createMenuItem = (item, index, parentId = null) => { @@ -408,7 +408,6 @@ export const Menu = React.memo( const menuitemProps = mergeProps( { id: key, - key, className: classNames(item.className, cx('menuitem', { focused: focusedOptionIndex === key })), style: sx('menuitem', { item }), role: 'menuitem', @@ -420,7 +419,11 @@ export const Menu = React.memo( getMenuItemPTOptions('menuitem', menuContext) ); - return
  • {content}
    • ; + return ( +
  • + {content} +
    • + ); }; const createItem = (item, index) => { diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js index 76b37a5e81..ee688427e8 100644 --- a/components/lib/menubar/MenubarSub.js +++ b/components/lib/menubar/MenubarSub.js @@ -103,11 +103,10 @@ export const MenubarSub = React.memo( return index - props.model.slice(0, index).filter((processedItem) => isItemVisible(processedItem) && getItemProp(processedItem, 'separator')).length + 1; }; - const createSeparator = (index) => { - const key = props.id + '_separator_' + index; + const createSeparator = (processedItem, index) => { + const key = props.id + '_separator_' + index + '_' + processedItem.key; const separatorProps = mergeProps( { - key, 'data-id': key, className: cx('separator'), role: 'separator' @@ -115,7 +114,7 @@ export const MenubarSub = React.memo( ptm('separator', { hostName: props.hostName }) ); - return
  • ; + return
  • ; }; const createSubmenu = (processedItem) => { @@ -258,7 +257,7 @@ export const MenubarSub = React.memo( ); return ( -
  • +
  • {content}
    {submenu}
    • @@ -266,7 +265,7 @@ export const MenubarSub = React.memo( }; const createItem = (processedItem, index) => { - return getItemProp(processedItem, 'separator') ? createSeparator(index) : createMenuitem(processedItem, index); + return getItemProp(processedItem, 'separator') ? createSeparator(processedItem, index) : createMenuitem(processedItem, index); }; const createMenu = () => { diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js index 625969c331..9965f14513 100644 --- a/components/lib/multiselect/MultiSelect.js +++ b/components/lib/multiselect/MultiSelect.js @@ -899,7 +899,6 @@ export const MultiSelect = React.memo( const labelKey = label + '_' + i; const iconProps = mergeProps( { - key: i, className: cx('removeTokenIcon'), onClick: (e) => removeChip(e, val) }, diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js index 2e03e3aa9c..3ba8ce9865 100644 --- a/components/lib/multiselect/MultiSelectItem.js +++ b/components/lib/multiselect/MultiSelectItem.js @@ -80,7 +80,7 @@ export const MultiSelectItem = React.memo((props) => { ); return ( -
  • +
  • diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js index 2f4cec035b..ae23ddf9fd 100644 --- a/components/lib/multiselect/MultiSelectPanel.js +++ b/components/lib/multiselect/MultiSelectPanel.js @@ -149,7 +149,11 @@ export const MultiSelectPanel = React.memo( getPTOptions('emptyMessage') ); - return
  • {emptyFilterMessage}
    • ; + return ( +
  • + {emptyFilterMessage} +
    • + ); }; const createEmptyContent = () => { @@ -162,7 +166,11 @@ export const MultiSelectPanel = React.memo( getPTOptions('emptyMessage') ); - return
  • {emptyMessage}
    • ; + return ( +
  • + {emptyMessage} +
    • + ); }; const createItem = (option, index, scrollerOptions = {}) => { @@ -182,7 +190,9 @@ export const MultiSelectPanel = React.memo( return ( -
  • {groupContent}
    • +
  • + {groupContent} +
    • {groupChildrenContent}     ); diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index 169b515f12..d497fc6419 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/components/lib/panelmenu/PanelMenu.js @@ -331,7 +331,6 @@ export const PanelMenu = React.memo( const panelProps = mergeProps( { - key: key, id: item?.id || generatePanelId(index), className: cx('panel', { item }), style: item.style @@ -394,7 +393,7 @@ export const PanelMenu = React.memo( ); return ( -
    +
    {content}
    diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js index 1e748c6c77..82e3b0b80c 100644 --- a/components/lib/panelmenu/PanelMenuSub.js +++ b/components/lib/panelmenu/PanelMenuSub.js @@ -94,14 +94,13 @@ export const PanelMenuSub = React.memo( const separatorProps = mergeProps( { id: key, - key, className: cx('separator'), role: 'separator' }, _ptm('separator') ); - return
  • ; + return
  • ; }; const createSubmenu = (processedItem, active) => { @@ -232,7 +231,6 @@ export const PanelMenuSub = React.memo( const menuitemProps = mergeProps( { - key, id: key, className: cx('menuitem', { item, focused: itemFocused, disabled: disabled }), style: item.style, @@ -249,7 +247,7 @@ export const PanelMenuSub = React.memo( ); return ( -
  • +
  • {content}
    {submenu}
    • diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js index 3a5f62ed95..2f4058956d 100644 --- a/components/lib/password/Password.js +++ b/components/lib/password/Password.js @@ -307,7 +307,6 @@ export const Password = React.memo( const hideIconProps = mergeProps( { - key: 'hideIcon', role: 'switch', tabIndex: props.tabIndex || '0', className: cx('hideIcon'), @@ -321,7 +320,6 @@ export const Password = React.memo( const showIconProps = mergeProps( { - key: 'showIcon', role: 'switch', tabIndex: props.tabIndex || '0', className: cx('showIcon'), diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js index 4b50af41dc..7dc076be94 100644 --- a/components/lib/rating/Rating.js +++ b/components/lib/rating/Rating.js @@ -141,7 +141,6 @@ export const Rating = React.memo( const itemProps = mergeProps( { - key: value, className: cx('item', { active, focusedOptionIndex, isFocusVisibleItem, value }), 'data-p-focused': value === focusedOptionIndex, tabIndex: tabIndex, @@ -154,7 +153,7 @@ export const Rating = React.memo( ); return ( -
    +
    {content}
    ); diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js index a7f9cec7fa..0cee730077 100644 --- a/components/lib/speeddial/SpeedDial.js +++ b/components/lib/speeddial/SpeedDial.js @@ -466,7 +466,6 @@ export const SpeedDial = React.memo( const menuItemProps = mergeProps( { - key: index, id: `${idState}_${index}`, className: cx('menuitem', { active: isItemActive(`${idState}_${index}`) }), style: getItemStyle(index), @@ -476,7 +475,11 @@ export const SpeedDial = React.memo( ptm('menuitem') ); - return
  • {content}
    • ; + return ( +
  • + {content} +
    • + ); }; const createItems = () => { diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js index c0ca977276..4cbed933b6 100644 --- a/components/lib/steps/Steps.js +++ b/components/lib/steps/Steps.js @@ -232,7 +232,6 @@ export const Steps = React.memo( const menuItemProps = mergeProps( { - key, id: key, className: cx('menuitem', { active, disabled, item }), style: item.style @@ -240,7 +239,11 @@ export const Steps = React.memo( ptm('menuitem') ); - return
  • {content}
    • ; + return ( +
  • + {content} +
    • + ); }; const createItems = () => { diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js index 778b6ce57d..d05e5fd128 100644 --- a/components/lib/tabmenu/TabMenu.js +++ b/components/lib/tabmenu/TabMenu.js @@ -284,7 +284,6 @@ export const TabMenu = React.memo( { ref: tabsRef.current[`tab_${index}`], id: key, - key, onKeyDown: (event) => onKeyDownItem(event, item, index), className: cx('menuitem', { _className, active, disabled }), style: style, @@ -296,7 +295,11 @@ export const TabMenu = React.memo( getPTOptions('menuitem', item, index) ); - return
  • {content}
    • ; + return ( +
  • + {content} +
    • + ); }; const createItems = () => { From 7f606791d54084652091ee126fe47ccc78d6176e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20Piaggio?= Date: Wed, 7 Aug 2024 15:18:22 -0400 Subject: [PATCH 06/96] avoid droppoints within undroppable node, not around (#7005) --- components/lib/tree/UITreeNode.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js index 8f655e23f4..fd1b00d85a 100644 --- a/components/lib/tree/UITreeNode.js +++ b/components/lib/tree/UITreeNode.js @@ -977,7 +977,7 @@ export const UITreeNode = React.memo((props) => { const node = createNode(); - if (props.dragdropScope && !props.disabled && props.node.droppable) { + if (props.dragdropScope && !props.disabled && (!props.parent || props.parent.droppable)) { const beforeDropPoint = createDropPoint(-1); const afterDropPoint = props.last ? createDropPoint(1) : null; From f3a761051a285015badd5e9924c27214934eb33b Mon Sep 17 00:00:00 2001 From: Matthew Date: Thu, 8 Aug 2024 07:35:06 -0400 Subject: [PATCH 07/96] Fix typos in DataTable documentation (#7006) Located at DataTable -> Filter -> Basic --- components/doc/datatable/filter/basicdoc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc/datatable/filter/basicdoc.js b/components/doc/datatable/filter/basicdoc.js index f0932fb8e2..b8eeed62dd 100644 --- a/components/doc/datatable/filter/basicdoc.js +++ b/components/doc/datatable/filter/basicdoc.js @@ -590,7 +590,7 @@ export default function BasicFilterDemo() {

    Data filtering is enabled by defining the filters property referring to a DataTableFilterMeta instance. Each column to filter also requires filter to be enabled. Built-in filter element is a input field and - using filterElement, it is possible to customize the filtering with your own UI. Filter elements are display within a separe row when filterDisplay is defined as row. + using filterElement, it is possible to customize the filtering with your own UI. Filter elements are displayed within a separate row when filterDisplay is defined as row.

    The optional global filtering searches the data against a single value that is bound to the global key of the filters object. The fields to search against is defined with the globalFilterFields. From 7fb24b03114b35ec6c70aba7c292046347b7990b Mon Sep 17 00:00:00 2001 From: navedqb <109583873+navedqb@users.noreply.github.com> Date: Thu, 8 Aug 2024 17:05:40 +0530 Subject: [PATCH 08/96] fixes calendar not closing on escape key press (#7008) --- components/lib/calendar/Calendar.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 3fe463b84f..9950ab9196 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption, localeOptions } from '../api/Api'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMergeProps, useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect, useGlobalOnEscapeKey, ESC_KEY_HANDLING_PRIORITIES } from '../hooks/Hooks'; import { CalendarIcon } from '../icons/calendar'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronLeftIcon } from '../icons/chevronleft'; @@ -35,6 +35,14 @@ export const Calendar = React.memo( }; const { ptm, cx, isUnstyled } = CalendarBase.setMetaData(metaData); + useGlobalOnEscapeKey({ + callback: () => { + hide(); + }, + when: overlayVisibleState, + priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, 0] + }); + useHandleStyle(CalendarBase.css.styles, isUnstyled, { name: 'calendar' }); const elementRef = React.useRef(null); const overlayRef = React.useRef(null); From bdf4a429d618da930ebff8362fa9e89f7384efed Mon Sep 17 00:00:00 2001 From: Melloware Date: Fri, 9 Aug 2024 08:26:58 -0400 Subject: [PATCH 09/96] Update bug_report.yml --- .github/ISSUE_TEMPLATE/bug_report.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 0430b27917..1682917278 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -29,7 +29,7 @@ body: id: system-info attributes: label: System Information - description: Output of `npx envinfo --system --npmPackages primereact,react --binaries --browsers` + description: Output of `npx envinfo --system --npmPackages primereact,react,tailwindcss --binaries --browsers` placeholder: > System:... Binaries:... From ecd4e964a8948c032dc72f77e95661aaf7acafd5 Mon Sep 17 00:00:00 2001 From: Melloware Date: Sat, 10 Aug 2024 09:27:37 -0400 Subject: [PATCH 10/96] Fix #7016: Revert CascadeSelect type for input (#7019) --- components/lib/cascadeselect/cascadeselect.d.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts index 62b5cc1366..7dc3f9d7b0 100644 --- a/components/lib/cascadeselect/cascadeselect.d.ts +++ b/components/lib/cascadeselect/cascadeselect.d.ts @@ -12,7 +12,6 @@ import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition- import { APIOptions } from '../api/api'; import { ComponentHooks } from '../componentbase/componentbase'; import { CSSTransitionProps } from '../csstransition'; -import { InputText, InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PassThroughOptions } from '../passthrough'; import { SelectItemOptionsType } from '../selectitem/selectitem'; import { IconType, PassThroughType } from '../utils/utils'; @@ -78,7 +77,7 @@ export interface CascadeSelectPassThroughOptions { /** * Uses to pass attributes to the input's DOM element. */ - input?: InputTextPassThroughOptions; + input?: CascadeSelectPassThroughType>; /** * Uses to pass attributes to the label's DOM element. */ @@ -353,9 +352,9 @@ export declare class CascadeSelect extends React.Component Date: Sat, 10 Aug 2024 13:28:11 +0000 Subject: [PATCH 11/96] Update API doc --- components/doc/common/apidoc/index.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 91e47b2d6b..150a7bd1ed 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -9145,7 +9145,7 @@ { "name": "getInput", "parameters": [], - "returnType": "ForwardRefExoticComponent>", + "returnType": "HTMLInputElement", "description": "Used to get input element." }, { @@ -9845,7 +9845,7 @@ "name": "input", "optional": true, "readonly": false, - "type": "InputTextPassThroughOptions", + "type": "CascadeSelectPassThroughType>", "description": "Uses to pass attributes to the input's DOM element." }, { From 69873b240b0449ced1ed1bafe6e800f2de9766ff Mon Sep 17 00:00:00 2001 From: chaowss <147555653+chaowss@users.noreply.github.com> Date: Sun, 11 Aug 2024 05:50:56 -0600 Subject: [PATCH 12/96] fixes issue primefaces#7014: inserting mentions results in duplicated text (#7017) * fixes issue primefaces#7014: inserting mentions results in duplicated text The issue was that event.target is not the prompt form but actually a list item element, which doesn't have the selectionStart attribute. I've also added a change where inserting the mention in front of a space does not result in a double space. * check to add space only if space is at beginning of nextText --- components/lib/mention/Mention.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js index 9c95fce699..16e02389c4 100644 --- a/components/lib/mention/Mention.js +++ b/components/lib/mention/Mention.js @@ -208,8 +208,10 @@ export const Mention = React.memo( }; const selectItem = (event, suggestion) => { - const value = inputRef.current.value; - const selectionStart = event.target.selectionStart; + const input = inputRef.current; + const value = input.value; + const selectionStart = input.selectionStart; + const spaceIndex = value.indexOf(' ', triggerState.index); const currentText = value.substring(triggerState.index, spaceIndex > -1 ? spaceIndex : selectionStart); const selectedText = formatValue(suggestion).replace(/\s+/g, ''); @@ -218,7 +220,8 @@ export const Mention = React.memo( const prevText = value.substring(0, triggerState.index); const nextText = value.substring(spaceIndex > -1 ? selectionStart : triggerState.index + currentText.length); - inputRef.current.value = `${prevText}${selectedText} ${nextText}`; + inputRef.current.value = nextText[0] === ' ' ? `${prevText}${selectedText}${nextText}` : `${prevText}${selectedText} ${nextText}`; + event.target = inputRef.current; props.onChange && props.onChange(event); } From 2323bcec843182e0585ce065203f1da221cbaa7e Mon Sep 17 00:00:00 2001 From: Ivan Date: Sun, 11 Aug 2024 13:51:57 +0200 Subject: [PATCH 13/96] Fix #7015: Calendar passthrough type definition and docs (#7021) * fix: Calendar passthrough type definition * fix: Calendar unstyled theme doc * fix: Calendar passthrough type definition * fix: Calendar unstyled theme doc --- .../doc/calendar/theming/tailwinddoc.js | 34 +++++++++---------- components/doc/common/apidoc/index.json | 2 +- components/lib/calendar/calendar.d.ts | 9 ++--- 3 files changed, 21 insertions(+), 24 deletions(-) diff --git a/components/doc/calendar/theming/tailwinddoc.js b/components/doc/calendar/theming/tailwinddoc.js index 2b8cbf948a..907058522a 100644 --- a/components/doc/calendar/theming/tailwinddoc.js +++ b/components/doc/calendar/theming/tailwinddoc.js @@ -24,14 +24,14 @@ const Tailwind = { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }) }), - input: { - root: ({ parent }) => ({ + input: ({ props }) => ({ + root: { className: classNames('font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none', 'hover:border-blue-500', { - 'rounded-lg': !parent.props.showIcon, - 'border-r-0 rounded-l-lg': parent.props.showIcon + 'rounded-lg': !props.showIcon, + 'border-r-0 rounded-l-lg': props.showIcon }) - }) - }, + } + }), dropdownButton: { root: ({ props }) => ({ className: classNames({ 'rounded-l-none': props.icon }) @@ -53,7 +53,7 @@ const Tailwind = { 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' ) }, - title: 'leading-8 mx-auto', + title: { className: 'leading-8 mx-auto' }, monthTitle: { className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500') }, @@ -70,9 +70,9 @@ const Tailwind = { table: { className: classNames('border-collapse w-full', 'my-2') }, - tableHeaderCell: 'p-2', - weekday: 'text-gray-600 dark:text-white/70', - day: 'p-2', + tableHeaderCell: { className: 'p-2' }, + weekday: { className: 'text-gray-600 dark:text-white/70' }, + day: { className: 'p-2' }, dayLabel: ({ context }) => ({ className: classNames( 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border', @@ -88,7 +88,7 @@ const Tailwind = { } ) }), - monthPicker: 'my-2', + monthPicker: { className: 'my-2' }, month: ({ context }) => ({ className: classNames( 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative', @@ -114,11 +114,11 @@ const Tailwind = { timePicker: { className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2') }, - separatorContainer: 'flex items-center flex-col px-2', - separator: 'text-xl', - hourPicker: 'flex items-center flex-col px-2', - minutePicker: 'flex items-center flex-col px-2', - ampmPicker: 'flex items-center flex-col px-2', + separatorContainer: { className: 'flex items-center flex-col px-2' }, + separator: { className: 'text-xl' }, + hourPicker: { className: 'flex items-center flex-col px-2' }, + minutePicker: { className: 'flex items-center flex-col px-2' }, + ampmPicker: { className: 'flex items-center flex-col px-2' }, incrementButton: { className: classNames( 'flex items-center justify-center cursor-pointer overflow-hidden relative', @@ -133,7 +133,7 @@ const Tailwind = { 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' ) }, - groupContainer: 'flex', + groupContainer: { className: 'flex' }, group: { className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0') }, diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 150a7bd1ed..cb2534c8eb 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -7120,7 +7120,7 @@ "name": "input", "optional": true, "readonly": false, - "type": "InputTextPassThroughOptions", + "type": "CalendarPassThroughType>", "description": "Uses to pass attributes to the InputText component." }, { diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts index ba6c06be0a..b2debf0f9f 100644 --- a/components/lib/calendar/calendar.d.ts +++ b/components/lib/calendar/calendar.d.ts @@ -11,7 +11,6 @@ import * as React from 'react'; import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition'; import { ComponentHooks } from '../componentbase/componentbase'; import { CSSTransitionProps } from '../csstransition'; -import { InputText, InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PassThroughOptions } from '../passthrough'; import { TooltipOptions } from '../tooltip/tooltipoptions'; import { FormEvent, Nullable } from '../ts-helpers'; @@ -40,12 +39,10 @@ export interface CalendarPassThroughOptions { root?: CalendarPassThroughType>; /** * Uses to pass attributes to the InputText component. - * @see {@link CalendarPassThroughType} */ - input?: InputTextPassThroughOptions; + input?: CalendarPassThroughType>; /** * Uses to pass attributes to the Button component. - * @see {@link CalendarPassThroughType} */ dropdownButton?: CalendarPassThroughType>; /** @@ -1080,9 +1077,9 @@ export declare class Calendar extends React.Component { public getElement(): HTMLSpanElement; /** * Used to get input element. - * @return {InputText} Input element + * @return {HTMLInputElement} Input element */ - public getInput(): typeof InputText; + public getInput(): HTMLInputElement; /** * Used to get overlay element. * @return {HTMLElement} Overlay element From ca5b5e793fe41b021f3c0c4c0a95afcdc3d1f1c1 Mon Sep 17 00:00:00 2001 From: Ivan Date: Sun, 11 Aug 2024 13:53:02 +0200 Subject: [PATCH 14/96] Fix #7016: CascadeSelect passthrough type definition and docs (#7020) * fix: CascadeSelect passthrough type definition * fix: CascadeSelect unstyled theme doc --- .../doc/cascadeselect/theming/tailwinddoc.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/components/doc/cascadeselect/theming/tailwinddoc.js b/components/doc/cascadeselect/theming/tailwinddoc.js index 1adc21703b..c8eb3f6f6d 100644 --- a/components/doc/cascadeselect/theming/tailwinddoc.js +++ b/components/doc/cascadeselect/theming/tailwinddoc.js @@ -7,10 +7,13 @@ export function TailwindDoc(props) { basic: ` const TRANSITIONS = { overlay: { - enterFromClass: 'opacity-0 scale-75', - enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in', - leaveActiveClass: 'transition-opacity duration-150 ease-linear', - leaveToClass: 'opacity-0' + timeout: 150, + classNames: { + enter: 'opacity-0 scale-75', + enterActive: 'transition-transform transition-opacity duration-150 ease-in', + exit: 'opacity-0', + exitActive: 'transition-opacity duration-150 ease-linear' + } } }; @@ -27,8 +30,8 @@ const Tailwind = { dropdownButton: { className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6') }, - panel: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md', - list: 'm-0 sm:p-0 list-none', + panel: { className: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md' }, + list: { className: 'm-0 sm:p-0 list-none' }, sublist: { className: classNames('block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md') }, @@ -41,7 +44,7 @@ const Tailwind = { content: { className: classNames('flex items-center overflow-hidden relative', 'py-3 px-5') }, - optionGroupIcon: 'ml-auto', + optionGroupIcon: { className: 'ml-auto' }, transition: TRANSITIONS.overlay } } From 9bc0a62ea968940895e94eda79cec3d31da82193 Mon Sep 17 00:00:00 2001 From: KumJungMin <37934668+KumJungMin@users.noreply.github.com> Date: Sun, 11 Aug 2024 20:53:47 +0900 Subject: [PATCH 15/96] fix: keep the selected row in its position when it gets focused below the previous row (#7022) --- components/lib/datatable/TableBody.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index e048746fbe..368d38effd 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -710,7 +710,7 @@ export const TableBody = React.memo( !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); } - droppedRowIndex.current = index + 1; + if (index + 1 !== draggedRowIndex.current) droppedRowIndex.current = index + 1; rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true'); !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom'); } From e1a2755de99668fddccb8a71f5776c0a82665cc9 Mon Sep 17 00:00:00 2001 From: Melloware Date: Sun, 11 Aug 2024 08:10:50 -0400 Subject: [PATCH 16/96] Fix #7023: Toast typescript def for content (#7024) --- components/lib/toast/toast.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/toast/toast.d.ts b/components/lib/toast/toast.d.ts index 8a3eb39df1..e876d99f8e 100644 --- a/components/lib/toast/toast.d.ts +++ b/components/lib/toast/toast.d.ts @@ -165,7 +165,7 @@ export interface ToastMessage { /** * Custom content of the message. If enabled, summary and details properties are ignored. */ - content?: React.ReactNode | undefined; + content?: React.ReactNode | ((props: ContentProps) => React.ReactNode); /** * Whether the message can be closed manually using the close icon. * @defaultValue true From 0d556583a8bf88f5a7245d41b6f075f3a6fc5aaa Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Sun, 11 Aug 2024 12:12:05 +0000 Subject: [PATCH 17/96] Update API doc --- components/doc/common/apidoc/index.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index cb2534c8eb..deba3c73d8 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -5946,7 +5946,7 @@ { "name": "getInput", "parameters": [], - "returnType": "ForwardRefExoticComponent>", + "returnType": "HTMLInputElement", "description": "Used to get input element." }, { @@ -50539,7 +50539,7 @@ "name": "content", "optional": true, "readonly": false, - "type": "ReactNode", + "type": "ReactNode | Function", "description": "Custom content of the message. If enabled, summary and details properties are ignored." }, { From 1ef9560d68f9373bee8f05b8aa975e2b18fd1f2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Francisco=20Mar=C3=ADn?= <50973629+franmc01@users.noreply.github.com> Date: Mon, 12 Aug 2024 06:30:48 -0500 Subject: [PATCH 18/96] docs: remove v-model example from iconfield documentation (#7027) --- components/doc/iconfield/basicdoc.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/doc/iconfield/basicdoc.js b/components/doc/iconfield/basicdoc.js index 95ea6f9162..956c9dce97 100644 --- a/components/doc/iconfield/basicdoc.js +++ b/components/doc/iconfield/basicdoc.js @@ -10,12 +10,12 @@ export function BasicDoc(props) { basic: ` - + - + `, javascript: ` @@ -29,12 +29,12 @@ export default function BasicDemo() {

    - + - +
    ) @@ -51,12 +51,12 @@ export default function BasicDemo() {
    - + - +
    ) @@ -75,12 +75,12 @@ export default function BasicDemo() {
    - + - +
    From fe26515d4412fb5fdddef13e0f55c97ec87ea5bb Mon Sep 17 00:00:00 2001 From: navedqb <109583873+navedqb@users.noreply.github.com> Date: Mon, 12 Aug 2024 17:01:22 +0530 Subject: [PATCH 19/96] remove v-model example from iconfield (#7029) --- components/doc/iconfield/templatedoc.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/doc/iconfield/templatedoc.js b/components/doc/iconfield/templatedoc.js index 566a8ecbf5..27c26d0fee 100644 --- a/components/doc/iconfield/templatedoc.js +++ b/components/doc/iconfield/templatedoc.js @@ -36,7 +36,7 @@ export function TemplateDoc(props) { - + `, javascript: ` @@ -75,7 +75,7 @@ export default function TemplateDemo() { - + ) } @@ -116,7 +116,7 @@ export default function TemplateDemo() { - + ) } @@ -159,7 +159,7 @@ export default function TemplateDemo() { - +
    From b72214dee4969ce9c27feaffb4aba5e3d3c3c1d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Francisco=20Mar=C3=ADn?= <50973629+franmc01@users.noreply.github.com> Date: Mon, 12 Aug 2024 12:28:34 -0500 Subject: [PATCH 20/96] fix(docs): add missing commas in code examples (#7030) --- components/doc/messages/severitydoc.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/components/doc/messages/severitydoc.js b/components/doc/messages/severitydoc.js index 019043d374..f4db4d3e09 100644 --- a/components/doc/messages/severitydoc.js +++ b/components/doc/messages/severitydoc.js @@ -27,8 +27,8 @@ msgs.current.show([ {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false}, {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false}, {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false}, - {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false} - {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false} + {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false}, + {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false}, {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false} ]); `, @@ -47,8 +47,8 @@ export default function SeverityDemo() { { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false }, { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false }, { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false }, - { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false } - { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false } + { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }, + { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false }, { sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false } ]); } @@ -73,8 +73,8 @@ export default function SeverityDemo() { {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content'}, {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content'}, {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content'}, - {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'} - {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content'} + {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'}, + {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content'}, {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content'} ]); }); From eeec2205a1c90cfecdf5576e0cbae3a366424167 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Francisco=20Mar=C3=ADn?= <50973629+franmc01@users.noreply.github.com> Date: Mon, 12 Aug 2024 18:34:26 +0000 Subject: [PATCH 21/96] refactor(panelmenu): replace submenuIcon with expandIcon and collapseIcon for enhanced customization --- components/lib/panelmenu/PanelMenu.js | 11 ++++++++++- components/lib/panelmenu/PanelMenuBase.js | 3 ++- components/lib/panelmenu/PanelMenuList.js | 3 ++- components/lib/panelmenu/PanelMenuSub.js | 11 +++++++++-- components/lib/panelmenu/panelmenu.d.ts | 16 ++++++++++++---- 5 files changed, 35 insertions(+), 9 deletions(-) diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index d497fc6419..f393af6322 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/components/lib/panelmenu/PanelMenu.js @@ -272,6 +272,7 @@ export const PanelMenu = React.memo( const key = item.id || idState + '_' + index; const active = isItemActive(item); + const iconClassName = classNames('p-menuitem-icon', item.icon); const headerIconProps = mergeProps( { @@ -279,7 +280,9 @@ export const PanelMenu = React.memo( }, getPTOptions(item, 'headerIcon', index) ); + const icon = IconUtils.getJSXIcon(item.icon, { ...headerIconProps }, { props }); + const submenuIconClassName = 'p-panelmenu-icon'; const headerSubmenuIconProps = mergeProps( { @@ -287,7 +290,13 @@ export const PanelMenu = React.memo( }, getPTOptions(item, 'headerSubmenuIcon', index) ); - const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || : props.submenuIcon || ); + + const submenuIcon = item.items && IconUtils.getJSXIcon( + active + ? (props.collapseIcon || ) + : (props.expandIcon || ) + ); + const headerLabelProps = mergeProps( { className: cx('headerLabel') diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js index 4ea25c7ecb..feb5ca99b7 100644 --- a/components/lib/panelmenu/PanelMenuBase.js +++ b/components/lib/panelmenu/PanelMenuBase.js @@ -75,7 +75,6 @@ export const PanelMenuBase = ComponentBase.extend({ id: null, model: null, style: null, - submenuIcon: null, expandedKeys: null, className: null, onExpandedKeysChange: null, @@ -83,6 +82,8 @@ export const PanelMenuBase = ComponentBase.extend({ onClose: null, multiple: false, transitionOptions: null, + expandIcon: null, + collapseIcon: null, children: undefined }, css: { diff --git a/components/lib/panelmenu/PanelMenuList.js b/components/lib/panelmenu/PanelMenuList.js index 53c9c3122b..eb92fdd904 100644 --- a/components/lib/panelmenu/PanelMenuList.js +++ b/components/lib/panelmenu/PanelMenuList.js @@ -429,7 +429,8 @@ export const PanelMenuList = React.memo((props) => { onItemToggle={onItemToggle} level={0} className={cx('submenu')} - submenuIcon={props.submenuIcon} + expandIcon={props.expandIcon} + collapseIcon={props.collapseIcon} root ptm={ptm} cx={cx} diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js index 82e3b0b80c..ad6036dc85 100644 --- a/components/lib/panelmenu/PanelMenuSub.js +++ b/components/lib/panelmenu/PanelMenuSub.js @@ -137,7 +137,8 @@ export const PanelMenuSub = React.memo( onItemToggle={onItemToggle} menuProps={props.menuProps} model={processedItem.items} - submenuIcon={props.submenuIcon} + expandIcon={props.expandIcon} + collapseIcon={props.collapseIcon} ptm={ptm} cx={cx} /> @@ -183,7 +184,13 @@ export const PanelMenuSub = React.memo( }, getPTOptions(processedItem, 'submenuicon', index) ); - const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.submenuIcon || : props.submenuIcon || ); + + const submenuIcon = item.items && IconUtils.getJSXIcon( + active + ? (props.collapseIcon || ) + : (props.expandIcon || ) + ); + const submenu = createSubmenu(processedItem, active); const actionProps = mergeProps( { diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts index fce7e95600..2cc4b195de 100644 --- a/components/lib/panelmenu/panelmenu.d.ts +++ b/components/lib/panelmenu/panelmenu.d.ts @@ -53,9 +53,13 @@ export interface PanelMenuPassThroughOptions { */ headerContent?: PanelMenuPassThroughType>; /** - * Uses to pass attributes to the submenuIcon's DOM element. + * Uses to pass attributes to the expand icon's DOM element. */ - submenuIcon?: PanelMenuPassThroughType | React.HTMLAttributes>; + expandIcon?: PanelMenuPassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the collapse icon's DOM element. + */ + collapseIcon?: PanelMenuPassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes to the header icon's DOM element. */ @@ -179,9 +183,13 @@ export interface PanelMenuProps extends Omit | undefined; + /** + * Icon used when a submenu is expanded. */ - submenuIcon?: IconType | undefined; + collapseIcon?: IconType | undefined; /** * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties. */ From 4da5a7b12a5fe3009577e3d4e8ad38aa7141e969 Mon Sep 17 00:00:00 2001 From: Ivan Date: Mon, 12 Aug 2024 22:08:19 +0200 Subject: [PATCH 22/96] Fix #7032: Passthrough options type and missing docs (#7033) * fix: InputOTP passthrough type definition * chore: Add section for theming in unstyled mode * chore: Add default styles to Tailwind theme * chore: Add inputotp to PrimeReactPTOptions --- components/doc/common/apidoc/index.json | 9 ++- .../doc/inputotp/theming/tailwinddoc.js | 55 +++++++++++++++++++ components/lib/api/api.d.ts | 5 ++ components/lib/inputotp/inputotp.d.ts | 5 +- components/lib/passthrough/tailwind/index.js | 12 ++++ pages/inputotp/index.js | 27 ++++++--- 6 files changed, 101 insertions(+), 12 deletions(-) create mode 100644 components/doc/inputotp/theming/tailwinddoc.js diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index deba3c73d8..9726735a73 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -1270,6 +1270,13 @@ "type": "InputNumberPassThroughOptions", "description": "Custom passthrough(pt) options for InputNumber." }, + { + "name": "inputotp", + "optional": true, + "readonly": false, + "type": "InputOtpPassThroughOptions", + "description": "Custom passthrough(pt) options for InputOtp." + }, { "name": "inputswitch", "optional": true, @@ -31588,7 +31595,7 @@ "name": "input", "optional": true, "readonly": false, - "type": "InputTextPassThroughOptions", + "type": "InputOtpPassThroughType>", "description": "Uses to pass attributes to the Tooltip component." }, { diff --git a/components/doc/inputotp/theming/tailwinddoc.js b/components/doc/inputotp/theming/tailwinddoc.js new file mode 100644 index 0000000000..84fc669f2c --- /dev/null +++ b/components/doc/inputotp/theming/tailwinddoc.js @@ -0,0 +1,55 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import Link from 'next/link'; + +export function TailwindDoc(props) { + const code = { + basic: ` +const Tailwind = { + inputotp: { + root: { className: 'flex items-center gap-2' }, + input: { + root: { + className: classNames( + 'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200', + 'hover:border-cyan-500', + 'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0' + ) + } + } + } +} + ` + }; + + const code2 = { + javascript: ` +import React, { useState } from 'react'; +import { InputOtp } from 'primereact/inputotp'; + +export default function BasicDemo() { + const [token, setTokens] = useState(); + + return ( +
    + setTokens(e.value)}/> +
    + ); +} + ` + }; + + return ( + <> + +

    + PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

    + +

    A playground sample with the pre-built Tailwind theme.

    + +     + + ); +} diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts index 3929d14b57..1204923e72 100644 --- a/components/lib/api/api.d.ts +++ b/components/lib/api/api.d.ts @@ -42,6 +42,7 @@ import { GalleriaPassThroughOptions } from '../galleria/galleria'; import { ImagePassThroughOptions } from '../image/image'; import { InplacePassThroughOptions } from '../inplace/inplace'; import { InputNumberPassThroughOptions } from '../inputnumber/inputnumber'; +import { InputOtpPassThroughOptions } from '../inputotp/inputotp'; import { InputSwitchPassThroughOptions } from '../inputswitch/inputswitch'; import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { InputTextareaPassThroughOptions } from '../inputtextarea/inputtextarea'; @@ -447,6 +448,10 @@ export interface PrimeReactPTOptions { * Custom passthrough(pt) options for InputNumber. */ inputnumber?: InputNumberPassThroughOptions; + /** + * Custom passthrough(pt) options for InputOtp. + */ + inputotp?: InputOtpPassThroughOptions; /** * Custom passthrough(pt) options for InputSwitch. */ diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts index 8229844be0..9466a9a12a 100644 --- a/components/lib/inputotp/inputotp.d.ts +++ b/components/lib/inputotp/inputotp.d.ts @@ -9,9 +9,7 @@ */ import * as React from 'react'; import { ComponentHooks } from '../componentbase/componentbase'; -import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PassThroughOptions } from '../passthrough'; -import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { PassThroughType, TemplateType } from '../utils/utils'; export declare type InputOtpPassThroughType = PassThroughType; @@ -35,9 +33,8 @@ export interface InputOtpPassThroughOptions { root?: InputOtpPassThroughType>; /** * Uses to pass attributes to the Tooltip component. - * @see {@link TooltipPassThroughOptions} */ - input?: InputTextPassThroughOptions; + input?: InputOtpPassThroughType>; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index bccd4f616c..ece250e1f8 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -891,6 +891,18 @@ const Tailwind = { inputmask: { root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md' }, + inputotp: { + root: { className: 'flex items-center gap-2' }, + input: { + root: { + className: classNames( + 'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200', + 'hover:border-cyan-500', + 'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0' + ) + } + } + }, rating: { root: ({ props }) => ({ className: classNames('relative flex items-center', 'gap-2', { diff --git a/pages/inputotp/index.js b/pages/inputotp/index.js index dd0dcda853..95c5c2ff85 100644 --- a/pages/inputotp/index.js +++ b/pages/inputotp/index.js @@ -1,14 +1,15 @@ -import { ImportDoc } from '@/components/doc/inputotp/importdoc'; +import DocApiTable from '@/components/doc/common/docapitable'; +import { DocComponent } from '@/components/doc/common/doccomponent'; +import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc'; import { BasicDoc } from '@/components/doc/inputotp/basicdoc'; -import { MaskDoc } from '@/components/doc/inputotp/maskdoc'; +import { ImportDoc } from '@/components/doc/inputotp/importdoc'; import { IntegerOnlyDoc } from '@/components/doc/inputotp/integeronlydoc'; -import { TemplateDoc } from '@/components/doc/inputotp/templatedoc'; -import { SampleDoc } from '@/components/doc/inputotp/sampledoc'; -import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc'; +import { MaskDoc } from '@/components/doc/inputotp/maskdoc'; import { Wireframe } from '@/components/doc/inputotp/pt/wireframe'; +import { SampleDoc } from '@/components/doc/inputotp/sampledoc'; +import { TemplateDoc } from '@/components/doc/inputotp/templatedoc'; import { StyledDoc } from '@/components/doc/inputotp/theming/styleddoc'; -import DocApiTable from '@/components/doc/common/docapitable'; -import { DocComponent } from '@/components/doc/common/doccomponent'; +import { TailwindDoc } from '@/components/doc/inputotp/theming/tailwinddoc'; const InputOtpDemo = () => { const docs = [ @@ -72,6 +73,18 @@ const InputOtpDemo = () => { id: 'styled', label: 'Styled', component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] } ]; From 9abd784be3be3a548fa680b2d3f9711ed87a817c Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Tue, 13 Aug 2024 11:56:42 +0530 Subject: [PATCH 23/96] fix: #7035, Dropdown: Remove unused depreciated code --- components/lib/dropdown/Dropdown.js | 75 ----------------------------- 1 file changed, 75 deletions(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index ea4baf02cb..47d55b0d1e 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -30,7 +30,6 @@ export const Dropdown = React.memo( const virtualScrollerRef = React.useRef(null); const searchTimeout = React.useRef(null); const searchValue = React.useRef(null); - const currentSearchChar = React.useRef(null); const isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy; const hasFilter = ObjectUtils.isNotEmpty(filterState); const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo; @@ -582,80 +581,6 @@ export const Dropdown = React.memo( return isOptionDisabled(option) ? findPrevOption(i) : option; }; - const search = (event) => { - if (searchTimeout.current) { - clearTimeout(searchTimeout.current); - } - - if (event.ctrlKey || event.metaKey || event.altKey) { - // ignore meta combinations like CTRL+F for browser search - return; - } - - const char = event.key; - - if (char.length !== 1 || props.editable) { - // only single character keys matter for searching - return; - } - - if (currentSearchChar.current === char) { - searchValue.current = char; - } else { - searchValue.current = searchValue.current ? searchValue.current + char : char; - } - - currentSearchChar.current = char; - - if (searchValue.current) { - const searchIndex = getSelectedOptionIndex(); - - setFocusedOptionIndex(props.optionGroupLabel ? searchIndex : searchIndex + 1); - } - - searchTimeout.current = setTimeout(() => { - searchValue.current = null; - }, 250); - }; - - const searchOptionInGroup = (index) => { - const searchIndex = index === -1 ? { group: 0, option: -1 } : index; - - for (let i = searchIndex.group; i < visibleOptions.length; i++) { - let groupOptions = getOptionGroupChildren(visibleOptions[i]); - - for (let j = searchIndex.group === i ? searchIndex.option + 1 : 0; j < groupOptions.length; j++) { - if (matchesSearchValue(groupOptions[j])) { - return groupOptions[j]; - } - } - } - - for (let i = 0; i <= searchIndex.group; i++) { - let groupOptions = getOptionGroupChildren(visibleOptions[i]); - - for (let j = 0; j < (searchIndex.group === i ? searchIndex.option : groupOptions.length); j++) { - if (matchesSearchValue(groupOptions[j])) { - return groupOptions[j]; - } - } - } - - return null; - }; - - const matchesSearchValue = (option) => { - let label = getOptionLabel(option); - - if (!label) { - return false; - } - - label = label.toLocaleLowerCase(props.filterLocale); - - return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale)); - }; - const onEditableInputChange = (event) => { !overlayVisibleState && show(); let searchIndex = null; From dfad4ff84046bd4620c85f5593e50a9981995b26 Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Tue, 13 Aug 2024 13:03:03 +0530 Subject: [PATCH 24/96] fix: #7037, Dropdown: Cannot change icon when expanding or collapsing options --- components/lib/dropdown/Dropdown.js | 3 ++- components/lib/dropdown/DropdownBase.js | 1 + components/lib/dropdown/dropdown.d.ts | 4 ++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index ea4baf02cb..c9592c372a 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -3,6 +3,7 @@ import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../a import { useHandleStyle } from '../componentbase/ComponentBase'; import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; import { ChevronDownIcon } from '../icons/chevrondown'; +import { ChevronUpIcon } from '../icons/chevronup'; import { SpinnerIcon } from '../icons/spinner'; import { TimesIcon } from '../icons/times'; import { OverlayService } from '../overlayservice/OverlayService'; @@ -1197,7 +1198,7 @@ export const Dropdown = React.memo( }, ptm('dropdownIcon') ); - const icon = props.dropdownIcon || ; + const icon = !overlayVisibleState ? props.dropdownIcon || : props.collapseIcon || ; const dropdownIcon = IconUtils.getJSXIcon(icon, { ...dropdownIconProps }, { props }); const ariaLabel = props.placeholder || props.ariaLabel; diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js index da0b19a2b3..88ac1e1563 100644 --- a/components/lib/dropdown/DropdownBase.js +++ b/components/lib/dropdown/DropdownBase.js @@ -170,6 +170,7 @@ export const DropdownBase = ComponentBase.extend({ dataKey: null, disabled: false, dropdownIcon: null, + collapseIcon: null, editable: false, emptyFilterMessage: null, highlightOnSelect: true, diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts index 5c2fd1a2af..de11f4e693 100644 --- a/components/lib/dropdown/dropdown.d.ts +++ b/components/lib/dropdown/dropdown.d.ts @@ -281,6 +281,10 @@ export interface DropdownProps extends Omit | undefined; + /** + * Icon of collapse action. + */ + collapseIcon?: IconType | undefined; /** * When present, custom value instead of predefined options can be entered using the editable input field. * @defaultValue false From 58f860dfd0a421857b5daf64369b1793b966a415 Mon Sep 17 00:00:00 2001 From: ANTONA09 Date: Tue, 13 Aug 2024 13:07:16 +0530 Subject: [PATCH 25/96] fix: #7037, Dropdown: Cannot change icon when expanding or collapsing options --- components/doc/common/apidoc/index.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 9726735a73..ffbff74cfd 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -23172,6 +23172,14 @@ "default": "", "description": "Icon of the dropdown." }, + { + "name": "collapseIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon of the collapse action." + }, { "name": "editable", "optional": true, From e69e01e3a02afde019333abd9b17f685a2a3bdad Mon Sep 17 00:00:00 2001 From: TikouWeb <38016624+TikouWeb@users.noreply.github.com> Date: Tue, 13 Aug 2024 11:51:29 +0200 Subject: [PATCH 26/96] Stepper: add header position --- components/doc/common/apidoc/index.json | 8 + components/doc/stepper/headerdoc.js | 154 ++ components/lib/stepper/Stepper.js | 2 +- components/lib/stepper/Stepper.spec.js | 138 ++ components/lib/stepper/StepperBase.js | 50 +- .../__snapshots__/Stepper.spec.js.snap | 656 ++++++++ components/lib/stepper/stepper.d.ts | 4 + pages/stepper/index.js | 6 + public/themes/arya-blue/theme.css | 22 +- public/themes/arya-green/theme.css | 22 +- public/themes/arya-orange/theme.css | 22 +- public/themes/arya-purple/theme.css | 1373 ++++++++++++++--- public/themes/bootstrap4-dark-blue/theme.css | 22 +- .../themes/bootstrap4-dark-purple/theme.css | 22 +- public/themes/bootstrap4-light-blue/theme.css | 22 +- .../themes/bootstrap4-light-purple/theme.css | 22 +- public/themes/fluent-light/theme.css | 22 +- public/themes/lara-dark-amber/theme.css | 22 +- public/themes/lara-dark-blue/theme.css | 22 +- public/themes/lara-dark-cyan/theme.css | 22 +- public/themes/lara-dark-green/theme.css | 22 +- public/themes/lara-dark-indigo/theme.css | 22 +- public/themes/lara-dark-pink/theme.css | 22 +- public/themes/lara-dark-purple/theme.css | 101 +- public/themes/lara-dark-teal/theme.css | 22 +- public/themes/lara-light-amber/theme.css | 22 +- public/themes/lara-light-blue/theme.css | 22 +- public/themes/lara-light-cyan/theme.css | 22 +- public/themes/lara-light-green/theme.css | 22 +- public/themes/lara-light-indigo/theme.css | 22 +- public/themes/lara-light-pink/theme.css | 22 +- public/themes/lara-light-purple/theme.css | 101 +- public/themes/lara-light-teal/theme.css | 22 +- public/themes/luna-amber/theme.css | 22 +- public/themes/luna-blue/theme.css | 22 +- public/themes/luna-green/theme.css | 22 +- public/themes/luna-pink/theme.css | 22 +- public/themes/md-dark-deeppurple/theme.css | 22 +- public/themes/md-dark-indigo/theme.css | 22 +- public/themes/md-light-deeppurple/theme.css | 22 +- public/themes/md-light-indigo/theme.css | 592 +++---- public/themes/mdc-dark-deeppurple/theme.css | 22 +- public/themes/mdc-dark-indigo/theme.css | 22 +- public/themes/mdc-light-deeppurple/theme.css | 22 +- public/themes/mdc-light-indigo/theme.css | 592 +++---- public/themes/mira/theme.css | 22 +- public/themes/nano/theme.css | 22 +- public/themes/nova-accent/theme.css | 22 +- public/themes/nova-alt/theme.css | 22 +- public/themes/nova/theme.css | 22 +- public/themes/rhea/theme.css | 22 +- public/themes/saga-blue/theme.css | 22 +- public/themes/saga-green/theme.css | 22 +- public/themes/saga-orange/theme.css | 22 +- public/themes/saga-purple/theme.css | 1373 ++++++++++++++--- public/themes/soho-dark/theme.css | 22 +- public/themes/soho-light/theme.css | 22 +- public/themes/tailwind-light/theme.css | 22 +- public/themes/vela-blue/theme.css | 22 +- public/themes/vela-green/theme.css | 22 +- public/themes/vela-orange/theme.css | 22 +- public/themes/vela-purple/theme.css | 1373 ++++++++++++++--- public/themes/viva-dark/theme.css | 22 +- public/themes/viva-light/theme.css | 22 +- 64 files changed, 6264 insertions(+), 1337 deletions(-) create mode 100644 components/doc/stepper/headerdoc.js create mode 100644 components/lib/stepper/Stepper.spec.js create mode 100644 components/lib/stepper/__snapshots__/Stepper.spec.js.snap diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index deba3c73d8..d424cfd01b 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -47308,6 +47308,14 @@ "default": "0", "description": "Active step index of stepper." }, + { + "name": "headerPosition", + "optional": true, + "readonly": false, + "type": "\"left\" | \"top\" | \"bottom\" | \"right\"", + "default": "", + "description": "Position of the stepper panel header relative to the step number." + }, { "name": "linear", "optional": true, diff --git a/components/doc/stepper/headerdoc.js b/components/doc/stepper/headerdoc.js new file mode 100644 index 0000000000..0bd13bd38e --- /dev/null +++ b/components/doc/stepper/headerdoc.js @@ -0,0 +1,154 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { Button } from '@/components/lib/button/Button'; +import { Stepper } from '@/components/lib/stepper/Stepper'; +import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel'; +import { useRef } from 'react'; + +export function HeaderDoc(props) { + const stepperRef = useRef([]); + + const code = { + basic: ` +
    Position top
    + (stepperRef.current[2] = ref)} headerPosition="top"> + + + + +
    Position right
    + (stepperRef.current[0] = ref)} headerPosition="right"> + + + + +
    Position left
    + (stepperRef.current[1] = ref)} headerPosition="left"> + + + + +
    Position bottom
    + (stepperRef.current[2] = ref)} headerPosition="bottom"> + + + + + `, + javascript: ` +import { useRef } from 'react'; +import { Stepper } from 'primereact/stepper'; +import { StepperPanel } from 'primereact/stepperpanel'; +import { Button } from 'primereact/button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
    Position top
    + (stepperRef.current[2] = ref)} headerPosition="top"> + + + + +
    Position right
    + (stepperRef.current[0] = ref)} headerPosition="right"> + + + + +
    Position left
    + (stepperRef.current[1] = ref)} headerPosition="left"> + + + + +
    Position bottom
    + (stepperRef.current[2] = ref)} headerPosition="bottom"> + + + + + ); +} + `, + typescript: ` +import { useRef } from 'react'; +import { Stepper } from 'primereact/stepper'; +import { StepperPanel } from 'primereact/stepperpanel'; +import { Button } from 'primereact/button'; + +export default function BasicDemo() { + const stepperRef = useRef(null); + + return ( +
    Position top
    + (stepperRef.current[2] = ref)} headerPosition="top"> + + + + +
    Position right
    + (stepperRef.current[0] = ref)} headerPosition="right"> + + + + +
    Position left
    + (stepperRef.current[1] = ref)} headerPosition="left"> + + + + +
    Position bottom
    + (stepperRef.current[2] = ref)} headerPosition="bottom"> + + + + + ); +} + ` + }; + + return ( + <> + +

    + Header position of the stepper can be customized using the headerPosition property. Default value is right. +

    +     +
    +
    Position top
    + (stepperRef.current[0] = ref)} headerPosition="top"> + + + + +
    Position right
    + (stepperRef.current[1] = ref)} headerPosition="right"> + + + + +
    Position left
    + (stepperRef.current[2] = ref)} headerPosition="left"> + + + + +
    Position bottom
    + (stepperRef.current[3] = ref)} headerPosition="bottom"> + + + + +
    +
    +
    + + + ); +} diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js index e169cbc9c0..d21d010133 100644 --- a/components/lib/stepper/Stepper.js +++ b/components/lib/stepper/Stepper.js @@ -135,7 +135,7 @@ export const Stepper = React.memo( return stepperPanels().map((step, index) => { const panelProps = mergeProps( { - className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index })), + className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index, headerPosition: props.headerPosition, orientation: props.orientation })), 'aria-current': isStepActive(index) && 'step', role: 'presentation', 'data-p-highlight': isStepActive(index), diff --git a/components/lib/stepper/Stepper.spec.js b/components/lib/stepper/Stepper.spec.js new file mode 100644 index 0000000000..25a6c0eb53 --- /dev/null +++ b/components/lib/stepper/Stepper.spec.js @@ -0,0 +1,138 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { snapshot } from '../../test'; +import { PrimeReactProvider } from '../api/Api'; +import { Stepper } from './Stepper'; +import { StepperPanel } from '../stepperpanel/StepperPanel'; + +function assertSelectedStep(expectedIndex) { + const selectedStep = screen.getByRole('presentation', { current: 'step' }); + const expectedStep = screen.getByRole('list').children.item(expectedIndex); + + expect(expectedStep).toEqual(selectedStep); +} + +describe('Stepper', () => { + snapshot( + + + , + 'default' + ); + snapshot( + + + + + , + 'panels' + ); + snapshot( + + + + + , + 'vertical' + ); + snapshot( + + + + , + 'header position top' + ); + snapshot( + + + + , + 'header position right' + ); + snapshot( + + + + , + 'header position bottom' + ); + snapshot( + + + + , + 'header position left' + ); + + test('Step should have aria step when selected', async () => { + render( + + + + + + ); + + await userEvent.click(screen.getByRole('tab', { name: '3 Header III' })); + assertSelectedStep(2); + }); + + test('Control active step from outside', async () => { + render( + + + + + + + + ); + + assertSelectedStep(3); + }); + + test('Changing step should trigger onChangeStep callback', async () => { + const onChangeStep = jest.fn(); + + render( + + + + + + ); + + await userEvent.click(screen.getByRole('tab', { name: '2 Header II' })); + expect(onChangeStep).toHaveBeenCalledTimes(1); + + await userEvent.click(screen.getByRole('tab', { name: '3 Header III' })); + expect(onChangeStep).toHaveBeenCalledTimes(2); + }); + + test('Change steps with buttons', async () => { + const stepperRef = React.createRef(null); + const onChangeStep = jest.fn(); + + render( +
    + + + + + + + +
    + ); + + const nextButton = screen.getByRole('button', { name: 'Next' }); + + await userEvent.click(nextButton); + + expect(onChangeStep).toHaveBeenCalledTimes(1); + + assertSelectedStep(1); + }); +}); diff --git a/components/lib/stepper/StepperBase.js b/components/lib/stepper/StepperBase.js index de2c602d20..832077751e 100644 --- a/components/lib/stepper/StepperBase.js +++ b/components/lib/stepper/StepperBase.js @@ -10,10 +10,11 @@ const classes = { }), nav: 'p-stepper-nav', stepper: { - header: ({ isStepActive, isItemDisabled, index }) => { + header: ({ isStepActive, isItemDisabled, index, headerPosition, orientation }) => { return classNames('p-stepper-header', { 'p-highlight': isStepActive(index), - 'p-disabled': isItemDisabled(index) + 'p-disabled': isItemDisabled(index), + [`p-stepper-header-${headerPosition}`]: orientation === 'horizontal' }); }, action: 'p-stepper-action p-component', @@ -45,42 +46,66 @@ const styles = ` list-style-type: none; overflow-x: auto; } - + .p-stepper-vertical .p-stepper-nav { flex-direction: column; } - + .p-stepper-header { position: relative; display: flex; flex: 1 1 auto; align-items: center; - + &:last-of-type { flex: initial; } } - + + .p-stepper-header-bottom { + align-items: flex-start; + } + + .p-stepper-header-top { + align-items: flex-end; + } + + .p-stepper-header-right, .p-stepper-header-left { + align-items: center; + } + .p-stepper-header .p-stepper-action { border: 0 none; display: inline-flex; align-items: center; text-decoration: none; cursor: pointer; - + &:focus-visible { @include focused(); } } - + + .p-stepper-header-bottom .p-stepper-action { + flex-direction: column; + } + + .p-stepper-header-top .p-stepper-action { + flex-direction: column-reverse; + } + + .p-stepper-header-left .p-stepper-action { + flex-direction: row-reverse; + } + .p-stepper.p-stepper-readonly .p-stepper-header { cursor: auto; } - + .p-stepper-header.p-highlight .p-stepper-action { cursor: default; } - + .p-stepper-title { display: block; white-space: nowrap; @@ -88,14 +113,14 @@ const styles = ` text-overflow: ellipsis; max-width: 100%; } - + .p-stepper-number { position: relative; display: flex; align-items: center; justify-content: center; } - + .p-stepper-separator { flex: 1 1 0; } @@ -107,6 +132,7 @@ export const StepperBase = ComponentBase.extend({ __TYPE: 'Stepper', activeStep: 0, orientation: 'horizontal', + headerPosition: 'right', linear: false, onChangeStep: null }, diff --git a/components/lib/stepper/__snapshots__/Stepper.spec.js.snap b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap new file mode 100644 index 0000000000..9e912e9ee5 --- /dev/null +++ b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap @@ -0,0 +1,656 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Stepper default 1`] = ` +
    +
    +
      +
      +
      +
    +`; + +exports[`Stepper header position bottom 1`] = ` +
    +
    +
      + + +
    +
    +
    + +
    +
    +
    +
    +`; + +exports[`Stepper header position left 1`] = ` +
    +
    +
      + + +
    +
    +
    + +
    +
    +
    +
    +`; + +exports[`Stepper header position right 1`] = ` +
    +
    +
      + + +
    +
    +
    + +
    +
    +
    +
    +`; + +exports[`Stepper header position top 1`] = ` +
    +
    +
      + + +
    +
    +
    + +
    +
    +
    +
    +`; + +exports[`Stepper panels 1`] = ` +
    +
    +
      + + + +
    +
    +
    + +
    +
    +
    +
    +`; + +exports[`Stepper vertical 1`] = ` +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +`; diff --git a/components/lib/stepper/stepper.d.ts b/components/lib/stepper/stepper.d.ts index 8f591b77b7..9d8454b7ab 100644 --- a/components/lib/stepper/stepper.d.ts +++ b/components/lib/stepper/stepper.d.ts @@ -109,6 +109,10 @@ export interface StepperProps { * @defaultValue horizontal */ orientation?: 'horizontal' | 'vertical' | undefined; + /** + * Position of the stepper panel header relative to the step number. + */ + headerPosition?: 'top' | 'right' | 'bottom' | 'left' | undefined; /** * Whether the steps are clickable or not. * @defaultValue false diff --git a/pages/stepper/index.js b/pages/stepper/index.js index 85d50c9672..69da8c0eb7 100644 --- a/pages/stepper/index.js +++ b/pages/stepper/index.js @@ -8,6 +8,7 @@ import { Wireframe } from '@/components/doc/stepper/pt/wireframe'; import { StyledDoc } from '@/components/doc/stepper/theming/styleddoc'; import { TailwindDoc } from '@/components/doc/stepper/theming/tailwinddoc'; import { VerticalDoc } from '@/components/doc/stepper/verticaldoc'; +import { HeaderDoc } from '@/components/doc/stepper/headerdoc'; const StepperDemo = () => { const docs = [ @@ -31,6 +32,11 @@ const StepperDemo = () => { label: 'Linear', component: LinearDoc }, + { + id: 'header', + label: 'Header', + component: HeaderDoc + }, { id: 'accessibility', label: 'Accessibility', diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index fac11bfa67..3bf5cbcaca 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 1ac25d3639..4151cade1a 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 20399a9050..05c614f0f3 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index df168d53fa..884da8bfc1 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -639,6 +639,7 @@ border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: #ba68c8; @@ -649,6 +650,15 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-cascadeselect.p-variant-filled { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -689,42 +699,62 @@ transition: box-shadow 0.2s; border-radius: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { - padding: 0.5rem 1rem; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child { + margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 1rem; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon { - width: 0.875rem; - height: 0.875rem; - } - .p-input-filled .p-cascadeselect { - background: #383838; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #383838; + .p-checkbox-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #383838; + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #383838; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #383838; background: #121212; @@ -733,6 +763,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,64 +774,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #383838; + background: #121212; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ba68c8; background: #ba68c8; } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #ba68c8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #a241b2; background: #a241b2; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ba68c8; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a241b2; - background: #a241b2; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ba68c8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a241b2; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ba68c8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #383838; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #a241b2; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ba68c8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #383838; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a241b2; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ba68c8; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(186, 104, 200, 0.16); + background: #383838; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #464646; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +959,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #121212; border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ba68c8; @@ -848,6 +1053,18 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-dropdown.p-variant-filled { + background: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -858,7 +1075,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -900,13 +1117,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -919,14 +1129,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -939,18 +1163,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #383838; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1017,14 +1229,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1035,27 +1283,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #ba68c8; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.87); + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #b052c0; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1069,6 +1315,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ba68c8; @@ -1082,6 +1329,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1095,28 +1351,16 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } ::-webkit-input-placeholder { @@ -1148,11 +1392,69 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + .p-inputotp-input { + text-align: center; + width: 2rem; + } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); border: 1px solid #383838; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1172,6 +1474,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1484,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1506,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1557,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #121212; border: 1px solid #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ba68c8; @@ -1251,8 +1661,14 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1278,22 +1694,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #ef9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); @@ -1310,9 +1716,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1320,7 +1723,11 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1351,19 +1758,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1790,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #383838; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #383838; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #383838; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1412,10 +1814,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 20px; height: 20px; } + .p-radiobutton .p-radiobutton-input { + 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: 2px solid #383838; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #383838; background: #121212; @@ -1424,15 +1866,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ba68c8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - border-color: #ba68c8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,31 +1874,51 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ba68c8; background: #ba68c8; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #ba68c8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #a241b2; background: #a241b2; - color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #383838; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ba68c8; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #383838; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #a241b2; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #383838; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ba68c8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #383838; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #a241b2; } .p-rating { @@ -1610,6 +2064,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.5rem; } + .p-treeselect.p-variant-filled { + background: #383838; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } .p-treeselect .p-treeselect-label { padding: 0.5rem 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1709,44 +2172,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #383838; } - .p-togglebutton.p-button { + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-togglebutton-input { + cursor: pointer; + } + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { + 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 #383838; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #1e1e1e; border: 1px solid #383838; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #383838; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ba68c8; border-color: #ba68c8; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #383838; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #b052c0; border-color: #b052c0; color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -1902,296 +2399,296 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; background: #78909c; border: 1px solid #78909c; } - .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } - .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } - .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } - .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } - .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } - .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } - .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } - .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { color: #121212; background: #ffe082; border: 1px solid #ffe082; } - .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } - .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } - .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } - .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } - .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } - .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } - .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; @@ -3303,6 +3800,62 @@ .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(186, 104, 200, 0.24); } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + .p-treenode-content { + display: flex; + align-items: center; + } + .p-tree-filter { + width: 100%; + } + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-tree-loading { + position: relative; + min-height: 4rem; + } + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } .p-tree { border: 1px solid #383838; background: #1e1e1e; @@ -3351,7 +3904,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; } - .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { @@ -3401,6 +3954,133 @@ .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background: rgba(162, 65, 178, 0.16); } + .p-treetable { + position: relative; + } + .p-treetable > .p-treetable-wrapper { + overflow: auto; + } + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + .p-treetable-selectable .p-treetable-tbody > tr { + cursor: pointer; + } + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + vertical-align: middle; + overflow: hidden; + position: relative; + } + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + .p-treetable-resizable .p-treetable-thead > tr > th, + .p-treetable-resizable .p-treetable-tfoot > tr > td, + .p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + .p-treetable-resizable .p-resizable-column { + background-clip: padding-box; + position: relative; + } + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + /* Scrollable */ + .p-treetable-scrollable-wrapper { + position: relative; + } + .p-treetable-scrollable-header, + .p-treetable-scrollable-footer { + overflow: hidden; + border: 0 none; + } + .p-treetable-scrollable-body { + overflow: auto; + position: relative; + } + .p-treetable-virtual-table { + position: absolute; + } + /* Frozen Columns */ + .p-treetable-frozen-view .p-treetable-scrollable-body { + overflow: hidden; + } + .p-treetable-unfrozen-view { + position: absolute; + top: 0px; + left: 0px; + } + /* Reorder */ + .p-treetable-reorder-indicator-up, + .p-treetable-reorder-indicator-down { + position: absolute; + display: none; + } + /* Loader */ + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + /* Alignment */ + .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-left, + .p-treetable .p-treetable-tfoot > tr > td.p-align-left { + text-align: left; + justify-content: flex-start; + } + .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-right, + .p-treetable .p-treetable-tfoot > tr > td.p-align-right { + text-align: right; + justify-content: flex-end; + } + .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-center, + .p-treetable .p-treetable-tfoot > tr > td.p-align-center { + text-align: center; + justify-content: center; + } .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3868,6 +4548,129 @@ .p-splitter .p-splitter-gutter-resizing { background: #383838; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(186, 104, 200, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ba68c8; + } + .p-stepper .p-stepper-panels { + background: #1e1e1e; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #383838; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1e1e1e; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper.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.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ba68c8; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #383838; border: 0 none; @@ -3877,6 +4680,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #383838; @@ -5973,6 +6838,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-metergroup .p-metergroup-meter-container { + background: #383838; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ba68c8; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ba68c8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 859d39faa3..75bf9a0d44 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -4634,7 +4634,6 @@ transition: color 0.15s, box-shadow 0.15s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: color 0.15s, box-shadow 0.15s; @@ -4644,6 +4643,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e3f3fe; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #8dd0ff; color: #151515; @@ -4696,6 +4713,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index e8a9ae7893..cdbb5b5a00 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -4634,7 +4634,6 @@ transition: color 0.15s, box-shadow 0.15s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: color 0.15s, box-shadow 0.15s; @@ -4644,6 +4643,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #f0e6f5; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #c298d8; color: #151515; @@ -4696,6 +4713,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index 5942ab4554..bf9de02c08 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -4634,7 +4634,6 @@ transition: box-shadow 0.15s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: box-shadow 0.15s; @@ -4644,6 +4643,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #007bff; color: #ffffff; @@ -4696,6 +4713,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index f8b3e08823..d94e86f579 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -4634,7 +4634,6 @@ transition: box-shadow 0.15s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: box-shadow 0.15s; @@ -4644,6 +4643,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #883cae; color: #ffffff; @@ -4696,6 +4713,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index ec2d677319..4dbdd58faa 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -4552,7 +4552,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #605e5c; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4562,6 +4561,24 @@ outline-offset: 0; box-shadow: inset 0 0 0 1px #605e5c; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #edebe9; color: #323130; @@ -4611,6 +4628,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css index 2aa05c9327..e0c8a37616 100644 --- a/public/themes/lara-dark-amber/theme.css +++ b/public/themes/lara-dark-amber/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(251, 191, 36, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css index f6a7b079de..6a50bb1a19 100644 --- a/public/themes/lara-dark-blue/theme.css +++ b/public/themes/lara-dark-blue/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css index 3e908649e5..7fa8b0a0a0 100644 --- a/public/themes/lara-dark-cyan/theme.css +++ b/public/themes/lara-dark-cyan/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(34, 211, 238, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css index 29e909ff43..3e28119b33 100644 --- a/public/themes/lara-dark-green/theme.css +++ b/public/themes/lara-dark-green/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(52, 211, 153, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css index b6aa40d136..252fdde978 100644 --- a/public/themes/lara-dark-indigo/theme.css +++ b/public/themes/lara-dark-indigo/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(129, 140, 248, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css index 57b0f9b580..1c8f7149c7 100644 --- a/public/themes/lara-dark-pink/theme.css +++ b/public/themes/lara-dark-pink/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(244, 114, 182, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css index 6f33f43d5e..b4326b02e8 100644 --- a/public/themes/lara-dark-purple/theme.css +++ b/public/themes/lara-dark-purple/theme.css @@ -1,8 +1,8 @@ :root { - font-family: "InterVariable", sans-serif; + font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family: "InterVariable", sans-serif; + --font-family: "Inter var", sans-serif; --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --surface-a: #1f2937; --surface-b: #111827; @@ -52,7 +52,7 @@ } @font-face { - font-family: "InterVariable"; + font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: normal; @@ -60,7 +60,7 @@ src: url("./fonts/InterVariable.woff2") format("woff2"); } @font-face { - font-family: "InterVariable"; + font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: italic; @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(167, 139, 250, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; @@ -4700,6 +4720,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2); } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #424b57; @@ -6936,15 +7018,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #a78bfa; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css index e89a7a2be2..fdd0dce130 100644 --- a/public/themes/lara-dark-teal/theme.css +++ b/public/themes/lara-dark-teal/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2); } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css index 5c4342bec5..d22e471c0b 100644 --- a/public/themes/lara-light-amber/theme.css +++ b/public/themes/lara-light-amber/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fef08a; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #fffbeb; color: #b45309; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css index e12775ae77..40251a4958 100644 --- a/public/themes/lara-light-blue/theme.css +++ b/public/themes/lara-light-blue/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #bfdbfe; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #eff6ff; color: #1d4ed8; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css index a76102b063..6889a00966 100644 --- a/public/themes/lara-light-cyan/theme.css +++ b/public/themes/lara-light-cyan/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a5f3fc; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #ecfeff; color: #0e7490; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css index 5bb9652ee5..9ee30d5a87 100644 --- a/public/themes/lara-light-green/theme.css +++ b/public/themes/lara-light-green/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a7f3d0; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #f0fdfa; color: #047857; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css index 20d30330db..d31625bf05 100644 --- a/public/themes/lara-light-indigo/theme.css +++ b/public/themes/lara-light-indigo/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c7d2fe; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #eef2ff; color: #4338ca; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css index 12ed791723..ca9d17463c 100644 --- a/public/themes/lara-light-pink/theme.css +++ b/public/themes/lara-light-pink/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #fbcfe8; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #fdf2f8; color: #be185d; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css index 305973982b..7935b7c8ff 100644 --- a/public/themes/lara-light-purple/theme.css +++ b/public/themes/lara-light-purple/theme.css @@ -1,8 +1,8 @@ :root { - font-family: "InterVariable", sans-serif; + font-family: "Inter var", sans-serif; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; font-variation-settings: normal; - --font-family: "InterVariable", sans-serif; + --font-family: "Inter var", sans-serif; --font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --surface-a: #ffffff; --surface-b: #f9fafb; @@ -52,7 +52,7 @@ } @font-face { - font-family: "InterVariable"; + font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: normal; @@ -60,7 +60,7 @@ src: url("./fonts/InterVariable.woff2") format("woff2"); } @font-face { - font-family: "InterVariable"; + font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: italic; @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ddd6fe; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #f5f3ff; color: #6d28d9; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; @@ -4700,6 +4720,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ddd6fe; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #e5e7eb; @@ -6936,15 +7018,6 @@ .p-tabview .p-tabview-nav li .p-tabview-nav-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } - .p-tabview .p-tabview-nav .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: #8b5cf6; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; } diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css index f04b1b3429..7169d95cb5 100644 --- a/public/themes/lara-light-teal/theme.css +++ b/public/themes/lara-light-teal/theme.css @@ -4617,7 +4617,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6b7280; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4627,6 +4626,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #99f6e4; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #0f766e; color: #0f766e; @@ -4679,6 +4696,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index a7520e7515..00206adce8 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #888888; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #ffe082; color: #212529; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index e71fb82bfa..530aa4fff4 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #888888; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #81d4fa; color: #212529; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 46fec49cdc..604f7ff69b 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #888888; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #c5e1a5; color: #212529; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 370f57e02a..b1f04a265d 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #888888; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem white; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #f48fb1; color: #212529; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 7d008fbd5a..058a813bce 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(206, 147, 216, 0.16); color: #CE93D8; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 1dcbd52c90..11a1385742 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 562e4e64e5..e3f46e689c 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(0, 0, 0, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(103, 58, 183, 0.12); color: #673AB7; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 82f3d31c23..e3f46e689c 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -10,7 +10,7 @@ --surface-f: #ffffff; --text-color: rgba(0, 0, 0, 0.87); --text-color-secondary: rgba(0, 0, 0, 0.6); - --primary-color: #3F51B5; + --primary-color: #673AB7; --primary-color-text: #ffffff; --surface-0: #ffffff; --surface-50: #fafafa; @@ -44,8 +44,8 @@ --surface-hover: rgba(0, 0, 0, 0.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); - --highlight-bg: rgba(63, 81, 181, 0.12); - --highlight-text-color: #3F51B5; + --highlight-bg: rgba(103, 58, 183, 0.12); + --highlight-text-color: #673AB7; color-scheme: light; } @@ -181,16 +181,16 @@ --red-700:#ab2f26; --red-800:#86251e; --red-900:#621b16; - --primary-50:#f5f6fb; - --primary-100:#d1d5ed; - --primary-200:#acb4df; - --primary-300:#8893d1; - --primary-400:#6372c3; - --primary-500:#3f51b5; - --primary-600:#36459a; - --primary-700:#2c397f; - --primary-800:#232d64; - --primary-900:#192048; + --primary-50:#f7f5fb; + --primary-100:#dbd0ee; + --primary-200:#beaae0; + --primary-300:#a185d2; + --primary-400:#845fc5; + --primary-500:#673ab7; + --primary-600:#58319c; + --primary-700:#482980; + --primary-800:#392065; + --primary-900:#291749; } .p-editor-container .p-editor-toolbar { @@ -274,22 +274,22 @@ .p-editor-container .ql-snow.ql-toolbar button.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #3F51B5; + color: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #3F51B5; + stroke: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #3F51B5; + fill: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #3F51B5; + color: #673AB7; } @layer primereact { @@ -372,7 +372,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.5rem 0; @@ -388,8 +388,8 @@ .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.5rem 1rem; margin-right: 0.5rem; - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; border-radius: 4px; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { @@ -422,8 +422,8 @@ background: rgba(0, 0, 0, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -439,7 +439,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-datepicker { padding: 0.5rem; @@ -500,7 +500,7 @@ } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { - color: #3F51B5; + color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -527,8 +527,8 @@ border: 1px solid transparent; } .p-datepicker table td > span.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker table td > span:focus { outline: 0 none; @@ -541,8 +541,8 @@ border-color: rgb(0, 0, 0); } .p-datepicker table td.p-datepicker-today > span.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; @@ -595,8 +595,8 @@ border-radius: 4px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker .p-yearpicker { margin: 0.5rem 0; @@ -607,8 +607,8 @@ border-radius: 4px; } .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-left: 1px solid rgba(0, 0, 0, 0.12); @@ -668,7 +668,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-cascadeselect.p-variant-filled { background-color: #f5f5f5; @@ -726,11 +726,11 @@ margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -814,22 +814,22 @@ height: 14px; } .p-checkbox.p-highlight .p-checkbox-box { - border-color: #3F51B5; - background: #3F51B5; + border-color: #673AB7; + background: #673AB7; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: rgba(0, 0, 0, 0.87); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - border-color: #3F51B5; - background: #3F51B5; + border-color: #673AB7; + background: #673AB7; color: #ffffff; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; @@ -838,25 +838,25 @@ background-color: #f5f5f5; } .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #ececec; } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #ececec; } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-checkbox { position: relative; @@ -876,13 +876,13 @@ background-color: #f5f5f5; } .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #ececec; } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-chips { display: inline-flex; @@ -930,7 +930,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-chips .p-chips-multiple-container { padding: 0.5rem 1rem; @@ -1071,7 +1071,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-dropdown.p-variant-filled { background: #f5f5f5; @@ -1156,11 +1156,11 @@ margin-bottom: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1304,17 +1304,17 @@ transition-duration: 0.2s; } .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + background: rgba(103, 58, 183, 0.5); } .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #3F51B5; + background: #673AB7; transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + background: rgba(103, 58, 183, 0.5); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { outline: 0 none; @@ -1344,7 +1344,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-inputtext.p-invalid.p-component { border-color: #b00020; @@ -1511,8 +1511,8 @@ margin-bottom: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; @@ -1527,7 +1527,7 @@ background: transparent; } .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1545,7 +1545,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-listbox.p-invalid { border-color: #b00020; @@ -1574,8 +1574,8 @@ background: rgba(0, 0, 0, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-multiselect { display: inline-flex; @@ -1679,7 +1679,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-multiselect.p-variant-filled { background: #f5f5f5; @@ -1785,11 +1785,11 @@ margin-bottom: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1823,7 +1823,7 @@ } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); } .p-password-panel .p-password-meter .p-password-strength.weak { background: #d32f2f; @@ -1892,27 +1892,27 @@ width: 10px; height: 10px; transition-duration: 0.2s; - background-color: #3F51B5; + background-color: #673AB7; } .p-radiobutton.p-highlight .p-radiobutton-box { - border-color: #3F51B5; + border-color: #673AB7; background: #ffffff; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border-color: rgba(0, 0, 0, 0.87); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - border-color: #3F51B5; + border-color: #673AB7; background: #ffffff; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #3F51B5; + background-color: #673AB7; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; @@ -1962,7 +1962,7 @@ border-radius: 50%; } .p-rating .p-rating-item .p-rating-icon { - color: #3F51B5; + color: #673AB7; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1.143rem; } @@ -1979,10 +1979,10 @@ box-shadow: none; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { - color: #3F51B5; + color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { - color: #3F51B5; + color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; @@ -2049,7 +2049,7 @@ .p-slider .p-slider-handle { height: 20px; width: 20px; - background: #3F51B5; + background: #673AB7; border: 0 none; border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -2060,10 +2060,10 @@ box-shadow: none; } .p-slider .p-slider-range { - background: #3F51B5; + background: #673AB7; } .p-slider:not(.p-disabled) .p-slider-handle:hover { - background: #3F51B5; + background: #673AB7; border-color: 0 none; } .p-treeselect { @@ -2079,7 +2079,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 2rem; @@ -2261,14 +2261,14 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { color: #ffffff; - background: #3F51B5; + background: #673AB7; border: 0 none; padding: 0.714rem 1rem; font-size: 1rem; @@ -2276,28 +2276,28 @@ border-radius: 4px; } .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.92); + background: rgba(103, 58, 183, 0.92); color: #ffffff; border-color: transparent; } .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.68); + background: rgba(103, 58, 183, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-outlined { background-color: transparent; - color: #3F51B5; + color: #673AB7; border: 0 none; } .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border: 0 none; } .p-button.p-button-outlined:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border: 0 none; } .p-button.p-button-outlined.p-button-plain { @@ -2314,17 +2314,17 @@ } .p-button.p-button-text { background-color: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-button.p-button-text:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border-color: transparent; } .p-button.p-button-text:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border-color: transparent; } .p-button.p-button-text.p-button-plain { @@ -2363,7 +2363,7 @@ min-width: 1rem; height: 1rem; line-height: 1rem; - color: #3F51B5; + color: #673AB7; background-color: #ffffff; } .p-button.p-button-raised { @@ -2427,11 +2427,11 @@ } .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; - background: #ff4081; + background: #4CAF50; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } @@ -2439,39 +2439,39 @@ box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; - color: #ff4081; + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; + background: rgba(76, 175, 80, 0.04); + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); - color: #ff4081; + background: rgba(76, 175, 80, 0.16); + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; - color: #ff4081; + color: #4CAF50; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); + background: rgba(76, 175, 80, 0.04); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #ffffff; @@ -2762,13 +2762,13 @@ color: #212121; } .p-button.p-button-link { - color: #3F51B5; + color: #673AB7; background: transparent; border: transparent; } .p-button.p-button-link:not(:disabled):hover { background: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-button.p-button-link:not(:disabled):hover .p-button-label { @@ -2781,7 +2781,7 @@ } .p-button.p-button-link:not(:disabled):active { background: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-splitbutton { @@ -2789,16 +2789,16 @@ } .p-splitbutton.p-button-outlined > .p-button { background-color: transparent; - color: #3F51B5; + color: #673AB7; border: 0 none; } .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; } .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; } .p-splitbutton.p-button-outlined.p-button-plain > .p-button { color: rgba(0, 0, 0, 0.6); @@ -2814,17 +2814,17 @@ } .p-splitbutton.p-button-text > .p-button { background-color: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text > .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text.p-button-plain > .p-button { @@ -2872,31 +2872,31 @@ } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; - color: #ff4081; + color: #4CAF50; border: 0 none; } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; + background: rgba(76, 175, 80, 0.04); + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); - color: #ff4081; + background: rgba(76, 175, 80, 0.16); + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-text > .p-button { background-color: transparent; - color: #ff4081; + color: #4CAF50; border-color: transparent; } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); + background: rgba(76, 175, 80, 0.04); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; @@ -3055,11 +3055,11 @@ .p-speeddial-action { width: 3rem; height: 3rem; - background: #ff4081; + background: #4CAF50; color: #fff; } .p-speeddial-action:hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); color: #fff; } .p-speeddial-direction-up .p-speeddial-item { @@ -3143,8 +3143,8 @@ background: #ececec; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-paginator-top { border-width: 0 0 1px 0; @@ -3198,8 +3198,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); margin-left: 0.5rem; } .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { @@ -3273,22 +3273,22 @@ font-weight: 500; } .p-datatable .p-datatable-tbody > tr > td.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-datatable-tbody > tr.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { outline: 0.15rem solid transparent; outline-offset: -0.15rem; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 rgba(63, 81, 181, 0.12); + box-shadow: inset 0 2px 0 0 rgba(103, 58, 183, 0.12); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 rgba(63, 81, 181, 0.12); + box-shadow: inset 0 -2px 0 0 rgba(103, 58, 183, 0.12); } .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { background: rgba(0, 0, 0, 0.04); @@ -3311,7 +3311,7 @@ color: rgba(0, 0, 0, 0.87); } .p-datatable .p-column-resizer-helper { - background: #3F51B5; + background: #673AB7; } .p-datatable .p-datatable-scrollable-header, .p-datatable .p-datatable-scrollable-footer { @@ -3387,14 +3387,14 @@ background: rgba(0, 0, 0, 0.02); } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { - color: #3F51B5; + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { background: rgba(0, 0, 0, 0.02); @@ -3430,7 +3430,7 @@ padding: 1.25rem 1.25rem; } .p-datatable-drag-selection-helper { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-dataview .p-paginator-top { border-width: 0 0 1px 0; @@ -3530,8 +3530,8 @@ color: rgba(0, 0, 0, 0.6); } .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-column-filter-menu-button:focus-visible { outline: 0 none; @@ -3578,8 +3578,8 @@ border-radius: 0; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); @@ -3677,11 +3677,11 @@ background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); @@ -3694,11 +3694,11 @@ color: rgba(0, 0, 0, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { - color: rgba(30, 39, 86, 0.12); + color: rgba(49, 27, 86, 0.12); } .p-organizationchart .p-organizationchart-line-down { background: rgba(0, 0, 0, 0.12); @@ -3798,9 +3798,9 @@ border-radius: 50%; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: rgba(63, 81, 181, 0.12); - border-color: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + border-color: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -3862,11 +3862,11 @@ background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-tree-container { margin: 0; @@ -3976,16 +3976,16 @@ color: rgba(0, 0, 0, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { - color: #3F51B5; + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { - color: #3F51B5; + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -4020,7 +4020,7 @@ height: 0.5rem; } .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { - background: rgba(50, 65, 145, 0.12); + background: rgba(82, 46, 146, 0.12); } .p-treetable { position: relative; @@ -4204,8 +4204,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); margin-left: 0.5rem; } .p-treetable .p-sortable-column:not(.p-highlight):hover { @@ -4264,14 +4264,14 @@ outline-offset: -0.15rem; } .p-treetable .p-treetable-tbody > tr.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { - color: #3F51B5; + color: #673AB7; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -4281,7 +4281,7 @@ color: rgba(0, 0, 0, 0.87); } .p-treetable .p-column-resizer-helper { - background: #3F51B5; + background: #673AB7; } .p-treetable .p-treetable-scrollable-header, .p-treetable .p-treetable-scrollable-footer { @@ -4319,14 +4319,14 @@ background: rgba(0, 0, 0, 0.02); } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded { background: rgba(0, 0, 0, 0.02); @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(0, 0, 0, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,9 +4654,27 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-stepper .p-stepper-header.p-highlight .p-stepper-title { color: rgba(0, 0, 0, 0.87); @@ -4668,7 +4685,7 @@ box-shadow: none; } .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { - background-color: #3F51B5; + background-color: #673AB7; } .p-stepper .p-stepper-panels { background: #ffffff; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; @@ -4714,7 +4734,7 @@ margin-inline-start: calc(1.75rem + 2px); } .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { - background-color: #3F51B5; + background-color: #673AB7; } .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { padding-left: 3rem; @@ -4817,21 +4837,21 @@ box-shadow: inset none; } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { - background: rgba(63, 81, 181, 0.04); + background: rgba(103, 58, 183, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.6); } .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); - color: #3F51B5; + color: #673AB7; } .p-tabview .p-tabview-close { margin-left: 0.5rem; } .p-tabview .p-tabview-nav-btn.p-link { background: #ffffff; - color: #3F51B5; + color: #673AB7; width: 3rem; 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); border-radius: 0; @@ -4992,7 +5012,7 @@ padding: 1rem; } .p-overlaypanel .p-overlaypanel-close { - background: #3F51B5; + background: #673AB7; color: #ffffff; width: 2.5rem; height: 2.5rem; @@ -5003,7 +5023,7 @@ right: -1.25rem; } .p-overlaypanel .p-overlaypanel-close:enabled:hover { - background: rgba(63, 81, 181, 0.92); + background: rgba(103, 58, 183, 0.92); color: #ffffff; } .p-overlaypanel:after { @@ -6227,8 +6247,8 @@ box-shadow: none; } .p-steps .p-steps-item.p-highlight .p-steps-number { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-steps .p-steps-item.p-highlight .p-steps-title { font-weight: 500; @@ -6275,14 +6295,14 @@ box-shadow: inset none; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { - background: rgba(63, 81, 181, 0.04); + background: rgba(103, 58, 183, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.6); } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); - color: #3F51B5; + color: #673AB7; } .p-tieredmenu { padding: 0.5rem 0; @@ -6660,8 +6680,8 @@ background: #ececec; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { margin-right: 0.5rem; @@ -6679,8 +6699,8 @@ background: rgba(255, 255, 255, 0.6); } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-galleria .p-galleria-thumbnail-container { background: rgba(0, 0, 0, 0.9); @@ -6820,10 +6840,10 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-scrolltop.p-link { - background: #ff4081; + background: #4CAF50; } .p-scrolltop.p-link:hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); } .p-scrolltop .p-scrolltop-icon { font-size: 1.5rem; @@ -6841,7 +6861,7 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } .p-tag { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -6887,18 +6907,18 @@ box-shadow: none; } .p-metergroup .p-metergroup-meter-container { - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); border-radius: 4px; } .p-metergroup .p-metergroup-meter { border: 0 none; - background: #3F51B5; + background: #673AB7; } .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { line-height: 4px; } .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #3F51B5; + background: #673AB7; width: 0.5rem; height: 0.5rem; border-radius: 100%; @@ -6947,13 +6967,13 @@ .p-progressbar { border: 0 none; height: 4px; - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); border-radius: 4px; } .p-progressbar .p-progressbar-value { border: 0 none; margin: 0; - background: #3F51B5; + background: #673AB7; } .p-progressbar .p-progressbar-label { color: #ffffff; @@ -6971,7 +6991,7 @@ font-size: 1rem; } .p-badge { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -6980,7 +7000,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ff4081; + background-color: #4CAF50; color: #ffffff; } .p-badge.p-badge-success { @@ -7012,7 +7032,7 @@ line-height: 3rem; } .p-tag { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -7076,14 +7096,14 @@ opacity: 0.38; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7095,7 +7115,7 @@ .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7163,22 +7183,22 @@ min-width: auto; } .p-button:not(:disabled):focus { - background: rgba(63, 81, 181, 0.76); + background: rgba(103, 58, 183, 0.76); } .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.68); + background: rgba(103, 58, 183, 0.68); } .p-button .p-ink { background-color: rgba(255, 255, 255, 0.32); } .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-button.p-button-outlined { box-shadow: inset 0 0 0 1px; @@ -7207,19 +7227,19 @@ 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.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { - background: rgba(255, 64, 129, 0.76); + background: rgba(76, 175, 80, 0.76); } .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); } .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus { - background: rgba(255, 64, 129, 0.12); + background: rgba(76, 175, 80, 0.12); } .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); } .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink { - background-color: rgba(255, 64, 129, 0.16); + background-color: rgba(76, 175, 80, 0.16); } .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { background: rgba(33, 150, 243, 0.76); @@ -7361,8 +7381,8 @@ border-color: rgba(0, 0, 0, 0.87); } .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { - border-color: #3F51B5; - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + border-color: #673AB7; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -7387,7 +7407,7 @@ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38); } .p-datepicker table td.p-datepicker-today.p-highlight { - box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 0 1px rgba(103, 58, 183, 0.12); } .p-calendar.p-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; @@ -7406,7 +7426,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7418,7 +7438,7 @@ .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7463,7 +7483,7 @@ background-image: none; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: #ff4081; + background: #4CAF50; color: #ffffff; } .p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger { @@ -7474,17 +7494,17 @@ border: 0 none; } .p-cascadeselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-cascadeselect-item-content .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7496,7 +7516,7 @@ .p-input-filled .p-cascadeselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7564,7 +7584,7 @@ border-color: #757575; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); @@ -7573,10 +7593,10 @@ border-color: #757575; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { - border-color: #3F51B5; + border-color: #673AB7; } .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #ffffff; @@ -7610,14 +7630,14 @@ } } .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7629,7 +7649,7 @@ .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7681,10 +7701,10 @@ background-color: rgba(0, 0, 0, 0.03); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 #3F51B5; + box-shadow: inset 0 2px 0 0 #673AB7; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 #3F51B5; + box-shadow: inset 0 -2px 0 0 #673AB7; } .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; @@ -7694,17 +7714,17 @@ border: 0 none; } .p-dropdown:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-dropdown-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7716,7 +7736,7 @@ .p-input-filled .p-dropdown:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7749,15 +7769,15 @@ padding: 1rem; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: #ff4081; + background: #4CAF50; color: #ffffff; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); color: #ffffff; } .p-inputtext:enabled:focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-inputtext:enabled:focus.p-invalid { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; @@ -7767,7 +7787,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7775,7 +7795,7 @@ .p-input-filled .p-inputtext:enabled:hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; @@ -7800,7 +7820,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7851,13 +7871,13 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0 0 1px 10px rgba(0, 0, 0, 0.04); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-fieldset .p-fieldset-legend { border: 0 none; @@ -7882,7 +7902,7 @@ } .p-float-label input:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { - color: #3F51B5; + color: #673AB7; } .p-input-filled .p-float-label .p-inputtext { padding-top: 1.5rem; @@ -7899,13 +7919,13 @@ background: transparent; } .p-listbox .p-listbox-list .p-listbox-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-listbox .p-listbox-list .p-listbox-item:focus { background: rgba(0, 0, 0, 0.12); } .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-megamenu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); @@ -7927,16 +7947,16 @@ border: 0 none; } .p-multiselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { background: rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); @@ -7946,7 +7966,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7958,7 +7978,7 @@ .p-input-filled .p-multiselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -8017,7 +8037,7 @@ background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-paginator { justify-content: flex-end; @@ -8026,7 +8046,7 @@ background: rgba(0, 0, 0, 0.12); } .p-paginator .p-paginator-element:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-input-filled .p-password.p-invalid > .p-inputtext { border-color: transparent; @@ -8097,7 +8117,7 @@ background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-progressbar { border-radius: 0; @@ -8116,7 +8136,7 @@ border: 2px solid #757575; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); @@ -8125,10 +8145,10 @@ border: 2px solid #757575; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { - border-color: #3F51B5; + border-color: #673AB7; } .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { background-color: #ffffff; @@ -8152,7 +8172,7 @@ justify-content: center; } .p-rating .p-rating-item:focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-rating .p-rating-item:focus.p-rating-cancel-item { background: rgba(176, 0, 32, 0.12); @@ -8179,16 +8199,16 @@ transform: scale(0.7); } .p-slider .p-slider-handle:focus { - box-shadow: 0 0 1px 10px rgba(255, 64, 129, 0.2); + box-shadow: 0 0 1px 10px rgba(76, 175, 80, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-splitbutton.p-button-outlined > .p-button { box-shadow: inset 0 0 0 1px; @@ -8216,10 +8236,10 @@ 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-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { - background: rgba(255, 64, 129, 0.12); + background: rgba(76, 175, 80, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); @@ -8259,7 +8279,7 @@ height: 1.714rem; } .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { - background-color: #3F51B5; + background-color: #673AB7; color: #ffffff; } .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { @@ -8311,7 +8331,7 @@ background: rgba(0, 0, 0, 0.12); } .p-steps .p-steps-item.p-highlight .p-steps-number { - background-color: #3F51B5; + background-color: #673AB7; color: #ffffff; } .p-steps .p-steps-item.p-highlight .p-steps-title { @@ -8329,10 +8349,10 @@ border-radius: 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link > .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabview .p-tabview-nav .p-tabview-ink-bar { z-index: 1; @@ -8340,7 +8360,7 @@ position: absolute; bottom: 0; height: 2px; - background-color: #3F51B5; + background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } .p-tieredmenu .p-menuitem-link:focus { @@ -8360,7 +8380,7 @@ background: rgba(0, 0, 0, 0.12); } .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; @@ -8370,17 +8390,17 @@ border: 0 none; } .p-treeselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-treeselect-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8392,7 +8412,7 @@ .p-input-filled .p-treeselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -8464,20 +8484,20 @@ border-radius: 0; } .p-tabmenu .p-tabmenu-nav li .p-menuitem-link > .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar { display: block; position: absolute; bottom: 0; height: 2px; - background-color: #3F51B5; + background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 2699cf1b7e..134671f4ef 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(206, 147, 216, 0.16); color: #CE93D8; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 4990ea9bc3..4256d03e1e 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 973f5719bf..b4ced7a4f7 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(0, 0, 0, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,6 +4654,24 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(103, 58, 183, 0.12); color: #673AB7; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index d851bdb639..b4ced7a4f7 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -10,7 +10,7 @@ --surface-f: #ffffff; --text-color: rgba(0, 0, 0, 0.87); --text-color-secondary: rgba(0, 0, 0, 0.6); - --primary-color: #3F51B5; + --primary-color: #673AB7; --primary-color-text: #ffffff; --surface-0: #ffffff; --surface-50: #fafafa; @@ -44,8 +44,8 @@ --surface-hover: rgba(0, 0, 0, 0.04); --focus-ring: none; --maskbg: rgba(0, 0, 0, 0.32); - --highlight-bg: rgba(63, 81, 181, 0.12); - --highlight-text-color: #3F51B5; + --highlight-bg: rgba(103, 58, 183, 0.12); + --highlight-text-color: #673AB7; color-scheme: light; } @@ -181,16 +181,16 @@ --red-700:#ab2f26; --red-800:#86251e; --red-900:#621b16; - --primary-50:#f5f6fb; - --primary-100:#d1d5ed; - --primary-200:#acb4df; - --primary-300:#8893d1; - --primary-400:#6372c3; - --primary-500:#3f51b5; - --primary-600:#36459a; - --primary-700:#2c397f; - --primary-800:#232d64; - --primary-900:#192048; + --primary-50:#f7f5fb; + --primary-100:#dbd0ee; + --primary-200:#beaae0; + --primary-300:#a185d2; + --primary-400:#845fc5; + --primary-500:#673ab7; + --primary-600:#58319c; + --primary-700:#482980; + --primary-800:#392065; + --primary-900:#291749; } .p-editor-container .p-editor-toolbar { @@ -274,22 +274,22 @@ .p-editor-container .ql-snow.ql-toolbar button.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected { - color: #3F51B5; + color: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { - stroke: #3F51B5; + stroke: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill { - fill: #3F51B5; + fill: #673AB7; } .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label, .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label { - color: #3F51B5; + color: #673AB7; } @layer primereact { @@ -372,7 +372,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token { padding: 0.375rem 0; @@ -388,8 +388,8 @@ .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token { padding: 0.375rem 0.75rem; margin-right: 0.5rem; - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; border-radius: 4px; } .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon { @@ -422,8 +422,8 @@ background: rgba(0, 0, 0, 0.04); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group { margin: 0; @@ -439,7 +439,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-datepicker { padding: 0.5rem; @@ -500,7 +500,7 @@ } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover, .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover { - color: #3F51B5; + color: #673AB7; } .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month { margin-right: 0.5rem; @@ -527,8 +527,8 @@ border: 1px solid transparent; } .p-datepicker table td > span.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker table td > span:focus { outline: 0 none; @@ -541,8 +541,8 @@ border-color: rgb(0, 0, 0); } .p-datepicker table td.p-datepicker-today > span.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker .p-datepicker-buttonbar { padding: 0.75rem 0; @@ -595,8 +595,8 @@ border-radius: 4px; } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker .p-yearpicker { margin: 0.5rem 0; @@ -607,8 +607,8 @@ border-radius: 4px; } .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-left: 1px solid rgba(0, 0, 0, 0.12); @@ -668,7 +668,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-cascadeselect.p-variant-filled { background-color: #f5f5f5; @@ -726,11 +726,11 @@ margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -814,22 +814,22 @@ height: 14px; } .p-checkbox.p-highlight .p-checkbox-box { - border-color: #3F51B5; - background: #3F51B5; + border-color: #673AB7; + background: #673AB7; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { border-color: rgba(0, 0, 0, 0.87); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - border-color: #3F51B5; - background: #3F51B5; + border-color: #673AB7; + background: #673AB7; color: #ffffff; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #b00020; @@ -838,25 +838,25 @@ background-color: #f5f5f5; } .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #ececec; } .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f5f5f5; } .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #ececec; } .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-checkbox { position: relative; @@ -876,13 +876,13 @@ background-color: #f5f5f5; } .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #ececec; } .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { - background: #3F51B5; + background: #673AB7; } .p-chips { display: inline-flex; @@ -930,7 +930,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-chips .p-chips-multiple-container { padding: 0.375rem 0.75rem; @@ -1071,7 +1071,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-dropdown.p-variant-filled { background: #f5f5f5; @@ -1156,11 +1156,11 @@ margin-bottom: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1304,17 +1304,17 @@ transition-duration: 0.2s; } .p-inputswitch.p-highlight .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + background: rgba(103, 58, 183, 0.5); } .p-inputswitch.p-highlight .p-inputswitch-slider:before { - background: #3F51B5; + background: #673AB7; transform: translateX(1.5rem); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { background: rgba(0, 0, 0, 0.38); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { - background: rgba(63, 81, 181, 0.5); + background: rgba(103, 58, 183, 0.5); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { outline: 0 none; @@ -1344,7 +1344,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-inputtext.p-invalid.p-component { border-color: #b00020; @@ -1511,8 +1511,8 @@ margin-bottom: 0; } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; @@ -1527,7 +1527,7 @@ background: transparent; } .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1545,7 +1545,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-listbox.p-invalid { border-color: #b00020; @@ -1574,8 +1574,8 @@ background: rgba(0, 0, 0, 0.04); } .p-mention-panel .p-mention-items .p-mention-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-multiselect { display: inline-flex; @@ -1679,7 +1679,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-multiselect.p-variant-filled { background: #f5f5f5; @@ -1785,11 +1785,11 @@ margin-bottom: 0; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(0, 0, 0, 0.87); @@ -1823,7 +1823,7 @@ } .p-password-panel .p-password-meter { margin-bottom: 0.5rem; - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); } .p-password-panel .p-password-meter .p-password-strength.weak { background: #d32f2f; @@ -1892,27 +1892,27 @@ width: 10px; height: 10px; transition-duration: 0.2s; - background-color: #3F51B5; + background-color: #673AB7; } .p-radiobutton.p-highlight .p-radiobutton-box { - border-color: #3F51B5; + border-color: #673AB7; background: #ffffff; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { border-color: rgba(0, 0, 0, 0.87); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { - border-color: #3F51B5; + border-color: #673AB7; background: #ffffff; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { - background-color: #3F51B5; + background-color: #673AB7; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #b00020; @@ -1962,7 +1962,7 @@ border-radius: 50%; } .p-rating .p-rating-item .p-rating-icon { - color: #3F51B5; + color: #673AB7; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); font-size: 1rem; } @@ -1979,10 +1979,10 @@ box-shadow: none; } .p-rating .p-rating-item.p-rating-item-active .p-rating-icon { - color: #3F51B5; + color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { - color: #3F51B5; + color: #673AB7; } .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel { color: #b00020; @@ -2049,7 +2049,7 @@ .p-slider .p-slider-handle { height: 20px; width: 20px; - background: #3F51B5; + background: #673AB7; border: 0 none; border-radius: 50%; transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); @@ -2060,10 +2060,10 @@ box-shadow: none; } .p-slider .p-slider-range { - background: #3F51B5; + background: #673AB7; } .p-slider:not(.p-disabled) .p-slider-handle:hover { - background: #3F51B5; + background: #673AB7; border-color: 0 none; } .p-treeselect { @@ -2079,7 +2079,7 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.75rem; @@ -2261,14 +2261,14 @@ outline: 0 none; outline-offset: 0; box-shadow: none; - border-color: #3F51B5; + border-color: #673AB7; } .p-togglebutton.p-invalid > .p-button { border-color: #b00020; } .p-button { color: #ffffff; - background: #3F51B5; + background: #673AB7; border: 0 none; padding: 0.571rem 0.75rem; font-size: 1rem; @@ -2276,28 +2276,28 @@ border-radius: 4px; } .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.92); + background: rgba(103, 58, 183, 0.92); color: #ffffff; border-color: transparent; } .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.68); + background: rgba(103, 58, 183, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-outlined { background-color: transparent; - color: #3F51B5; + color: #673AB7; border: 0 none; } .p-button.p-button-outlined:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border: 0 none; } .p-button.p-button-outlined:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border: 0 none; } .p-button.p-button-outlined.p-button-plain { @@ -2314,17 +2314,17 @@ } .p-button.p-button-text { background-color: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-button.p-button-text:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border-color: transparent; } .p-button.p-button-text:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border-color: transparent; } .p-button.p-button-text.p-button-plain { @@ -2363,7 +2363,7 @@ min-width: 1rem; height: 1rem; line-height: 1rem; - color: #3F51B5; + color: #673AB7; background-color: #ffffff; } .p-button.p-button-raised { @@ -2427,11 +2427,11 @@ } .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; - background: #ff4081; + background: #4CAF50; border: 0 none; } .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); color: #ffffff; border-color: transparent; } @@ -2439,39 +2439,39 @@ box-shadow: none; } .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); color: #ffffff; border-color: transparent; } .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; - color: #ff4081; + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; + background: rgba(76, 175, 80, 0.04); + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); - color: #ff4081; + background: rgba(76, 175, 80, 0.16); + color: #4CAF50; border: 0 none; } .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; - color: #ff4081; + color: #4CAF50; border-color: transparent; } .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); + background: rgba(76, 175, 80, 0.04); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #ffffff; @@ -2762,13 +2762,13 @@ color: #212121; } .p-button.p-button-link { - color: #3F51B5; + color: #673AB7; background: transparent; border: transparent; } .p-button.p-button-link:not(:disabled):hover { background: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-button.p-button-link:not(:disabled):hover .p-button-label { @@ -2781,7 +2781,7 @@ } .p-button.p-button-link:not(:disabled):active { background: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-splitbutton { @@ -2789,16 +2789,16 @@ } .p-splitbutton.p-button-outlined > .p-button { background-color: transparent; - color: #3F51B5; + color: #673AB7; border: 0 none; } .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; } .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; } .p-splitbutton.p-button-outlined.p-button-plain > .p-button { color: rgba(0, 0, 0, 0.6); @@ -2814,17 +2814,17 @@ } .p-splitbutton.p-button-text > .p-button { background-color: transparent; - color: #3F51B5; + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text > .p-button:not(:disabled):hover { - background: rgba(63, 81, 181, 0.04); - color: #3F51B5; + background: rgba(103, 58, 183, 0.04); + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); - color: #3F51B5; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; border-color: transparent; } .p-splitbutton.p-button-text.p-button-plain > .p-button { @@ -2872,31 +2872,31 @@ } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button { background-color: transparent; - color: #ff4081; + color: #4CAF50; border: 0 none; } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); - color: #ff4081; + background: rgba(76, 175, 80, 0.04); + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); - color: #ff4081; + background: rgba(76, 175, 80, 0.16); + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-text > .p-button { background-color: transparent; - color: #ff4081; + color: #4CAF50; border-color: transparent; } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover { - background: rgba(255, 64, 129, 0.04); + background: rgba(76, 175, 80, 0.04); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); border-color: transparent; - color: #ff4081; + color: #4CAF50; } .p-splitbutton.p-button-info.p-button-outlined > .p-button { background-color: transparent; @@ -3055,11 +3055,11 @@ .p-speeddial-action { width: 3rem; height: 3rem; - background: #ff4081; + background: #4CAF50; color: #fff; } .p-speeddial-action:hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); color: #fff; } .p-speeddial-direction-up .p-speeddial-item { @@ -3143,8 +3143,8 @@ background: #ececec; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-paginator-top { border-width: 0 0 1px 0; @@ -3198,8 +3198,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); margin-left: 0.5rem; } .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover { @@ -3273,22 +3273,22 @@ font-weight: 500; } .p-datatable .p-datatable-tbody > tr > td.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-datatable-tbody > tr.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu { outline: 0.15rem solid transparent; outline-offset: -0.15rem; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 rgba(63, 81, 181, 0.12); + box-shadow: inset 0 2px 0 0 rgba(103, 58, 183, 0.12); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 rgba(63, 81, 181, 0.12); + box-shadow: inset 0 -2px 0 0 rgba(103, 58, 183, 0.12); } .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover { background: rgba(0, 0, 0, 0.04); @@ -3311,7 +3311,7 @@ color: rgba(0, 0, 0, 0.87); } .p-datatable .p-column-resizer-helper { - background: #3F51B5; + background: #673AB7; } .p-datatable .p-datatable-scrollable-header, .p-datatable .p-datatable-scrollable-footer { @@ -3387,14 +3387,14 @@ background: rgba(0, 0, 0, 0.02); } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { - color: #3F51B5; + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded { background: rgba(0, 0, 0, 0.02); @@ -3430,7 +3430,7 @@ padding: 0.9375rem 0.9375rem; } .p-datatable-drag-selection-helper { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-dataview .p-paginator-top { border-width: 0 0 1px 0; @@ -3530,8 +3530,8 @@ color: rgba(0, 0, 0, 0.6); } .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-column-filter-menu-button:focus-visible { outline: 0 none; @@ -3578,8 +3578,8 @@ border-radius: 0; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(0, 0, 0, 0.87); @@ -3677,11 +3677,11 @@ background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) { background: rgba(0, 0, 0, 0.02); @@ -3694,11 +3694,11 @@ color: rgba(0, 0, 0, 0.87); } .p-organizationchart .p-organizationchart-node-content.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { - color: rgba(30, 39, 86, 0.12); + color: rgba(49, 27, 86, 0.12); } .p-organizationchart .p-organizationchart-line-down { background: rgba(0, 0, 0, 0.12); @@ -3798,9 +3798,9 @@ border-radius: 50%; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: rgba(63, 81, 181, 0.12); - border-color: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + border-color: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -3862,11 +3862,11 @@ background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); } .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-tree-container { margin: 0; @@ -3976,16 +3976,16 @@ color: rgba(0, 0, 0, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { - color: #3F51B5; + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover, .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover { - color: #3F51B5; + color: #673AB7; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -4020,7 +4020,7 @@ height: 0.5rem; } .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { - background: rgba(50, 65, 145, 0.12); + background: rgba(82, 46, 146, 0.12); } .p-treetable { position: relative; @@ -4204,8 +4204,8 @@ height: 1.143rem; min-width: 1.143rem; line-height: 1.143rem; - color: #3F51B5; - background: rgba(63, 81, 181, 0.12); + color: #673AB7; + background: rgba(103, 58, 183, 0.12); margin-left: 0.5rem; } .p-treetable .p-sortable-column:not(.p-highlight):hover { @@ -4264,14 +4264,14 @@ outline-offset: -0.15rem; } .p-treetable .p-treetable-tbody > tr.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { - color: #3F51B5; + color: #673AB7; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { background: rgba(0, 0, 0, 0.04); @@ -4281,7 +4281,7 @@ color: rgba(0, 0, 0, 0.87); } .p-treetable .p-column-resizer-helper { - background: #3F51B5; + background: #673AB7; } .p-treetable .p-treetable-scrollable-header, .p-treetable .p-treetable-scrollable-footer { @@ -4319,14 +4319,14 @@ background: rgba(0, 0, 0, 0.02); } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover { - color: #3F51B5; + color: #673AB7; } .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded { background: rgba(0, 0, 0, 0.02); @@ -4645,7 +4645,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(0, 0, 0, 0.87); font-weight: 500; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4655,9 +4654,27 @@ outline-offset: 0; box-shadow: none; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-stepper .p-stepper-header.p-highlight .p-stepper-title { color: rgba(0, 0, 0, 0.87); @@ -4668,7 +4685,7 @@ box-shadow: none; } .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { - background-color: #3F51B5; + background-color: #673AB7; } .p-stepper .p-stepper-panels { background: #ffffff; @@ -4707,6 +4724,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; @@ -4714,7 +4734,7 @@ margin-inline-start: calc(1.75rem + 2px); } .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { - background-color: #3F51B5; + background-color: #673AB7; } .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { padding-left: 3rem; @@ -4817,21 +4837,21 @@ box-shadow: inset none; } .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { - background: rgba(63, 81, 181, 0.04); + background: rgba(103, 58, 183, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.6); } .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); - color: #3F51B5; + color: #673AB7; } .p-tabview .p-tabview-close { margin-left: 0.5rem; } .p-tabview .p-tabview-nav-btn.p-link { background: #ffffff; - color: #3F51B5; + color: #673AB7; width: 2.25rem; 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); border-radius: 0; @@ -4992,7 +5012,7 @@ padding: 0.75rem; } .p-overlaypanel .p-overlaypanel-close { - background: #3F51B5; + background: #673AB7; color: #ffffff; width: 2rem; height: 2rem; @@ -5003,7 +5023,7 @@ right: -1rem; } .p-overlaypanel .p-overlaypanel-close:enabled:hover { - background: rgba(63, 81, 181, 0.92); + background: rgba(103, 58, 183, 0.92); color: #ffffff; } .p-overlaypanel:after { @@ -6227,8 +6247,8 @@ box-shadow: none; } .p-steps .p-steps-item.p-highlight .p-steps-number { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-steps .p-steps-item.p-highlight .p-steps-title { font-weight: 500; @@ -6275,14 +6295,14 @@ box-shadow: inset none; } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { - background: rgba(63, 81, 181, 0.04); + background: rgba(103, 58, 183, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.6); } .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); - color: #3F51B5; + color: #673AB7; } .p-tieredmenu { padding: 0.5rem 0; @@ -6660,8 +6680,8 @@ background: #ececec; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { margin-right: 0.5rem; @@ -6679,8 +6699,8 @@ background: rgba(255, 255, 255, 0.6); } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(63, 81, 181, 0.12); - color: #3F51B5; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; } .p-galleria .p-galleria-thumbnail-container { background: rgba(0, 0, 0, 0.9); @@ -6820,10 +6840,10 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-scrolltop.p-link { - background: #ff4081; + background: #4CAF50; } .p-scrolltop.p-link:hover { - background: rgba(255, 64, 129, 0.92); + background: rgba(76, 175, 80, 0.92); } .p-scrolltop .p-scrolltop-icon { font-size: 1.5rem; @@ -6841,7 +6861,7 @@ background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0)); } .p-tag { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -6887,18 +6907,18 @@ box-shadow: none; } .p-metergroup .p-metergroup-meter-container { - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); border-radius: 4px; } .p-metergroup .p-metergroup-meter { border: 0 none; - background: #3F51B5; + background: #673AB7; } .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { line-height: 4px; } .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { - background: #3F51B5; + background: #673AB7; width: 0.5rem; height: 0.5rem; border-radius: 100%; @@ -6947,13 +6967,13 @@ .p-progressbar { border: 0 none; height: 4px; - background: rgba(63, 81, 181, 0.32); + background: rgba(103, 58, 183, 0.32); border-radius: 4px; } .p-progressbar .p-progressbar-value { border: 0 none; margin: 0; - background: #3F51B5; + background: #673AB7; } .p-progressbar .p-progressbar-label { color: #ffffff; @@ -6971,7 +6991,7 @@ font-size: 1rem; } .p-badge { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -6980,7 +7000,7 @@ line-height: 1.5rem; } .p-badge.p-badge-secondary { - background-color: #ff4081; + background-color: #4CAF50; color: #ffffff; } .p-badge.p-badge-success { @@ -7012,7 +7032,7 @@ line-height: 3rem; } .p-tag { - background: #3F51B5; + background: #673AB7; color: #ffffff; font-size: 0.75rem; font-weight: 700; @@ -7076,14 +7096,14 @@ opacity: 0.38; } .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7095,7 +7115,7 @@ .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7163,22 +7183,22 @@ min-width: auto; } .p-button:not(:disabled):focus { - background: rgba(63, 81, 181, 0.76); + background: rgba(103, 58, 183, 0.76); } .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.68); + background: rgba(103, 58, 183, 0.68); } .p-button .p-ink { background-color: rgba(255, 255, 255, 0.32); } .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-button.p-button-outlined { box-shadow: inset 0 0 0 1px; @@ -7207,19 +7227,19 @@ 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.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { - background: rgba(255, 64, 129, 0.76); + background: rgba(76, 175, 80, 0.76); } .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); } .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus { - background: rgba(255, 64, 129, 0.12); + background: rgba(76, 175, 80, 0.12); } .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); } .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink { - background-color: rgba(255, 64, 129, 0.16); + background-color: rgba(76, 175, 80, 0.16); } .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { background: rgba(33, 150, 243, 0.76); @@ -7361,8 +7381,8 @@ border-color: rgba(0, 0, 0, 0.87); } .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { - border-color: #3F51B5; - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + border-color: #673AB7; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-datepicker .p-datepicker-header { border-bottom: 0 none; @@ -7387,7 +7407,7 @@ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38); } .p-datepicker table td.p-datepicker-today.p-highlight { - box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 0 1px rgba(103, 58, 183, 0.12); } .p-calendar.p-invalid .p-inputtext:enabled:focus { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; @@ -7406,7 +7426,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7418,7 +7438,7 @@ .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7463,7 +7483,7 @@ background-image: none; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: #ff4081; + background: #4CAF50; color: #ffffff; } .p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger { @@ -7474,17 +7494,17 @@ border: 0 none; } .p-cascadeselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-cascadeselect-item-content .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-cascadeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7496,7 +7516,7 @@ .p-input-filled .p-cascadeselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7564,7 +7584,7 @@ border-color: #757575; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); @@ -7573,10 +7593,10 @@ border-color: #757575; } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box { - border-color: #3F51B5; + border-color: #673AB7; } .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #ffffff; @@ -7610,14 +7630,14 @@ } } .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-input-filled .p-chips-multiple-container { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7629,7 +7649,7 @@ .p-input-filled .p-chips-multiple-container:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-focus, .p-input-filled .p-chips-multiple-container:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7681,10 +7701,10 @@ background-color: rgba(0, 0, 0, 0.03); } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 #3F51B5; + box-shadow: inset 0 2px 0 0 #673AB7; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 #3F51B5; + box-shadow: inset 0 -2px 0 0 #673AB7; } .p-dropdown .p-inputtext, .p-dropdown .p-dropdown-trigger { background-image: none; @@ -7694,17 +7714,17 @@ border: 0 none; } .p-dropdown:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-dropdown-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-dropdown { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7716,7 +7736,7 @@ .p-input-filled .p-dropdown:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -7749,15 +7769,15 @@ padding: 1rem; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: #ff4081; + background: #4CAF50; color: #ffffff; } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: rgba(255, 64, 129, 0.68); + background: rgba(76, 175, 80, 0.68); color: #ffffff; } .p-inputtext:enabled:focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-inputtext:enabled:focus.p-invalid { box-shadow: inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020, inset 0 0 0 1px #b00020; @@ -7767,7 +7787,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7775,7 +7795,7 @@ .p-input-filled .p-inputtext:enabled:hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-inputtext:enabled:focus { box-shadow: none; @@ -7800,7 +7820,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7851,13 +7871,13 @@ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0 0 1px 10px rgba(0, 0, 0, 0.04); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12), 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); } .p-fieldset .p-fieldset-legend { border: 0 none; @@ -7882,7 +7902,7 @@ } .p-float-label input:focus ~ label, .p-float-label .p-inputwrapper-focus ~ label { - color: #3F51B5; + color: #673AB7; } .p-input-filled .p-float-label .p-inputtext { padding-top: 1.25rem; @@ -7899,13 +7919,13 @@ background: transparent; } .p-listbox .p-listbox-list .p-listbox-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-listbox .p-listbox-list .p-listbox-item:focus { background: rgba(0, 0, 0, 0.12); } .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-megamenu .p-menuitem .p-menuitem-link:focus { background: rgba(0, 0, 0, 0.12); @@ -7927,16 +7947,16 @@ border: 0 none; } .p-multiselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { background: rgba(0, 0, 0, 0.12); } .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus { background: rgba(0, 0, 0, 0.12); @@ -7946,7 +7966,7 @@ border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -7958,7 +7978,7 @@ .p-input-filled .p-multiselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -8017,7 +8037,7 @@ background: rgba(0, 0, 0, 0.12); } .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-paginator { justify-content: flex-end; @@ -8026,7 +8046,7 @@ background: rgba(0, 0, 0, 0.12); } .p-paginator .p-paginator-element:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-input-filled .p-password.p-invalid > .p-inputtext { border-color: transparent; @@ -8097,7 +8117,7 @@ background: rgba(0, 0, 0, 0.12); } .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-progressbar { border-radius: 0; @@ -8116,7 +8136,7 @@ border: 2px solid #757575; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) { box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12); @@ -8125,10 +8145,10 @@ border: 2px solid #757575; } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight { - box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); + box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box { - border-color: #3F51B5; + border-color: #673AB7; } .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box { background-color: #ffffff; @@ -8152,7 +8172,7 @@ justify-content: center; } .p-rating .p-rating-item:focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-rating .p-rating-item:focus.p-rating-cancel-item { background: rgba(176, 0, 32, 0.12); @@ -8179,16 +8199,16 @@ transform: scale(0.7); } .p-slider .p-slider-handle:focus { - box-shadow: 0 0 1px 10px rgba(255, 64, 129, 0.2); + box-shadow: 0 0 1px 10px rgba(76, 175, 80, 0.2); } .p-slider.p-slider-sliding .p-slider-handle { transform: scale(1); } .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus { - background: rgba(63, 81, 181, 0.12); + background: rgba(103, 58, 183, 0.12); } .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(63, 81, 181, 0.16); + background: rgba(103, 58, 183, 0.16); } .p-splitbutton.p-button-outlined > .p-button { box-shadow: inset 0 0 0 1px; @@ -8216,10 +8236,10 @@ 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-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus { - background: rgba(255, 64, 129, 0.12); + background: rgba(76, 175, 80, 0.12); } .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active { - background: rgba(255, 64, 129, 0.16); + background: rgba(76, 175, 80, 0.16); } .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus { background: rgba(33, 150, 243, 0.12); @@ -8259,7 +8279,7 @@ height: 1.714rem; } .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number { - background-color: #3F51B5; + background-color: #673AB7; color: #ffffff; } .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title { @@ -8311,7 +8331,7 @@ background: rgba(0, 0, 0, 0.12); } .p-steps .p-steps-item.p-highlight .p-steps-number { - background-color: #3F51B5; + background-color: #673AB7; color: #ffffff; } .p-steps .p-steps-item.p-highlight .p-steps-title { @@ -8329,10 +8349,10 @@ border-radius: 0; } .p-tabview .p-tabview-nav li .p-tabview-nav-link > .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabview .p-tabview-nav .p-tabview-ink-bar { z-index: 1; @@ -8340,7 +8360,7 @@ position: absolute; bottom: 0; height: 2px; - background-color: #3F51B5; + background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } .p-tieredmenu .p-menuitem-link:focus { @@ -8360,7 +8380,7 @@ background: rgba(0, 0, 0, 0.12); } .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight { - background: rgba(63, 81, 181, 0.24); + background: rgba(103, 58, 183, 0.24); } .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger { background-image: none; @@ -8370,17 +8390,17 @@ border: 0 none; } .p-treeselect:not(.p-disabled).p-focus { - box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; + box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } .p-treeselect-item .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-input-filled .p-treeselect { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: 1px solid transparent; background: #f5f5f5 no-repeat; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)); background-size: 0 2px, 100% 1px; background-position: 50% 100%, 50% 100%; background-origin: border-box; @@ -8392,7 +8412,7 @@ .p-input-filled .p-treeselect:not(.p-disabled):hover { background-color: #ececec; border-color: transparent; - background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); + background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)); } .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus { box-shadow: none; @@ -8464,20 +8484,20 @@ border-radius: 0; } .p-tabmenu .p-tabmenu-nav li .p-menuitem-link > .p-ink { - background-color: rgba(63, 81, 181, 0.16); + background-color: rgba(103, 58, 183, 0.16); } .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus { - background-color: rgba(63, 81, 181, 0.12); + background-color: rgba(103, 58, 183, 0.12); } .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar { display: block; position: absolute; bottom: 0; height: 2px; - background-color: #3F51B5; + background-color: #673AB7; transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); } .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css index dfb5a34db3..9074a838a5 100644 --- a/public/themes/mira/theme.css +++ b/public/themes/mira/theme.css @@ -4599,7 +4599,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #81a1c1; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4609,6 +4608,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #c0d0e0; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #d8dee9; color: #2e3440; @@ -4661,6 +4678,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css index 862928e335..3e40485eb4 100644 --- a/public/themes/nano/theme.css +++ b/public/themes/nano/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #697077; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #90c9f5; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #44a1d9; color: #ffffff; @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 4ad8388007..3795243311 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -4552,7 +4552,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #848484; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4562,6 +4561,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #e02365; color: #ffffff; @@ -4614,6 +4631,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index e60daec707..8000fb6e10 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #848484; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #007ad9; color: #ffffff; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 0dd4617d29..311084f692 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -4561,7 +4561,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #848484; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4571,6 +4570,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #8dcdff; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #007ad9; color: #ffffff; @@ -4623,6 +4640,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 8181032451..ea15705192 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -4552,7 +4552,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #a6a6a6; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4562,6 +4561,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #e4e9ec; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #afd3c8; color: #385048; @@ -4614,6 +4631,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 3d4c9f5062..a1089e1d3a 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #a6d5fa; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #e3f2fd; color: #495057; @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 6beacb008a..2f51625b67 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #b7e0b8; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #e8f5e9; color: #495057; @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 98346ced96..608efae6de 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #6c757d; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #ffe69c; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #fff3e0; color: #495057; @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 246eedc456..420b0f8fec 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: #e9ecef; @@ -639,6 +639,7 @@ border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: #9c27b0; @@ -649,6 +650,15 @@ box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } + .p-cascadeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -689,42 +699,81 @@ transition: box-shadow 0.2s; border-radius: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { - padding: 0.5rem 1rem; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child { + margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #495057; background: #f3e5f5; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 1rem; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon { - width: 0.875rem; - height: 0.875rem; - } - .p-input-filled .p-cascadeselect { - background: #f8f9fa; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #f8f9fa; + .p-checkbox-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #ffffff; + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #ced4da; + border-radius: 3px; + } + .p-checkbox .p-checkbox-box { + border: 2px solid #ced4da; + background: #ffffff; + width: 20px; + height: 20px; + color: #495057; + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } .p-checkbox .p-checkbox-box { border: 2px solid #ced4da; background: #ffffff; @@ -733,6 +782,7 @@ color: #495057; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,64 +793,140 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox.p-highlight .p-checkbox-box { border-color: #9c27b0; background: #9c27b0; } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #9c27b0; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #7d1f8d; background: #7d1f8d; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #9c27b0; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #7d1f8d; - background: #7d1f8d; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #f44336; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9c27b0; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #7d1f8d; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #9c27b0; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #f8f9fa; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #7d1f8d; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #9c27b0; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #f8f9fa; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #7d1f8d; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; + } + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #9c27b0; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: #f3e5f5; + background: #dee2e6; color: #495057; border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #ced4da; + color: #495057; + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +959,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #9c27b0; @@ -848,6 +1053,18 @@ box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } + .p-dropdown.p-variant-filled { + background: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -858,7 +1075,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: #6c757d; } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -900,13 +1117,6 @@ right: 0.5rem; color: #6c757d; } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -919,14 +1129,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #495057; background: #f3e5f5; } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -939,18 +1163,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-dropdown { - background: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #ffffff; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1017,14 +1229,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #f44336; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1035,27 +1283,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: #b6bfc8; - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #9c27b0; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: #ffffff; + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: #b6bfc8; } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #8c239e; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #f44336; } .p-inputtext { @@ -1069,6 +1315,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #9c27b0; @@ -1082,6 +1329,15 @@ .p-inputtext.p-invalid.p-component { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1095,28 +1351,16 @@ color: #6c757d; transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #f44336; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: #6c757d; - } - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: #6c757d; - } - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } ::-webkit-input-placeholder { @@ -1148,11 +1392,69 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + .p-inputotp-input { + text-align: center; + width: 2rem; + } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #ffffff; color: #495057; border: 1px solid #ced4da; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1172,6 +1474,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1484,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #495057; background: #f3e5f5; } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1506,27 @@ color: #495057; background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: #495057; + background: #e9ecef; + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: #495057; background: #e9ecef; } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: #495057; + background: #e9ecef; + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9c27b0; + } .p-listbox.p-invalid { border-color: #f44336; } @@ -1236,11 +1557,100 @@ color: #495057; background: #f3e5f5; } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #ffffff; border: 1px solid #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #9c27b0; @@ -1251,8 +1661,14 @@ box-shadow: 0 0 0 0.2rem #df9eea; border-color: #9c27b0; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1278,22 +1694,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: #6c757d; - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #f44336; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #ffffff; color: #495057; @@ -1310,9 +1716,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1320,7 +1723,11 @@ right: 0.5rem; color: #6c757d; } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: #6c757d; @@ -1351,19 +1758,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #495057; background: #f3e5f5; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(156, 39, 176, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: #495057; background: #e9ecef; } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #df9eea; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1790,6 @@ color: #495057; background: transparent; } - .p-input-filled .p-multiselect { - background: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #f8f9fa; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #ffffff; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #f44336; } @@ -1412,10 +1814,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #689f38; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 20px; height: 20px; } + .p-radiobutton .p-radiobutton-input { + 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: 2px solid #ced4da; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #ced4da; background: #ffffff; @@ -1424,15 +1866,7 @@ color: #495057; border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #9c27b0; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #df9eea; - border-color: #9c27b0; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,31 +1874,51 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #9c27b0; background: #9c27b0; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #9c27b0; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #7d1f8d; background: #7d1f8d; - color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9c27b0; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #f44336; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8f9fa; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #9c27b0; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #f8f9fa; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #7d1f8d; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #f8f9fa; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #9c27b0; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #f8f9fa; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #7d1f8d; } .p-rating { @@ -1610,6 +2064,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.5rem; } + .p-treeselect.p-variant-filled { + background: #f8f9fa; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-treeselect .p-treeselect-label { padding: 0.5rem 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1709,44 +2172,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #ffffff; } - .p-togglebutton.p-button { + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-togglebutton-input { + cursor: pointer; + } + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { + 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 #ced4da; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #ffffff; border: 1px solid #ced4da; color: #495057; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: #6c757d; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: #e9ecef; - border-color: #ced4da; - color: #495057; - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: #6c757d; } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #9c27b0; border-color: #9c27b0; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: #e9ecef; + border-color: #ced4da; + color: #495057; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: #6c757d; + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #8c239e; border-color: #8c239e; color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + border-color: #9c27b0; + } + .p-togglebutton.p-invalid > .p-button { border-color: #f44336; } .p-button { @@ -1902,296 +2399,296 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; background: #607d8b; border: 1px solid #607d8b; } - .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { background: #56717d; color: #ffffff; border-color: #56717d; } - .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #beccd2; } - .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { background: #4d646f; color: #ffffff; border-color: #4d646f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; color: #607d8b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); color: #607d8b; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { background: rgba(96, 125, 139, 0.16); color: #607d8b; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; color: #607d8b; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { background: rgba(96, 125, 139, 0.04); border-color: transparent; color: #607d8b; } - .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { background: rgba(96, 125, 139, 0.16); border-color: transparent; color: #607d8b; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #ffffff; background: #0288d1; border: 1px solid #0288d1; } - .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { background: #027abc; color: #ffffff; border-color: #027abc; } - .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #89d4fe; } - .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { background: #026da7; color: #ffffff; border-color: #026da7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { background-color: transparent; color: #0288d1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); color: #0288d1; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { background: rgba(2, 136, 209, 0.16); color: #0288d1; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { background-color: transparent; color: #0288d1; border-color: transparent; } - .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { background: rgba(2, 136, 209, 0.04); border-color: transparent; color: #0288d1; } - .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { background: rgba(2, 136, 209, 0.16); border-color: transparent; color: #0288d1; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { color: #ffffff; background: #689f38; border: 1px solid #689f38; } - .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { background: #5e8f32; color: #ffffff; border-color: #5e8f32; } - .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #c2e0a8; } - .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { background: #537f2d; color: #ffffff; border-color: #537f2d; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { background-color: transparent; color: #689f38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); color: #689f38; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { background: rgba(104, 159, 56, 0.16); color: #689f38; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { background-color: transparent; color: #689f38; border-color: transparent; } - .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { background: rgba(104, 159, 56, 0.04); border-color: transparent; color: #689f38; } - .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { background: rgba(104, 159, 56, 0.16); border-color: transparent; color: #689f38; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { color: #212529; background: #fbc02d; border: 1px solid #fbc02d; } - .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { background: #fab710; color: #212529; border-color: #fab710; } - .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #fde6ab; } - .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { background: #e8a704; color: #212529; border-color: #e8a704; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { background-color: transparent; color: #fbc02d; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); color: #fbc02d; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { background: rgba(251, 192, 45, 0.16); color: #fbc02d; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { background-color: transparent; color: #fbc02d; border-color: transparent; } - .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { background: rgba(251, 192, 45, 0.04); border-color: transparent; color: #fbc02d; } - .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { background: rgba(251, 192, 45, 0.16); border-color: transparent; color: #fbc02d; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { color: #ffffff; background: #9c27b0; border: 1px solid #9c27b0; } - .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { background: #8c239e; color: #ffffff; border-color: #8c239e; } - .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #df9eea; } - .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { background: #7d1f8d; color: #ffffff; border-color: #7d1f8d; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { background-color: transparent; color: #9c27b0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); color: #9c27b0; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { background: rgba(156, 39, 176, 0.16); color: #9c27b0; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { background-color: transparent; color: #9c27b0; border-color: transparent; } - .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { background: rgba(156, 39, 176, 0.04); border-color: transparent; color: #9c27b0; } - .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { background: rgba(156, 39, 176, 0.16); border-color: transparent; color: #9c27b0; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { color: #ffffff; background: #d32f2f; border: 1px solid #d32f2f; } - .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { background: #c02929; color: #ffffff; border-color: #c02929; } - .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { box-shadow: 0 0 0 0.2rem #edacac; } - .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { background: #aa2424; color: #ffffff; border-color: #aa2424; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { background-color: transparent; color: #d32f2f; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); color: #d32f2f; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { background: rgba(211, 47, 47, 0.16); color: #d32f2f; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { background-color: transparent; color: #d32f2f; border-color: transparent; } - .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { background: rgba(211, 47, 47, 0.04); border-color: transparent; color: #d32f2f; } - .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { background: rgba(211, 47, 47, 0.16); border-color: transparent; color: #d32f2f; @@ -3303,6 +3800,62 @@ .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(156, 39, 176, 0.24); } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + .p-treenode-content { + display: flex; + align-items: center; + } + .p-tree-filter { + width: 100%; + } + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-tree-loading { + position: relative; + min-height: 4rem; + } + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } .p-tree { border: 1px solid #dee2e6; background: #ffffff; @@ -3351,7 +3904,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; } - .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { color: #495057; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { @@ -3401,6 +3954,133 @@ .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background: #d3a1db; } + .p-treetable { + position: relative; + } + .p-treetable > .p-treetable-wrapper { + overflow: auto; + } + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + .p-treetable-selectable .p-treetable-tbody > tr { + cursor: pointer; + } + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + vertical-align: middle; + overflow: hidden; + position: relative; + } + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + .p-treetable-resizable .p-treetable-thead > tr > th, + .p-treetable-resizable .p-treetable-tfoot > tr > td, + .p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + .p-treetable-resizable .p-resizable-column { + background-clip: padding-box; + position: relative; + } + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + /* Scrollable */ + .p-treetable-scrollable-wrapper { + position: relative; + } + .p-treetable-scrollable-header, + .p-treetable-scrollable-footer { + overflow: hidden; + border: 0 none; + } + .p-treetable-scrollable-body { + overflow: auto; + position: relative; + } + .p-treetable-virtual-table { + position: absolute; + } + /* Frozen Columns */ + .p-treetable-frozen-view .p-treetable-scrollable-body { + overflow: hidden; + } + .p-treetable-unfrozen-view { + position: absolute; + top: 0px; + left: 0px; + } + /* Reorder */ + .p-treetable-reorder-indicator-up, + .p-treetable-reorder-indicator-down { + position: absolute; + display: none; + } + /* Loader */ + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + /* Alignment */ + .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-left, + .p-treetable .p-treetable-tfoot > tr > td.p-align-left { + text-align: left; + justify-content: flex-start; + } + .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-right, + .p-treetable .p-treetable-tfoot > tr > td.p-align-right { + text-align: right; + justify-content: flex-end; + } + .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-center, + .p-treetable .p-treetable-tfoot > tr > td.p-align-center { + text-align: center; + justify-content: center; + } .p-treetable .p-paginator-top { border-width: 0 0 1px 0; border-radius: 0; @@ -3868,6 +4548,129 @@ .p-splitter .p-splitter-gutter-resizing { background: #dee2e6; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: #ffffff; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: #495057; + border: 1px solid #e9ecef; + border-width: 2px; + background: #ffffff; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + color: #6c757d; + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: #f3e5f5; + color: #495057; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: #495057; + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #df9eea; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #9c27b0; + } + .p-stepper .p-stepper-panels { + background: #ffffff; + padding: 1rem; + color: #495057; + } + .p-stepper .p-stepper-separator { + background-color: #dee2e6; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #ffffff; + color: #495057; + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper.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.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #9c27b0; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #f8f9fa; border: 0 none; @@ -3877,6 +4680,68 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: #ffffff; border: 1px solid #dee2e6; @@ -5973,6 +6838,64 @@ outline-offset: 0; box-shadow: 0 0 0 0.2rem #df9eea; } + .p-metergroup .p-metergroup-meter-container { + background: #dee2e6; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #9c27b0; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #9c27b0; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css index 343b1e63c1..e9febd9886 100644 --- a/public/themes/soho-dark/theme.css +++ b/public/themes/soho-dark/theme.css @@ -4619,7 +4619,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4629,6 +4628,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #e0d8fc; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(177, 157, 247, 0.16); color: #b19df7; @@ -4681,6 +4698,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css index c03ecef86d..48e85c04ad 100644 --- a/public/themes/soho-light/theme.css +++ b/public/themes/soho-light/theme.css @@ -4619,7 +4619,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #708da9; font-weight: 700; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4629,6 +4628,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #c7bbfa; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #e2dcfc; color: #7254f3; @@ -4681,6 +4698,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css index 2349f6bffb..5bac5f850b 100644 --- a/public/themes/tailwind-light/theme.css +++ b/public/themes/tailwind-light/theme.css @@ -4605,7 +4605,6 @@ transition: none; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #71717a; font-weight: 600; transition: none; @@ -4615,6 +4614,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #6366f1; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #eef2ff; color: #312e81; @@ -4667,6 +4684,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 8a29843612..c98c790e75 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #93cbf9; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index cc8679db73..f592645b82 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #a7d8a9; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index 9031897ea2..11476ec4ad 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -4577,7 +4577,6 @@ transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -4587,6 +4586,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #ffe284; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); @@ -4639,6 +4656,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index d037c35db7..ef2c99c712 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -599,10 +599,10 @@ } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child { padding-left: 0; + border-left: 0 none; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child { padding-right: 0; - border-left: 0 none; } .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover { background: rgba(255, 255, 255, 0.03); @@ -639,6 +639,7 @@ border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-cascadeselect:not(.p-disabled):hover { border-color: #ba68c8; @@ -649,6 +650,15 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-cascadeselect.p-variant-filled { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-cascadeselect .p-cascadeselect-label { background: transparent; border: 0 none; @@ -689,42 +699,62 @@ transition: box-shadow 0.2s; border-radius: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { - padding: 0.5rem 1rem; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child { + margin-top: 0; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child { + margin-bottom: 0; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content { + padding: 0.5rem 1rem; + } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon { font-size: 0.875rem; } - .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon.p-icon { - width: 0.875rem; - height: 0.875rem; - } - .p-input-filled .p-cascadeselect { - background: #304562; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; } - .p-input-filled .p-cascadeselect:not(.p-disabled):hover { - background-color: #304562; + .p-checkbox-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; } - .p-input-filled .p-cascadeselect:not(.p-disabled).p-focus { - background-color: #304562; + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; } .p-checkbox { width: 20px; height: 20px; } + .p-checkbox .p-checkbox-input { + border: 2px solid #304562; + border-radius: 3px; + } .p-checkbox .p-checkbox-box { border: 2px solid #304562; background: #17212f; @@ -733,6 +763,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-checkbox .p-checkbox-box .p-checkbox-icon { transition-duration: 0.2s; @@ -743,64 +774,159 @@ width: 14px; height: 14px; } - .p-checkbox .p-checkbox-box.p-highlight { + .p-checkbox .p-checkbox-box { + border: 2px solid #304562; + background: #17212f; + width: 20px; + height: 20px; + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon { + transition-duration: 0.2s; + color: #ffffff; + font-size: 14px; + } + .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon { + width: 14px; + height: 14px; + } + .p-checkbox.p-highlight .p-checkbox-box { border-color: #ba68c8; background: #ba68c8; } - .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + border-color: #ba68c8; + } + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { border-color: #a241b2; background: #a241b2; color: #ffffff; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { - border-color: #ba68c8; - } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { + .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } - .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { - border-color: #a241b2; - background: #a241b2; - color: #ffffff; - } .p-checkbox.p-invalid > .p-checkbox-box { border-color: #ef9a9a; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ba68c8; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a241b2; + } .p-input-filled .p-checkbox .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox .p-checkbox-box.p-highlight { + .p-input-filled .p-checkbox.p-highlight .p-checkbox-box { background: #ba68c8; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { background-color: #304562; } - .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { background: #a241b2; } - .p-chips .p-chips-multiple-container { - padding: 0.25rem 0.5rem; - gap: 0.5rem; + .p-checkbox { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-checkbox-input { + cursor: pointer; + } + .p-checkbox-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-tristatecheckbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box { + background: #ba68c8; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box { + background-color: #304562; + } + .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box { + background: #a241b2; + } + .p-chips { + display: inline-flex; + } + .p-chips-multiple-container { + margin: 0; + padding: 0; + list-style-type: none; + cursor: text; + overflow: hidden; + display: flex; + align-items: center; + flex-wrap: wrap; + } + .p-chips-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-chips-input-token { + flex: 1 1 auto; + display: inline-flex; + } + .p-chips-token-icon { + cursor: pointer; + } + .p-chips-input-token input { + border: 0 none; + outline: 0 none; + background-color: transparent; + margin: 0; + padding: 0; + box-shadow: none; + border-radius: 0; + width: 100%; + } + .p-fluid .p-chips { + display: flex; } - .p-chips .p-chips-multiple-container:not(.p-disabled):hover { + .p-chips:not(.p-disabled):hover .p-chips-multiple-container { border-color: #ba68c8; } - .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus { + .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { outline: 0 none; outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-chips .p-chips-multiple-container { + padding: 0.25rem 0.5rem; + outline-color: transparent; + } .p-chips .p-chips-multiple-container .p-chips-token { padding: 0.25rem 0.5rem; margin-right: 0.5rem; - background: rgba(186, 104, 200, 0.16); + background: #304562; color: rgba(255, 255, 255, 0.87); border-radius: 16px; } + .p-chips .p-chips-multiple-container .p-chips-token.p-focus { + background: #3e526d; + color: rgba(255, 255, 255, 0.87); + } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { margin-left: 0.5rem; } @@ -833,11 +959,90 @@ .p-colorpicker-overlay-panel { box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); } + .p-dropdown { + display: inline-flex; + cursor: pointer; + position: relative; + user-select: none; + } + .p-dropdown-clear-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-dropdown-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-dropdown-label { + display: block; + white-space: nowrap; + overflow: hidden; + flex: 1 1 auto; + width: 1%; + text-overflow: ellipsis; + cursor: pointer; + } + .p-dropdown-label-empty { + overflow: hidden; + opacity: 0; + } + input.p-dropdown-label { + cursor: default; + } + .p-dropdown .p-dropdown-panel { + min-width: 100%; + } + .p-dropdown-panel { + position: absolute; + top: 0; + left: 0; + } + .p-dropdown-items-wrapper { + overflow: auto; + } + .p-dropdown-item { + cursor: pointer; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + display: flex; + align-items: center; + } + .p-dropdown-item-group { + cursor: auto; + } + .p-dropdown-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-dropdown-filter { + width: 100%; + } + .p-dropdown-filter-container { + position: relative; + } + .p-dropdown-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-dropdown { + display: flex; + } + .p-fluid .p-dropdown .p-dropdown-label { + width: 1%; + } .p-dropdown { background: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-dropdown:not(.p-disabled):hover { border-color: #ba68c8; @@ -848,6 +1053,18 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } + .p-dropdown.p-variant-filled { + background: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown.p-dropdown-clearable .p-dropdown-label { padding-right: 1.5rem; } @@ -858,7 +1075,7 @@ .p-dropdown .p-dropdown-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } - .p-dropdown .p-dropdown-label:enabled:focus { + .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus { outline: 0 none; box-shadow: none; } @@ -900,13 +1117,6 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter { - padding-right: 3rem; - margin-right: -3rem; - } - .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon { - right: 2rem; - } .p-dropdown-panel .p-dropdown-items { padding: 0.5rem 0; } @@ -919,14 +1129,28 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child { + margin-top: 0; + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child { + margin-bottom: 0; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover { + .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon { + position: relative; + margin-left: -0.5rem; + margin-right: 0.5rem; + } .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group { margin: 0; padding: 0.75rem 1rem; @@ -939,18 +1163,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-dropdown { - background: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus { - background-color: #304562; - } - .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext { - background-color: transparent; - } .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1017,14 +1229,50 @@ .p-inputnumber.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } + .p-inputswitch { + position: relative; + display: inline-block; + } + .p-inputswitch-input { + appearance: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + opacity: 0; + z-index: 1; + outline: 0 none; + cursor: pointer; + } + .p-inputswitch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 1px solid transparent; + } + .p-inputswitch-slider:before { + position: absolute; + content: ""; + top: 50%; + } .p-inputswitch { width: 3rem; height: 1.75rem; } + .p-inputswitch .p-inputswitch-input { + border-radius: 30px; + } .p-inputswitch .p-inputswitch-slider { background: #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + outline-color: transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1035,27 +1283,25 @@ border-radius: 50%; transition-duration: 0.2s; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { - transform: translateX(1.25rem); - } - .p-inputswitch.p-focus .p-inputswitch-slider { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - } - .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { - background: rgba(255, 255, 255, 0.03); - } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider { + .p-inputswitch.p-highlight .p-inputswitch-slider { background: #ba68c8; } - .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before { + .p-inputswitch.p-highlight .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.87); + transform: translateX(1.25rem); + } + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider { + background: rgba(255, 255, 255, 0.03); } - .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider { background: #b052c0; } - .p-inputswitch.p-invalid .p-inputswitch-slider { + .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-inputswitch.p-invalid > .p-inputswitch-slider { border-color: #ef9a9a; } .p-inputtext { @@ -1069,6 +1315,7 @@ transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; appearance: none; border-radius: 3px; + outline-color: transparent; } .p-inputtext:enabled:hover { border-color: #ba68c8; @@ -1082,6 +1329,15 @@ .p-inputtext.p-invalid.p-component { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1095,28 +1351,16 @@ color: rgba(255, 255, 255, 0.6); transition-duration: 0.2s; } - .p-float-label > label.p-error { + .p-float-label > .p-invalid + label { color: #ef9a9a; } - .p-input-icon-left > i:first-of-type, - .p-input-icon-left > svg:first-of-type, - .p-input-icon-left > .p-input-prefix { - left: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-left > .p-inputtext { + .p-icon-field-left > .p-inputtext { padding-left: 2rem; } - .p-input-icon-left.p-float-label > label { + .p-icon-field-left.p-float-label > label { left: 2rem; } - .p-input-icon-right > i:last-of-type, - .p-input-icon-right > svg:last-of-type, - .p-input-icon-right > .p-input-suffix { - right: 0.5rem; - color: rgba(255, 255, 255, 0.6); - } - .p-input-icon-right > .p-inputtext { + .p-icon-field-right > .p-inputtext { padding-right: 2rem; } ::-webkit-input-placeholder { @@ -1148,11 +1392,69 @@ font-size: 1.25rem; padding: 0.625rem 0.625rem; } + .p-icon-field { + position: relative; + } + .p-icon-field > .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { + width: 100%; + } + .p-icon-field-left > .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-icon-field-right > .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + .p-inputotp { + display: flex; + align-items: center; + gap: 0.5rem; + } + .p-inputotp-input { + text-align: center; + width: 2rem; + } + .p-listbox-list-wrapper { + overflow: auto; + } + .p-listbox-list { + list-style-type: none; + margin: 0; + padding: 0; + } + .p-listbox-item { + cursor: pointer; + position: relative; + overflow: hidden; + } + .p-listbox-item-group { + cursor: auto; + } + .p-listbox-filter-container { + position: relative; + } + .p-listbox-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-listbox-filter { + width: 100%; + } .p-listbox { background: #1f2d40; color: rgba(255, 255, 255, 0.87); border: 1px solid #304562; border-radius: 3px; + transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } .p-listbox .p-listbox-header { padding: 0.5rem 1rem; @@ -1172,6 +1474,7 @@ } .p-listbox .p-listbox-list { padding: 0.5rem 0; + outline: 0 none; } .p-listbox .p-listbox-list .p-listbox-item { margin: 0; @@ -1181,15 +1484,16 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-listbox .p-listbox-list .p-listbox-item:first-child { + margin-top: 0; + } + .p-listbox .p-listbox-list .p-listbox-item:last-child { + margin-bottom: 0; + } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-listbox .p-listbox-list .p-listbox-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-listbox .p-listbox-list .p-listbox-item-group { margin: 0; padding: 0.75rem 1rem; @@ -1202,10 +1506,27 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } + .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } + .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus { + color: rgba(255, 255, 255, 0.87); + background: rgba(255, 255, 255, 0.03); + } + .p-listbox.p-focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } .p-listbox.p-invalid { border-color: #ef9a9a; } @@ -1236,11 +1557,100 @@ color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } + .p-multiselect { + display: inline-flex; + cursor: pointer; + user-select: none; + } + .p-multiselect-trigger { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + .p-multiselect-label-container { + overflow: hidden; + flex: 1 1 auto; + cursor: pointer; + } + .p-multiselect-label { + display: block; + white-space: nowrap; + cursor: pointer; + overflow: hidden; + text-overflow: ellipsis; + } + .p-multiselect-label-empty { + overflow: hidden; + visibility: hidden; + } + .p-multiselect-token { + cursor: default; + display: inline-flex; + align-items: center; + flex: 0 0 auto; + } + .p-multiselect-token-icon { + cursor: pointer; + } + .p-multiselect .p-multiselect-panel { + min-width: 100%; + } + .p-multiselect-items-wrapper { + overflow: auto; + } + .p-multiselect-items { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-multiselect-item { + cursor: pointer; + display: flex; + align-items: center; + font-weight: normal; + white-space: nowrap; + position: relative; + overflow: hidden; + } + .p-multiselect-item-group { + cursor: auto; + } + .p-multiselect-header { + display: flex; + align-items: center; + justify-content: space-between; + } + .p-multiselect-filter-container { + position: relative; + flex: 1 1 auto; + } + .p-multiselect-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-multiselect-filter-container .p-inputtext { + width: 100%; + } + .p-multiselect-close { + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + position: relative; + margin-left: auto; + } + .p-fluid .p-multiselect { + display: flex; + } .p-multiselect { background: #17212f; border: 1px solid #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 3px; + outline-color: transparent; } .p-multiselect:not(.p-disabled):hover { border-color: #ba68c8; @@ -1251,8 +1661,14 @@ box-shadow: 0 0 0 1px #cf95d9; border-color: #ba68c8; } - .p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; + .p-multiselect.p-variant-filled { + background: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; } .p-multiselect .p-multiselect-label { padding: 0.5rem 0.5rem; @@ -1278,22 +1694,12 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } - .p-multiselect .p-multiselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; - } .p-multiselect.p-invalid.p-component { border-color: #ef9a9a; } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; } - .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label { - padding: 0.5rem 0.5rem; - } - .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label { - padding-right: 1.5rem; - } .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); @@ -1310,9 +1716,6 @@ border-top-right-radius: 3px; border-top-left-radius: 3px; } - .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container { - margin: 0 0.5rem; - } .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext { padding-right: 1.5rem; } @@ -1320,7 +1723,11 @@ right: 0.5rem; color: rgba(255, 255, 255, 0.6); } + .p-multiselect-panel .p-multiselect-header .p-checkbox { + margin-right: 0.5rem; + } .p-multiselect-panel .p-multiselect-header .p-multiselect-close { + margin-left: 0.5rem; width: 2rem; height: 2rem; color: rgba(255, 255, 255, 0.6); @@ -1351,19 +1758,23 @@ transition: box-shadow 0.2s; border-radius: 0; } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child { + margin-top: 0; + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child { + margin-bottom: 0; + } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: rgba(255, 255, 255, 0.87); background: rgba(186, 104, 200, 0.16); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover { + .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { + background: rgba(186, 104, 200, 0.24); + } + .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus { color: rgba(255, 255, 255, 0.87); background: rgba(255, 255, 255, 0.03); } - .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: inset 0 0 0 0.15rem #cf95d9; - } .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox { margin-right: 0.5rem; } @@ -1379,15 +1790,6 @@ color: rgba(255, 255, 255, 0.87); background: transparent; } - .p-input-filled .p-multiselect { - background: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled):hover { - background-color: #304562; - } - .p-input-filled .p-multiselect:not(.p-disabled).p-focus { - background-color: #304562; - } .p-password.p-invalid.p-component > .p-inputtext { border-color: #ef9a9a; } @@ -1412,10 +1814,50 @@ .p-password-panel .p-password-meter .p-password-strength.strong { background: #c5e1a5; } + .p-radiobutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-radiobutton-input { + cursor: pointer; + } + .p-radiobutton-box { + display: flex; + justify-content: center; + align-items: center; + } + .p-radiobutton-icon { + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0) scale(0.1); + border-radius: 50%; + visibility: hidden; + } + .p-radiobutton.p-highlight .p-radiobutton-icon { + transform: translateZ(0) scale(1, 1); + visibility: visible; + } .p-radiobutton { width: 20px; height: 20px; } + .p-radiobutton .p-radiobutton-input { + 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: 2px solid #304562; + border-radius: 50%; + } .p-radiobutton .p-radiobutton-box { border: 2px solid #304562; background: #17212f; @@ -1424,15 +1866,7 @@ color: rgba(255, 255, 255, 0.87); border-radius: 50%; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover { - border-color: #ba68c8; - } - .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #cf95d9; - border-color: #ba68c8; + outline-color: transparent; } .p-radiobutton .p-radiobutton-box .p-radiobutton-icon { width: 12px; @@ -1440,31 +1874,51 @@ transition-duration: 0.2s; background-color: #ffffff; } - .p-radiobutton .p-radiobutton-box.p-highlight { + .p-radiobutton.p-highlight .p-radiobutton-box { border-color: #ba68c8; background: #ba68c8; } - .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + border-color: #ba68c8; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { border-color: #a241b2; background: #a241b2; - color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon { + background-color: #ffffff; + } + .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; } .p-radiobutton.p-invalid > .p-radiobutton-box { border-color: #ef9a9a; } - .p-radiobutton:focus { - outline: 0 none; + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #304562; } - .p-input-filled .p-radiobutton .p-radiobutton-box { + .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box { + background: #ba68c8; + } + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { background-color: #304562; } - .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover { + .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { + background: #a241b2; + } + .p-input-filled .p-radiobutton .p-radiobutton-box { background-color: #304562; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight { + .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box { background: #ba68c8; } - .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box { + background-color: #304562; + } + .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box { background: #a241b2; } .p-rating { @@ -1610,6 +2064,15 @@ .p-treeselect.p-treeselect-clearable .p-treeselect-label { padding-right: 1.5rem; } + .p-treeselect.p-variant-filled { + background: #304562; + } + .p-treeselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-treeselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } .p-treeselect .p-treeselect-label { padding: 0.5rem 0.5rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; @@ -1709,44 +2172,78 @@ .p-input-filled .p-treeselect:not(.p-disabled).p-focus { background-color: #304562; } - .p-togglebutton.p-button { + .p-togglebutton { + position: relative; + display: inline-flex; + user-select: none; + vertical-align: bottom; + } + .p-togglebutton-input { + cursor: pointer; + } + .p-togglebutton .p-button { + flex: 1 1 auto; + } + .p-togglebutton .p-togglebutton-input { + 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 #304562; + border-radius: 3px; + } + .p-togglebutton .p-button { background: #1f2d40; border: 1px solid #304562; color: rgba(255, 255, 255, 0.87); transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; + outline-color: transparent; } - .p-togglebutton.p-button .p-button-icon-left, - .p-togglebutton.p-button .p-button-icon-right { - color: rgba(255, 255, 255, 0.6); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { - background: rgba(255, 255, 255, 0.03); - border-color: #304562; - color: rgba(255, 255, 255, 0.87); - } - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left, - .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-right { + .p-togglebutton .p-button .p-button-icon-left, + .p-togglebutton .p-button .p-button-icon-right { color: rgba(255, 255, 255, 0.6); } - .p-togglebutton.p-button.p-highlight { + .p-togglebutton.p-highlight .p-button { background: #ba68c8; border-color: #ba68c8; color: #ffffff; } - .p-togglebutton.p-button.p-highlight .p-button-icon-left, - .p-togglebutton.p-button.p-highlight .p-button-icon-right { + .p-togglebutton.p-highlight .p-button .p-button-icon-left, + .p-togglebutton.p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button { + background: rgba(255, 255, 255, 0.03); + border-color: #304562; + color: rgba(255, 255, 255, 0.87); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right { + color: rgba(255, 255, 255, 0.6); + } + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button { background: #b052c0; border-color: #b052c0; color: #ffffff; } - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-left, - .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left, + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right { color: #ffffff; } - .p-togglebutton.p-button.p-invalid > .p-button { + .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + border-color: #ba68c8; + } + .p-togglebutton.p-invalid > .p-button { border-color: #ef9a9a; } .p-button { @@ -1902,296 +2399,296 @@ .p-fluid .p-button-icon-only { width: 2.357rem; } - .p-fluid .p-buttonset { + .p-fluid .p-button-group { display: flex; } - .p-fluid .p-buttonset .p-button { + .p-fluid .p-button-group .p-button { flex: 1; } - .p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { + .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary { color: #ffffff; background: #78909c; border: 1px solid #78909c; } - .p-button.p-button-secondary:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { + .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover { background: #69838f; color: #ffffff; border-color: #69838f; } - .p-button.p-button-secondary:not(:disabled):focus, .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { + .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus { box-shadow: 0 0 0 1px #a1b1ba; } - .p-button.p-button-secondary:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { + .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active { background: #5d747f; color: #ffffff; border-color: #5d747f; } - .p-button.p-button-secondary.p-button-outlined, .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { + .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined { background-color: transparent; color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { + .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active { background: rgba(120, 144, 156, 0.16); color: #78909c; border: 1px solid; } - .p-button.p-button-secondary.p-button-text, .p-buttonset.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { + .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text { background-color: transparent; color: #78909c; border-color: transparent; } - .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { + .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover { background: rgba(120, 144, 156, 0.04); border-color: transparent; color: #78909c; } - .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { + .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active { background: rgba(120, 144, 156, 0.16); border-color: transparent; color: #78909c; } - .p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { + .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info { color: #121212; background: #81d4fa; border: 1px solid #81d4fa; } - .p-button.p-button-info:not(:disabled):hover, .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { + .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover { background: #5dc8f9; color: #121212; border-color: #5dc8f9; } - .p-button.p-button-info:not(:disabled):focus, .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { + .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus { box-shadow: 0 0 0 1px #a7e1fc; } - .p-button.p-button-info:not(:disabled):active, .p-buttonset.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { + .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active { background: #38bbf7; color: #121212; border-color: #38bbf7; } - .p-button.p-button-info.p-button-outlined, .p-buttonset.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { + .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined { background-color: transparent; color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { + .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { + .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active { background: rgba(129, 212, 250, 0.16); color: #81d4fa; border: 1px solid; } - .p-button.p-button-info.p-button-text, .p-buttonset.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { + .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text { background-color: transparent; color: #81d4fa; border-color: transparent; } - .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { + .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover { background: rgba(129, 212, 250, 0.04); border-color: transparent; color: #81d4fa; } - .p-button.p-button-info.p-button-text:not(:disabled):active, .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { + .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active { background: rgba(129, 212, 250, 0.16); border-color: transparent; color: #81d4fa; } - .p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { + .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success { color: #121212; background: #c5e1a5; border: 1px solid #c5e1a5; } - .p-button.p-button-success:not(:disabled):hover, .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { + .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover { background: #b2d788; color: #121212; border-color: #b2d788; } - .p-button.p-button-success:not(:disabled):focus, .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { + .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus { box-shadow: 0 0 0 1px #d6eac0; } - .p-button.p-button-success:not(:disabled):active, .p-buttonset.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { + .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active { background: #9fce6b; color: #121212; border-color: #9fce6b; } - .p-button.p-button-success.p-button-outlined, .p-buttonset.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { + .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined { background-color: transparent; color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { + .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { + .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active { background: rgba(197, 225, 165, 0.16); color: #c5e1a5; border: 1px solid; } - .p-button.p-button-success.p-button-text, .p-buttonset.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { + .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text { background-color: transparent; color: #c5e1a5; border-color: transparent; } - .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { + .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover { background: rgba(197, 225, 165, 0.04); border-color: transparent; color: #c5e1a5; } - .p-button.p-button-success.p-button-text:not(:disabled):active, .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { + .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active { background: rgba(197, 225, 165, 0.16); border-color: transparent; color: #c5e1a5; } - .p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { + .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning { color: #121212; background: #ffe082; border: 1px solid #ffe082; } - .p-button.p-button-warning:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { + .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover { background: #ffd65c; color: #121212; border-color: #ffd65c; } - .p-button.p-button-warning:not(:disabled):focus, .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { + .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus { box-shadow: 0 0 0 1px #ffe9a8; } - .p-button.p-button-warning:not(:disabled):active, .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { + .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active { background: #ffcd35; color: #121212; border-color: #ffcd35; } - .p-button.p-button-warning.p-button-outlined, .p-buttonset.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { + .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined { background-color: transparent; color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { + .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { + .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active { background: rgba(255, 224, 130, 0.16); color: #ffe082; border: 1px solid; } - .p-button.p-button-warning.p-button-text, .p-buttonset.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { + .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text { background-color: transparent; color: #ffe082; border-color: transparent; } - .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { + .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover { background: rgba(255, 224, 130, 0.04); border-color: transparent; color: #ffe082; } - .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { + .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active { background: rgba(255, 224, 130, 0.16); border-color: transparent; color: #ffe082; } - .p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { + .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help { color: #121212; background: #ce93d8; border: 1px solid #ce93d8; } - .p-button.p-button-help:not(:disabled):hover, .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { + .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover { background: #c278ce; color: #121212; border-color: #c278ce; } - .p-button.p-button-help:not(:disabled):focus, .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { + .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus { box-shadow: 0 0 0 1px #ddb3e4; } - .p-button.p-button-help:not(:disabled):active, .p-buttonset.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { + .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active { background: #b65ec5; color: #121212; border-color: #b65ec5; } - .p-button.p-button-help.p-button-outlined, .p-buttonset.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { + .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined { background-color: transparent; color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { + .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { + .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active { background: rgba(206, 147, 216, 0.16); color: #ce93d8; border: 1px solid; } - .p-button.p-button-help.p-button-text, .p-buttonset.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { + .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text { background-color: transparent; color: #ce93d8; border-color: transparent; } - .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { + .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover { background: rgba(206, 147, 216, 0.04); border-color: transparent; color: #ce93d8; } - .p-button.p-button-help.p-button-text:not(:disabled):active, .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { + .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active { background: rgba(206, 147, 216, 0.16); border-color: transparent; color: #ce93d8; } - .p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { + .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger { color: #121212; background: #f48fb1; border: 1px solid #f48fb1; } - .p-button.p-button-danger:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { + .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover { background: #f16c98; color: #121212; border-color: #f16c98; } - .p-button.p-button-danger:not(:disabled):focus, .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { + .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus { box-shadow: 0 0 0 1px #f7b1c8; } - .p-button.p-button-danger:not(:disabled):active, .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { + .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active { background: #ed4980; color: #121212; border-color: #ed4980; } - .p-button.p-button-danger.p-button-outlined, .p-buttonset.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { + .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined { background-color: transparent; color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { + .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { + .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active { background: rgba(244, 143, 177, 0.16); color: #f48fb1; border: 1px solid; } - .p-button.p-button-danger.p-button-text, .p-buttonset.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { + .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text { background-color: transparent; color: #f48fb1; border-color: transparent; } - .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { + .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover { background: rgba(244, 143, 177, 0.04); border-color: transparent; color: #f48fb1; } - .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { + .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active { background: rgba(244, 143, 177, 0.16); border-color: transparent; color: #f48fb1; @@ -3303,6 +3800,62 @@ .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(186, 104, 200, 0.24); } + .p-tree-container { + margin: 0; + padding: 0; + list-style-type: none; + overflow: auto; + } + .p-treenode-children { + margin: 0; + padding: 0; + list-style-type: none; + } + .p-treenode-selectable { + cursor: pointer; + user-select: none; + } + .p-tree-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + flex-shrink: 0; + } + .p-treenode-leaf > .p-treenode-content .p-tree-toggler { + visibility: hidden; + } + .p-treenode-content { + display: flex; + align-items: center; + } + .p-tree-filter { + width: 100%; + } + .p-tree-filter-container { + position: relative; + display: block; + width: 100%; + } + .p-tree-filter-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-tree-loading { + position: relative; + min-height: 4rem; + } + .p-tree .p-tree-loading-overlay { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + } .p-tree { border: 1px solid #304562; background: #1f2d40; @@ -3351,7 +3904,7 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox { margin-right: 0.5rem; } - .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { @@ -3401,6 +3954,133 @@ .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { background: rgba(162, 65, 178, 0.16); } + .p-treetable { + position: relative; + } + .p-treetable > .p-treetable-wrapper { + overflow: auto; + } + .p-treetable table { + border-collapse: collapse; + width: 100%; + table-layout: fixed; + } + .p-treetable .p-sortable-column { + cursor: pointer; + user-select: none; + } + .p-treetable-selectable .p-treetable-tbody > tr { + cursor: pointer; + } + .p-treetable-toggler { + cursor: pointer; + user-select: none; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + vertical-align: middle; + overflow: hidden; + position: relative; + } + .p-treetable-toggler + .p-checkbox { + vertical-align: middle; + } + .p-treetable-toggler + .p-checkbox + span { + vertical-align: middle; + } + /* Resizable */ + .p-treetable-resizable > .p-treetable-wrapper { + overflow-x: auto; + } + .p-treetable-resizable .p-treetable-thead > tr > th, + .p-treetable-resizable .p-treetable-tfoot > tr > td, + .p-treetable-resizable .p-treetable-tbody > tr > td { + overflow: hidden; + } + .p-treetable-resizable .p-resizable-column { + background-clip: padding-box; + position: relative; + } + .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer { + display: none; + } + .p-treetable .p-column-resizer { + display: block; + position: absolute; + top: 0; + right: 0; + margin: 0; + width: 0.5rem; + height: 100%; + padding: 0px; + cursor: col-resize; + border: 1px solid transparent; + } + .p-treetable .p-column-resizer-helper { + width: 1px; + position: absolute; + z-index: 10; + display: none; + } + /* Scrollable */ + .p-treetable-scrollable-wrapper { + position: relative; + } + .p-treetable-scrollable-header, + .p-treetable-scrollable-footer { + overflow: hidden; + border: 0 none; + } + .p-treetable-scrollable-body { + overflow: auto; + position: relative; + } + .p-treetable-virtual-table { + position: absolute; + } + /* Frozen Columns */ + .p-treetable-frozen-view .p-treetable-scrollable-body { + overflow: hidden; + } + .p-treetable-unfrozen-view { + position: absolute; + top: 0px; + left: 0px; + } + /* Reorder */ + .p-treetable-reorder-indicator-up, + .p-treetable-reorder-indicator-down { + position: absolute; + display: none; + } + /* Loader */ + .p-treetable .p-treetable-loading-overlay { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + } + /* Alignment */ + .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-left, + .p-treetable .p-treetable-tfoot > tr > td.p-align-left { + text-align: left; + justify-content: flex-start; + } + .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-right, + .p-treetable .p-treetable-tfoot > tr > td.p-align-right { + text-align: right; + justify-content: flex-end; + } + .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content, + .p-treetable .p-treetable-tbody > tr > td.p-align-center, + .p-treetable .p-treetable-tfoot > tr > td.p-align-center { + text-align: center; + justify-content: center; + } .p-treetable .p-paginator-top { border-width: 1px 0 1px 0; border-radius: 0; @@ -3868,6 +4548,129 @@ .p-splitter .p-splitter-gutter-resizing { background: #304562; } + .p-stepper .p-stepper-nav { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + list-style-type: none; + } + .p-stepper .p-stepper-header { + padding: 0.5rem; + } + .p-stepper .p-stepper-header .p-stepper-action { + transition: box-shadow 0.2s; + border-radius: 3px; + background: transparent; + outline-color: transparent; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number { + color: rgba(255, 255, 255, 0.87); + border: 0 none; + border-width: 2px; + background: transparent; + min-width: 2rem; + height: 2rem; + line-height: 2rem; + font-size: 1.143rem; + border-radius: 50%; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + } + .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-number { + background: rgba(186, 104, 200, 0.16); + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header.p-highlight .p-stepper-title { + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-header:not(.p-disabled):focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #cf95d9; + } + .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator { + background-color: #ba68c8; + } + .p-stepper .p-stepper-panels { + background: #1f2d40; + padding: 1rem; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper .p-stepper-separator { + background-color: #304562; + width: 100%; + height: 2px; + margin-inline-start: 1rem; + transition: box-shadow 0.2s; + } + .p-stepper.p-stepper-vertical { + display: flex; + flex-direction: column; + } + .p-stepper.p-stepper-vertical .p-stepper-toggleable-content { + display: flex; + flex: 1 1 auto; + background: #1f2d40; + color: rgba(255, 255, 255, 0.87); + } + .p-stepper.p-stepper-vertical .p-stepper-panel { + display: flex; + flex-direction: column; + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active { + flex: 1 1 auto; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header { + flex: initial; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content { + width: 100%; + padding-left: 1rem; + } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper.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.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator { + background-color: #ba68c8; + } + .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content { + padding-left: 3rem; + } .p-scrollpanel .p-scrollpanel-bar { background: #304562; border: 0 none; @@ -3877,6 +4680,68 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-tabview-nav-container { + position: relative; + } + .p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; + } + .p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; + } + .p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; + } + .p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; + } + .p-tabview-ink-bar { + display: none; + z-index: 1; + } + .p-tabview-nav-link:focus { + z-index: 1; + } + .p-tabview-close { + z-index: 1; + } + .p-tabview-title { + line-height: 1; + white-space: nowrap; + } + .p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + .p-tabview-nav-prev { + left: 0; + } + .p-tabview-nav-next { + right: 0; + } + .p-tabview-nav-content::-webkit-scrollbar { + display: none; + } .p-tabview .p-tabview-nav { background: transparent; border: 1px solid #304562; @@ -5973,6 +6838,64 @@ outline-offset: 0; box-shadow: 0 0 0 1px #cf95d9; } + .p-metergroup .p-metergroup-meter-container { + background: #304562; + border-radius: 3px; + } + .p-metergroup .p-metergroup-meter { + border: 0 none; + background: #ba68c8; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item { + line-height: 1.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-type { + background: #ba68c8; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-right: 0.5rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label { + margin-right: 1rem; + } + .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon { + width: 1rem; + height: 1rem; + margin-right: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container { + height: 0.5rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start { + margin-bottom: 1rem; + } + .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end { + margin-top: 1rem; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container { + width: 0.5rem; + height: 100%; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + } + .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) { + margin-left: 1rem; + } .p-progressbar { border: 0 none; height: 1.5rem; diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css index a0f2b3d145..5f4de9c15d 100644 --- a/public/themes/viva-dark/theme.css +++ b/public/themes/viva-dark/theme.css @@ -4651,7 +4651,6 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: rgba(255, 255, 255, 0.6); font-weight: 600; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; @@ -4661,6 +4660,24 @@ outline-offset: 0; box-shadow: 0 0 0 1px #9eade6; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: rgba(158, 173, 230, 0.16); color: #9eade6; @@ -4713,6 +4730,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css index 452ea3e38a..f2ab1954a4 100644 --- a/public/themes/viva-light/theme.css +++ b/public/themes/viva-light/theme.css @@ -4651,7 +4651,6 @@ transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; } .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title { - margin-left: 0.5rem; color: #898989; font-weight: 600; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; @@ -4661,6 +4660,24 @@ outline-offset: 0; box-shadow: 0 0 0 0.1rem #bbc7ee; } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-title { + margin-bottom: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-top .p-stepper-separator { + margin-bottom: 1rem; + } + .p-stepper .p-stepper-header.p-stepper-header-right .p-stepper-title { + margin-left: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-left .p-stepper-title { + margin-right: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-title { + margin-top: 0.5rem; + } + .p-stepper .p-stepper-header.p-stepper-header-bottom .p-stepper-separator { + margin-top: 1rem; + } .p-stepper .p-stepper-header.p-highlight .p-stepper-number { background: #ced6f1; color: #585858; @@ -4713,6 +4730,9 @@ width: 100%; padding-left: 1rem; } + .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-title { + margin-left: 0.5rem; + } .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator { flex: 0 0 auto; width: 2px; From 33fede629b5a8589fb7dfb7b33223075856518cc Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Wed, 14 Aug 2024 19:50:53 +0800 Subject: [PATCH 27/96] fix: #7013 Fix RadioButton appearing without tailwind style (#7047) --- components/doc/radiobutton/theming/tailwinddoc.js | 7 ++++++- components/lib/passthrough/tailwind/index.js | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/components/doc/radiobutton/theming/tailwinddoc.js b/components/doc/radiobutton/theming/tailwinddoc.js index dff43339c5..1649789142 100644 --- a/components/doc/radiobutton/theming/tailwinddoc.js +++ b/components/doc/radiobutton/theming/tailwinddoc.js @@ -10,7 +10,12 @@ const Tailwind = { root: { className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6') }, - input: ({ props }) => ({ + input: { + className: classNames( + 'absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer' + ), + }, + box: ({ props }) => ({ className: classNames( 'flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index ece250e1f8..c6541bd0d7 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -1090,7 +1090,10 @@ const Tailwind = { root: { className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6') }, - input: ({ props }) => ({ + input: { + className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer') + }, + box: ({ props }) => ({ className: classNames( 'flex justify-center items-center', 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out', From abbdf457145fa0311562b0b8df499b71fb7808f5 Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 14 Aug 2024 08:21:43 -0400 Subject: [PATCH 28/96] Fix #7046: TreeTable typescript for PT row/column (#7048) --- components/lib/treetable/treetable.d.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 4e28640577..560965101d 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -9,11 +9,13 @@ */ import * as React from 'react'; import { CSSProperties } from 'react'; -import { Column } from '../column'; +import { Column, ColumnPassThroughOptions } from '../column'; import { ComponentHooks } from '../componentbase/componentbase'; import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator'; import { PassThroughOptions } from '../passthrough'; +import { RowPassThroughOptions } from '../row/row'; +import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { TreeNode } from '../treenode'; import { IconType, PassThroughType } from '../utils/utils'; @@ -211,6 +213,19 @@ export interface TreeTablePassThroughOptions { * Uses to pass attributes to the hidden input's DOM element. */ hiddenInput?: TreeTablePassThroughType>; + /** + * Used to pass attributes to the Row helper components. + */ + row?: RowPassThroughOptions; + /** + * Used to pass attributes to the Column helper components. + */ + column?: ColumnPassThroughOptions; + /** + * Uses to pass attributes tooltip's DOM element. + * @type {TooltipPassThroughOptions} + */ + tooltip?: TooltipPassThroughOptions; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} From 0c4eeca583a41ee86f841f591ad62543ca465078 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Wed, 14 Aug 2024 12:22:31 +0000 Subject: [PATCH 29/96] Update API doc --- components/doc/common/apidoc/index.json | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 9726735a73..66276a8aeb 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -55976,6 +55976,27 @@ "type": "TreeTablePassThroughType>", "description": "Uses to pass attributes to the hidden input's DOM element." }, + { + "name": "row", + "optional": true, + "readonly": false, + "type": "RowPassThroughOptions", + "description": "Used to pass attributes to the Row helper components." + }, + { + "name": "column", + "optional": true, + "readonly": false, + "type": "ColumnPassThroughOptions", + "description": "Used to pass attributes to the Column helper components." + }, + { + "name": "tooltip", + "optional": true, + "readonly": false, + "type": "TooltipPassThroughOptions", + "description": "Uses to pass attributes tooltip's DOM element." + }, { "name": "hooks", "optional": true, From f22e634689bd84c6a008fc7f799957faa1b3fcaf Mon Sep 17 00:00:00 2001 From: Melloware Date: Thu, 15 Aug 2024 08:10:53 -0400 Subject: [PATCH 30/96] Fix #7050: HeaderCheckbox passthrough (#7053) --- components/lib/datatable/HeaderCell.js | 4 +++- components/lib/datatable/TableHeader.js | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js index 7587b1fefb..56f384bf6e 100644 --- a/components/lib/datatable/HeaderCell.js +++ b/components/lib/datatable/HeaderCell.js @@ -304,7 +304,9 @@ export const HeaderCell = React.memo((props) => { if (props.showSelectAll && getColumnProp('selectionMode') === 'multiple' && props.filterDisplay !== 'row') { const allRowsSelected = props.allRowsSelected(props.value); - return ; + return ( + + ); } return null; diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js index 3216aaedeb..ddac9f50ac 100644 --- a/components/lib/datatable/TableHeader.js +++ b/components/lib/datatable/TableHeader.js @@ -168,11 +168,11 @@ export const TableHeader = React.memo((props) => { }); }; - const createCheckbox = (selectionMode) => { + const createCheckbox = (column, selectionMode) => { if (props.showSelectAll && selectionMode === 'multiple') { const allRowsSelected = props.allRowsSelected(props.value); - return ; + return ; } return null; @@ -209,7 +209,7 @@ export const TableHeader = React.memo((props) => { const { filterHeaderStyle, style, filterHeaderClassName, className, frozen, columnKey, field, selectionMode, filter } = ColumnBase.getCProps(col); const colStyle = { ...(filterHeaderStyle || {}), ...(style || {}) }; const colKey = columnKey || field || i; - const checkbox = createCheckbox(selectionMode); + const checkbox = createCheckbox(col, selectionMode); const filterRow = createFilter(col, filter); const headerCellProps = mergeProps( { From d2bcc1993a3725ac4f3922b12bce9bf8e2a6dcd0 Mon Sep 17 00:00:00 2001 From: KumJungMin <37934668+KumJungMin@users.noreply.github.com> Date: Fri, 16 Aug 2024 00:11:28 +0900 Subject: [PATCH 31/96] Fix #6998: add closest check condition to detect handle icon drag. (#7051) * fix: add closest check condition to detect handle icon drag. * chore: change variable name to isDraggableHandle * refactor: remove redundant logic for isDraggableHandle --- components/lib/datatable/TableBody.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 368d38effd..2a86b36dff 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -592,15 +592,12 @@ export const TableBody = React.memo( const onRowMouseDown = (e) => { const { originalEvent: event } = e; - if (!isUnstyled() && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) { - event.currentTarget.draggable = true; - event.target.draggable = false; - } else if (isUnstyled() && DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') { - event.currentTarget.draggable = true; - event.target.draggable = false; - } else { - event.currentTarget.draggable = false; - } + const isDraggableHandle = isUnstyled() + ? DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]') + : DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle'); + + event.currentTarget.draggable = isDraggableHandle; + event.target.draggable = !isDraggableHandle; if (allowRowDrag(e)) { enableDragSelection(event, 'row'); From 2d97edeb94b6244ce6692431494b3a8be79041b9 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Fri, 16 Aug 2024 20:19:53 +0800 Subject: [PATCH 32/96] fix: #6868 Refactor location of tailwind styles (#7057) - Enable theme docs for tabview --- components/doc/tabview/theming/tailwinddoc.js | 64 +++++++++---------- components/lib/passthrough/tailwind/index.js | 47 +++++++------- pages/tabview/index.js | 13 +++- 3 files changed, 67 insertions(+), 57 deletions(-) diff --git a/components/doc/tabview/theming/tailwinddoc.js b/components/doc/tabview/theming/tailwinddoc.js index 6251d2e739..89d629a777 100644 --- a/components/doc/tabview/theming/tailwinddoc.js +++ b/components/doc/tabview/theming/tailwinddoc.js @@ -5,7 +5,7 @@ import Link from 'next/link'; export function TailwindDoc(props) { const code = { basic: ` -const Tailwind = { +const Tailwind = { tabview: { navContainer: ({ props }) => ({ className: classNames( @@ -23,30 +23,30 @@ const Tailwind = { nav: { className: classNames('flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex, list, margin, padding, and border styles. }, - tabpanel: { - header: ({ props }) => ({ - className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. - }), - headerAction: ({ parent, context }) => ({ - className: classNames( - 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. - 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. - 'transition-colors duration-200', // Transition duration style. - 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. - { - 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': - parent.state.activeIndex !== context.index, // Condition-based hover styles. - 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. - } - ), - style: { marginBottom: '-2px' } // Negative margin style. - }), - headerTitle: { - className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. - }, - content: { - className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. - } + }, + tabpanel: { + header: ({ props }) => ({ + className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. + }), + headerAction: ({ parent, context }) => ({ + className: classNames( + 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. + 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. + 'transition-colors duration-200', // Transition duration style. + 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. + { + 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': + parent.state.activeIndex !== context.index, // Condition-based hover styles. + 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. + } + ), + style: { marginBottom: '-2px' } // Negative margin style. + }), + headerTitle: { + className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. + }, + content: { + className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. } } } @@ -55,7 +55,7 @@ const Tailwind = { const code2 = { javascript: ` -import React from 'react'; +import React from 'react'; import { TabView, TabPanel } from 'primereact/tabview'; export default function UnstyledDemo() { @@ -64,25 +64,25 @@ export default function UnstyledDemo() {

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo - enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

    - At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti + At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in - culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

    diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index c6541bd0d7..b104674f16 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -250,31 +250,30 @@ const Tailwind = { }, nav: { className: classNames('flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex, list, margin, padding, and border styles. + } + }, + tabpanel: { + header: ({ props }) => ({ + className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. + }), + headerAction: ({ parent, context }) => ({ + className: classNames( + 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. + 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. + 'transition-colors duration-200', // Transition duration style. + 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. + { + 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': parent.state.activeIndex !== context.index, // Condition-based hover styles. + 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. + } + ), + style: { marginBottom: '-2px' } // Negative margin style. + }), + headerTitle: { + className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. }, - tabpanel: { - header: ({ props }) => ({ - className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles. - }), - headerAction: ({ parent, context }) => ({ - className: classNames( - 'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles. - 'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles. - 'transition-colors duration-200', // Transition duration style. - 'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles. - { - 'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': - parent.state.activeIndex !== context.index, // Condition-based hover styles. - 'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles. - } - ), - style: { marginBottom: '-2px' } // Negative margin style. - }), - headerTitle: { - className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles. - }, - content: { - className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. - } + content: { + className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles. } }, splitter: { diff --git a/pages/tabview/index.js b/pages/tabview/index.js index c4b0e808ae..81ccd49b21 100644 --- a/pages/tabview/index.js +++ b/pages/tabview/index.js @@ -101,7 +101,18 @@ const TabViewDemo = () => { } ]; - return ; + return ( + + ); }; export default TabViewDemo; From e87c7a2e6c028ae6b022d404ccda1e00e82f4567 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 19 Aug 2024 11:27:21 +0000 Subject: [PATCH 33/96] Update API doc --- components/doc/common/apidoc/index.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 654a703474..e83dff1cf2 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -23148,6 +23148,14 @@ "default": "", "description": "Icon of the dropdown." }, + { + "name": "collapseIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon of collapse action." + }, { "name": "dataKey", "optional": true, @@ -23172,14 +23180,6 @@ "default": "", "description": "Icon of the dropdown." }, - { - "name": "collapseIcon", - "optional": true, - "readonly": false, - "type": "IconType", - "default": "", - "description": "Icon of the collapse action." - }, { "name": "editable", "optional": true, From e47f620bfa69cd1b74e3f9bfdcdc9b9db38f4083 Mon Sep 17 00:00:00 2001 From: onn-software <108300141+onn-software@users.noreply.github.com> Date: Mon, 19 Aug 2024 22:03:39 +0200 Subject: [PATCH 34/96] Fix: Typo in Tailwind secondary button style (#7062) --- components/doc/button/theming/tailwinddoc.js | 6 +++--- components/lib/passthrough/tailwind/index.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/doc/button/theming/tailwinddoc.js b/components/doc/button/theming/tailwinddoc.js index 1a6cd357d2..9882fcc5fc 100644 --- a/components/doc/button/theming/tailwinddoc.js +++ b/components/doc/button/theming/tailwinddoc.js @@ -5,7 +5,7 @@ import Link from 'next/link'; export function TailwindDoc(props) { const code = { basic: ` -const Tailwind = { +const Tailwind = { button: { root: ({ props, context }) => ({ className: classNames( @@ -51,7 +51,7 @@ const Tailwind = { { 'bg-transparent border-transparent': props.text && !props.plain, 'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain, - 'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, + 'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, 'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain, 'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain, 'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain, @@ -114,7 +114,7 @@ const Tailwind = { const code2 = { javascript: ` -import React from 'react'; +import React from 'react'; import { Button } from 'primereact/button'; export default function UnstyledDemo() { diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index b104674f16..051c4f1e04 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -668,7 +668,7 @@ const Tailwind = { { 'bg-transparent border-transparent': props.text && !props.plain, 'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain, - 'text-gray-500 dark:text-grayy-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, + 'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain, 'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain, 'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain, 'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain, From 2bc9397a2d5cf12652839f105e267e5af2390626 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Wed, 21 Aug 2024 13:49:13 +0800 Subject: [PATCH 35/96] fix: #7042 Add Tailwind styling for IconField - Create unstyled theme docs for IconField - Ensure iconPosition is passed contextually to the children of IconField - Use iconPosition to properly style InputIcon and InputText when it is enabled --- .../doc/iconfield/theming/tailwinddoc.js | 64 +++++++++++++++++++ components/lib/iconfield/IconField.js | 8 ++- components/lib/inputicon/InputIcon.js | 5 +- components/lib/inputicon/InputIconBase.js | 3 +- components/lib/inputtext/InputText.js | 3 +- components/lib/inputtext/InputTextBase.js | 3 +- components/lib/passthrough/tailwind/index.js | 17 +++++ pages/iconfield/index.js | 13 ++++ 8 files changed, 110 insertions(+), 6 deletions(-) create mode 100644 components/doc/iconfield/theming/tailwinddoc.js diff --git a/components/doc/iconfield/theming/tailwinddoc.js b/components/doc/iconfield/theming/tailwinddoc.js new file mode 100644 index 0000000000..31b5d5d7f3 --- /dev/null +++ b/components/doc/iconfield/theming/tailwinddoc.js @@ -0,0 +1,64 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import Link from 'next/link'; + +export function TailwindDoc(props) { + const code = { + basic: ` +const Tailwind = { + iconfield: { + root: { + className: classNames('relative') + } + }, + inputicon: { + root: ({ context }) => ({ + className: classNames('absolute top-1/2 -mt-2', { + 'left-2': context.iconPosition === 'left', + 'right-2': context.iconPosition === 'right' + }) + }) + }, +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { IconField } from 'primereact/iconfield'; +import { InputIcon } from 'primereact/inputicon'; +import { InputText } from 'primereact/inputtext'; + +export default function BasicDemo() { + return ( +
    + + + + + + + + + +
    + ) +} + ` + }; + + return ( + <> + +

    + PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

    + +

    A playground sample with the pre-built Tailwind theme.

    + +     + + ); +} diff --git a/components/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js index 59845ed00e..b8c8167236 100644 --- a/components/lib/iconfield/IconField.js +++ b/components/lib/iconfield/IconField.js @@ -1,4 +1,4 @@ -import React, { useContext, useRef } from 'react'; +import React, { Children, cloneElement, useContext, useRef } from 'react'; import { PrimeReactContext } from '../api/Api'; import { useMergeProps } from '../hooks/Hooks'; import { classNames } from '../utils/Utils'; @@ -29,7 +29,11 @@ export const IconField = React.memo( return (
    - {props.children} + {Children.map(props.children, (child, index) => + cloneElement(child, { + iconPosition: props.iconPosition + }) + )}
    ); }) diff --git a/components/lib/inputicon/InputIcon.js b/components/lib/inputicon/InputIcon.js index 4e27cbc248..105e542a51 100644 --- a/components/lib/inputicon/InputIcon.js +++ b/components/lib/inputicon/InputIcon.js @@ -13,7 +13,10 @@ export const InputIcon = React.memo( const { ptm, cx } = InputIconBase.setMetaData({ props, - ...props.__parentMetadata + ...props.__parentMetadata, + context: { + iconPosition: props.iconPosition + } }); const rootProps = mergeProps( diff --git a/components/lib/inputicon/InputIconBase.js b/components/lib/inputicon/InputIconBase.js index 283f41f741..966dd9eeae 100644 --- a/components/lib/inputicon/InputIconBase.js +++ b/components/lib/inputicon/InputIconBase.js @@ -8,7 +8,8 @@ export const InputIconBase = ComponentBase.extend({ defaultProps: { __TYPE: 'InputIcon', __parentMetadata: null, - className: null + className: null, + iconPosition: null }, css: { diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js index 9621782e17..712455e737 100644 --- a/components/lib/inputtext/InputText.js +++ b/components/lib/inputtext/InputText.js @@ -17,7 +17,8 @@ export const InputText = React.memo( props, ...props.__parentMetadata, context: { - disabled: props.disabled + disabled: props.disabled, + iconPosition: props.iconPosition } }); diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js index 8517dc67f0..fb480a41c0 100644 --- a/components/lib/inputtext/InputTextBase.js +++ b/components/lib/inputtext/InputTextBase.js @@ -26,7 +26,8 @@ export const InputTextBase = ComponentBase.extend({ onPaste: null, tooltip: null, tooltipOptions: null, - validateOnly: false + validateOnly: false, + iconPosition: null }, css: { diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 051c4f1e04..979b489e96 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -798,6 +798,10 @@ const Tailwind = { 'text-lg px-4 py-4': props.size == 'large', 'text-xs px-2 py-2': props.size == 'small', 'p-3 text-base': !props.size || typeof props.size === 'number' + }, + { + 'pl-8': context.iconPosition === 'left', + 'pr-8': props.iconPosition === 'right' } ) }) @@ -887,6 +891,19 @@ const Tailwind = { optionGroupIcon: 'ml-auto', transition: TRANSITIONS.overlay }, + iconfield: { + root: { + className: classNames('relative') + } + }, + inputicon: { + root: ({ context }) => ({ + className: classNames('absolute top-1/2 -mt-2', { + 'left-2': context.iconPosition === 'left', + 'right-2': context.iconPosition === 'right' + }) + }) + }, inputmask: { root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md' }, diff --git a/pages/iconfield/index.js b/pages/iconfield/index.js index 1863c8af43..8eec450745 100644 --- a/pages/iconfield/index.js +++ b/pages/iconfield/index.js @@ -7,6 +7,7 @@ import { TemplateDoc } from '@/components/doc/iconfield/templatedoc'; import { AccessibilityDoc } from '@/components/doc/iconfield/accessibilitydoc'; import { Wireframe } from '@/components/doc/iconfield/pt/wireframe'; import { StyledDoc } from '@/components/doc/iconfield/theming/styleddoc'; +import { TailwindDoc } from '@/components/doc/iconfield/theming/tailwinddoc'; const IconFieldDemo = () => { const docs = [ @@ -50,6 +51,18 @@ const IconFieldDemo = () => { id: 'styled', label: 'Styled', component: StyledDoc + }, + { + id: 'unstyled', + label: 'Unstyled', + description: 'Theming is implemented with the pass through properties in unstyled mode.', + children: [ + { + id: 'tailwind', + label: 'Tailwind', + component: TailwindDoc + } + ] } ]; From 8d6e24ff40057d3587e2676674b1c339c2fa0929 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Wed, 21 Aug 2024 13:56:00 +0800 Subject: [PATCH 36/96] chore: #7042 Add additional doc for styling --- components/doc/iconfield/theming/tailwinddoc.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/components/doc/iconfield/theming/tailwinddoc.js b/components/doc/iconfield/theming/tailwinddoc.js index 31b5d5d7f3..de24dd8fef 100644 --- a/components/doc/iconfield/theming/tailwinddoc.js +++ b/components/doc/iconfield/theming/tailwinddoc.js @@ -19,6 +19,19 @@ const Tailwind = { }) }) }, + // For each input wrapped with IconField you will need to add styling. + // The following is an example for InputText + inputtext: { + root: ({ props, context }) => ({ + className: classNames( + // Extend the root stylings with the following: + { + 'pl-8': context.iconPosition === 'left', + 'pr-8': props.iconPosition === 'right' + } + ) + }) + }, } ` }; From fac3628f642aa8ed4a7d2a45e7fa92aa10f7a1cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toprak=20Ko=C3=A7?= Date: Wed, 21 Aug 2024 14:22:24 +0300 Subject: [PATCH 37/96] Updated the api doc --- components/doc/common/apidoc/index.json | 35 ++++++++++++++++++------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index deba3c73d8..37741f3162 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -40980,6 +40980,14 @@ "default": "", "description": "Used to get the child elements of the component." }, + { + "name": "collapseIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon used when a submenu is expanded." + }, { "name": "expandedKeys", "optional": true, @@ -40988,6 +40996,14 @@ "default": "", "description": "A map of keys to represent the expansion state in controlled mode." }, + { + "name": "expandIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon used when a submenu is collapsed." + }, { "name": "model", "optional": true, @@ -41020,14 +41036,6 @@ "default": "", "description": "Used to configure passthrough(pt) options of the component." }, - { - "name": "submenuIcon", - "optional": true, - "readonly": false, - "type": "IconType", - "default": "", - "description": "Icon of the submenu." - }, { "name": "transitionOptions", "optional": true, @@ -41160,11 +41168,18 @@ "description": "Uses to pass attributes to the header content's DOM element." }, { - "name": "submenuIcon", + "name": "expandIcon", + "optional": true, + "readonly": false, + "type": "PanelMenuPassThroughType | SVGProps>", + "description": "Uses to pass attributes to the expand icon's DOM element." + }, + { + "name": "collapseIcon", "optional": true, "readonly": false, "type": "PanelMenuPassThroughType | SVGProps>", - "description": "Uses to pass attributes to the submenuIcon's DOM element." + "description": "Uses to pass attributes to the collapse icon's DOM element." }, { "name": "headerIcon", From dc9fdc6607c731372ab30db554656d30a4bfb17a Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 21 Aug 2024 08:01:37 -0400 Subject: [PATCH 38/96] Fix #6855: ConfirmDialog group missing from typescript (#7068) --- components/lib/confirmdialog/confirmdialog.d.ts | 4 ++++ components/lib/panelmenu/PanelMenu.js | 10 +++------- components/lib/panelmenu/PanelMenuSub.js | 8 ++------ 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/components/lib/confirmdialog/confirmdialog.d.ts b/components/lib/confirmdialog/confirmdialog.d.ts index dc816566f8..03a7f9c151 100644 --- a/components/lib/confirmdialog/confirmdialog.d.ts +++ b/components/lib/confirmdialog/confirmdialog.d.ts @@ -162,6 +162,10 @@ interface ConfirmDialogOptions { * @group Properties */ export interface ConfirmDialogProps extends Omit { + /** + * Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance. + */ + group?: string | undefined; /** * Unique tag key used to separate the confirmDialog components in the page. */ diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js index f393af6322..0a26b933cb 100644 --- a/components/lib/panelmenu/PanelMenu.js +++ b/components/lib/panelmenu/PanelMenu.js @@ -290,13 +290,9 @@ export const PanelMenu = React.memo( }, getPTOptions(item, 'headerSubmenuIcon', index) ); - - const submenuIcon = item.items && IconUtils.getJSXIcon( - active - ? (props.collapseIcon || ) - : (props.expandIcon || ) - ); - + + const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.collapseIcon || : props.expandIcon || ); + const headerLabelProps = mergeProps( { className: cx('headerLabel') diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js index ad6036dc85..7360cf44ae 100644 --- a/components/lib/panelmenu/PanelMenuSub.js +++ b/components/lib/panelmenu/PanelMenuSub.js @@ -185,12 +185,8 @@ export const PanelMenuSub = React.memo( getPTOptions(processedItem, 'submenuicon', index) ); - const submenuIcon = item.items && IconUtils.getJSXIcon( - active - ? (props.collapseIcon || ) - : (props.expandIcon || ) - ); - + const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.collapseIcon || : props.expandIcon || ); + const submenu = createSubmenu(processedItem, active); const actionProps = mergeProps( { From 5691f2b948f647abee2212584a72a8ff3e6184f6 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Wed, 21 Aug 2024 12:02:14 +0000 Subject: [PATCH 39/96] Update API doc --- components/doc/common/apidoc/index.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 8bde6ec209..459447dde1 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -14419,6 +14419,14 @@ "default": "", "description": "Footer content of the confirm dialog." }, + { + "name": "group", + "optional": true, + "readonly": false, + "type": "string", + "default": "", + "description": "Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance." + }, { "name": "header", "optional": true, From 2e898bec463ffaeabd7236c5bd7928f4b44f9a2f Mon Sep 17 00:00:00 2001 From: Melloware Date: Fri, 23 Aug 2024 08:30:55 -0400 Subject: [PATCH 40/96] Update csslayerdoc.js --- components/doc/tailwind/csslayerdoc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc/tailwind/csslayerdoc.js b/components/doc/tailwind/csslayerdoc.js index 4fcc5abc54..62269257df 100644 --- a/components/doc/tailwind/csslayerdoc.js +++ b/components/doc/tailwind/csslayerdoc.js @@ -7,7 +7,7 @@ export function CSSLayerDoc(props) { @layer tailwind-base, primereact, tailwind-utilities; /* IMPORTANT: In "styled" mode you must add the PrimeReact Theme here. Do NOT include in "unstyled" mode */ -@import 'primereact/resources/themes/lara-light-blue/theme.css' layer(primereact); +@import 'primereact/resources/themes/lara-light-blue/theme.css' @layer tailwind-base { @tailwind base; From ee33efaf62a9bcfe34e871f593d20e0397d7293a Mon Sep 17 00:00:00 2001 From: Ivan Date: Fri, 23 Aug 2024 14:37:38 +0200 Subject: [PATCH 41/96] Fix #7074: ConfirmDialog - RejectButton classes in unstyled mode are not applied (#7075) * fix: ConfirmDialog typescript definitions * fix: Reject button merge props with pt --- components/doc/common/apidoc/index.json | 4 +-- components/lib/confirmdialog/ConfirmDialog.js | 27 ++++++++++--------- .../lib/confirmdialog/confirmdialog.d.ts | 7 ++--- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 459447dde1..ed16068fdc 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -14946,14 +14946,14 @@ "name": "rejectButton", "optional": true, "readonly": false, - "type": "ButtonPassThroughOptions", + "type": "ConfirmDialogPassThroughType>", "description": "Uses to pass attributes to the Button component." }, { "name": "acceptButton", "optional": true, "readonly": false, - "type": "ButtonPassThroughOptions", + "type": "ConfirmDialogPassThroughType>", "description": "Uses to pass attributes to the Button component." }, { diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js index 4e13635f87..35ddef6195 100644 --- a/components/lib/confirmdialog/ConfirmDialog.js +++ b/components/lib/confirmdialog/ConfirmDialog.js @@ -154,18 +154,21 @@ export const ConfirmDialog = React.memo( getPropValue('rejectClassName') ); - const rejectButtonProps = { - label: rejectLabel, - autoFocus: defaultFocus === 'reject', - icon: getPropValue('rejectIcon'), - className: classNames(getPropValue('rejectClassName'), cx('rejectButton', { getPropValue })), - onClick: reject, - pt: ptm('rejectButton'), - unstyled: props.unstyled, - __parentMetadata: { - parent: metaData - } - }; + const rejectButtonProps = mergeProps( + { + label: rejectLabel, + autoFocus: defaultFocus === 'reject', + icon: getPropValue('rejectIcon'), + className: classNames(getPropValue('rejectClassName'), cx('rejectButton', { getPropValue })), + onClick: reject, + pt: ptm('rejectButton'), + unstyled: props.unstyled, + __parentMetadata: { + parent: metaData + } + }, + ptm('rejectButton') + ); const acceptButtonProps = mergeProps( { diff --git a/components/lib/confirmdialog/confirmdialog.d.ts b/components/lib/confirmdialog/confirmdialog.d.ts index 03a7f9c151..d4be0f18fb 100644 --- a/components/lib/confirmdialog/confirmdialog.d.ts +++ b/components/lib/confirmdialog/confirmdialog.d.ts @@ -9,7 +9,6 @@ */ import * as React from 'react'; import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition'; -import { ButtonPassThroughOptions } from '../button/button'; import { ComponentHooks } from '../componentbase/componentbase'; import { DialogProps } from '../dialog'; import { PassThroughOptions } from '../passthrough'; @@ -73,14 +72,12 @@ export interface ConfirmDialogPassThroughOptions { footer?: ConfirmDialogPassThroughType>; /** * Uses to pass attributes to the Button component. - * @see {@link ButtonPassThroughOptions} */ - rejectButton?: ButtonPassThroughOptions; + rejectButton?: ConfirmDialogPassThroughType>; /** * Uses to pass attributes to the Button component. - * @see {@link ButtonPassThroughOptions} */ - acceptButton?: ButtonPassThroughOptions; + acceptButton?: ConfirmDialogPassThroughType>; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} From 91ce6052b58d1d0851ded5079116bad5d5a99cfc Mon Sep 17 00:00:00 2001 From: Sumeet Mourya <150683936+Sumeet-2023@users.noreply.github.com> Date: Fri, 23 Aug 2024 14:58:49 +0200 Subject: [PATCH 42/96] Correct passthrough (pt) implementation for Stepperpanel. (#7069) * correct passthrough (pt) implementation for stepperpanel. Updated Stepper components to use mergeProps for pt attributes. * style: apply code formatting. * Snapshot updated for Stepper/Stepperpanel. --- components/lib/stepper/Stepper.js | 43 +++++----- components/lib/stepper/StepperBase.js | 10 +-- components/lib/stepper/StepperContent.js | 25 +++--- components/lib/stepper/StepperHeader.js | 17 +++- .../__snapshots__/Stepper.spec.js.snap | 82 ++++++++++++++----- 5 files changed, 111 insertions(+), 66 deletions(-) diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js index d21d010133..f7f59a0ed7 100644 --- a/components/lib/stepper/Stepper.js +++ b/components/lib/stepper/Stepper.js @@ -133,17 +133,15 @@ export const Stepper = React.memo( const createPanel = () => { return stepperPanels().map((step, index) => { - const panelProps = mergeProps( - { - className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index, headerPosition: props.headerPosition, orientation: props.orientation })), - 'aria-current': isStepActive(index) && 'step', - role: 'presentation', - 'data-p-highlight': isStepActive(index), - 'data-p-disabled': isItemDisabled(index), - 'data-p-active': isStepActive(index) - }, - ptm('stepperpanel') - ); + const panelProps = mergeProps({ + className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index, headerPosition: props.headerPosition, orientation: props.orientation })), + 'aria-current': isStepActive(index) && 'step', + role: 'presentation', + 'data-p-highlight': isStepActive(index), + 'data-p-disabled': isItemDisabled(index), + 'data-p-active': isStepActive(index), + ...getStepPT(step, 'header', index) + }); return (
  • @@ -233,19 +231,16 @@ export const Stepper = React.memo( return stepperPanels().map((step, index) => { const contentRef = React.createRef(null); - const navProps = mergeProps( - { - ref: navRef, - className: cx('panel', { props, index, isStepActive }), - 'aria-current': isStepActive(index) && 'step', - ...getStepPT(step, 'root', index), - ...getStepPT(step, 'panel', index), - 'data-p-highlight': isStepActive(index), - 'data-p-disabled': isItemDisabled(index), - 'data-p-active': isStepActive(index) - }, - ptm('nav') - ); + const navProps = mergeProps({ + ref: navRef, + className: cx('stepper.panel', { props, index, isStepActive }), + 'aria-current': isStepActive(index) && 'step', + ...getStepPT(step, 'root', index), + ...getStepPT(step, 'panel', index), + 'data-p-highlight': isStepActive(index), + 'data-p-disabled': isItemDisabled(index), + 'data-p-active': isStepActive(index) + }); const headerProps = mergeProps({ className: cx('stepper.header', { step, isStepActive, isItemDisabled, index }), diff --git a/components/lib/stepper/StepperBase.js b/components/lib/stepper/StepperBase.js index 832077751e..0425906933 100644 --- a/components/lib/stepper/StepperBase.js +++ b/components/lib/stepper/StepperBase.js @@ -25,13 +25,13 @@ const classes = { content: ({ props }) => classNames('p-stepper-content', { 'p-toggleable-content': props.orientation === 'vertical' + }), + panel: ({ props, isStepActive, index }) => + classNames('p-stepper-panel', { + 'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index) }) }, - panelContainer: 'p-stepper-panels', - panel: ({ props, isStepActive, index }) => - classNames('p-stepper-panel', { - 'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index) - }) + panelContainer: 'p-stepper-panels' }; const styles = ` diff --git a/components/lib/stepper/StepperContent.js b/components/lib/stepper/StepperContent.js index c0711d47e4..83363bcfea 100644 --- a/components/lib/stepper/StepperContent.js +++ b/components/lib/stepper/StepperContent.js @@ -4,21 +4,18 @@ import { useMergeProps } from '../hooks/Hooks'; export const StepperContent = React.memo( React.forwardRef((props, ref) => { const mergeProps = useMergeProps(); - const { cx, ptm } = props; + const { cx } = props; - const rootProps = mergeProps( - { - ref: ref, - id: props.id, - className: cx('stepper.content', { stepperpanel: props.stepperpanel, index: props.index }), - role: 'tabpanel', - 'aria-labelledby': props.ariaLabelledby, - ...props.getStepPT(props.stepperpanel, 'root', props.index), - ...props.getStepPT(props.stepperpanel, 'content', props.index), - 'data-p-active': props.active - }, - ptm('stepperpanel') - ); + const rootProps = mergeProps({ + ref: ref, + id: props.id, + className: cx('stepper.content', { stepperpanel: props.stepperpanel, index: props.index }), + role: 'tabpanel', + 'aria-labelledby': props.ariaLabelledby, + ...props.getStepPT(props.stepperpanel, 'root', props.index), + ...props.getStepPT(props.stepperpanel, 'content', props.index), + 'data-p-active': props.active + }); const createContent = () => { const ComponentToRender = props.template; diff --git a/components/lib/stepper/StepperHeader.js b/components/lib/stepper/StepperHeader.js index 1c984fc5c8..b0735b76dc 100644 --- a/components/lib/stepper/StepperHeader.js +++ b/components/lib/stepper/StepperHeader.js @@ -14,15 +14,26 @@ export const StepperHeader = React.memo( type: 'button', tabIndex: props.disabled ? -1 : undefined, 'aria-controls': props.ariaControls, - onClick: (e) => props.clickCallback(e, props.index) + onClick: (e) => props.clickCallback(e, props.index), + ...props.getStepPT(props.stepperpanel, 'action', props.index) + }); + + const numberProps = mergeProps({ + className: cx('stepper.number'), + ...props.getStepPT(props.stepperpanel, 'number', props.index) + }); + + const titleProps = mergeProps({ + className: cx('stepper.title'), + ...props.getStepPT(props.stepperpanel, 'title', props.index) }); return props.template ? ( props.template() ) : ( ); }) diff --git a/components/lib/stepper/__snapshots__/Stepper.spec.js.snap b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap index 9e912e9ee5..ab3a085b99 100644 --- a/components/lib/stepper/__snapshots__/Stepper.spec.js.snap +++ b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap @@ -38,23 +38,26 @@ exports[`Stepper header position bottom 1`] = ` data-p-active="true" data-p-disabled="false" data-p-highlight="true" - data-pc-section="stepperpanel" + data-pc-section="header" role="presentation" >
    • + + + + + + + +
    p-stepper-content Container element of stepper content.
    p-stepper-startStart content container.
    p-stepper-endEnd content container.
    diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js index f7f59a0ed7..d88d037f1c 100644 --- a/components/lib/stepper/Stepper.js +++ b/components/lib/stepper/Stepper.js @@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api'; import { useHandleStyle } from '../componentbase/ComponentBase'; import { CSSTransition } from '../csstransition/CSSTransition'; import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks'; -import { UniqueComponentId, classNames } from '../utils/Utils'; +import { UniqueComponentId, classNames, ObjectUtils } from '../utils/Utils'; import { StepperBase } from './StepperBase'; import { StepperContent } from './StepperContent'; import { StepperHeader } from './StepperHeader'; @@ -14,6 +14,8 @@ export const Stepper = React.memo( const mergeProps = useMergeProps(); const context = React.useContext(PrimeReactContext); const props = StepperBase.getProps(inProps, context); + const start = ObjectUtils.getJSXElement(props.start, props); + const end = ObjectUtils.getJSXElement(props.end, props); const { ptm, cx, isUnstyled, ptmo } = StepperBase.setMetaData({ props }); @@ -23,6 +25,20 @@ export const Stepper = React.memo( useHandleStyle(StepperBase.css.styles, isUnstyled, { name: 'stepper' }); + const startProps = mergeProps( + { + className: cx('start') + }, + ptm('start') + ); + + const endProps = mergeProps( + { + className: cx('end') + }, + ptm('end') + ); + useMountEffect(() => { if (!idState) { setIdState(UniqueComponentId()); @@ -326,10 +342,10 @@ export const Stepper = React.memo( return (
    - {props.start && props.start()} + {start &&
    {start}
    } {props.orientation === 'horizontal' && createHorizontal()} {props.orientation === 'vertical' && createVertical()} - {props.end && props.end()} + {end &&
    {end}
    }
    ); }) diff --git a/components/lib/stepper/StepperBase.js b/components/lib/stepper/StepperBase.js index 0425906933..fd1b6734ff 100644 --- a/components/lib/stepper/StepperBase.js +++ b/components/lib/stepper/StepperBase.js @@ -31,7 +31,9 @@ const classes = { 'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index) }) }, - panelContainer: 'p-stepper-panels' + panelContainer: 'p-stepper-panels', + start: 'p-stepper-start', + end: 'p-stepper-end' }; const styles = ` @@ -134,7 +136,9 @@ export const StepperBase = ComponentBase.extend({ orientation: 'horizontal', headerPosition: 'right', linear: false, - onChangeStep: null + onChangeStep: null, + start: null, + end: null }, css: { classes, diff --git a/components/lib/stepper/stepper.d.ts b/components/lib/stepper/stepper.d.ts index 9d8454b7ab..93f40fbf7a 100644 --- a/components/lib/stepper/stepper.d.ts +++ b/components/lib/stepper/stepper.d.ts @@ -11,8 +11,10 @@ import * as React from 'react'; import { ComponentHooks } from '../componentbase/componentbase'; import { PassThroughOptions } from '../passthrough'; import { StepperPanelPassThroughOptionType } from '../stepperpanel/stepperpanel'; +import { PassThroughType } from '../utils'; export declare type StepperPassThroughOptionType = StepperPassThroughAttributes | ((options: StepperPassThroughMethodOptions) => StepperPassThroughAttributes | string) | string | null | undefined; +export declare type StepperPassThroughType = PassThroughType; /** * Custom passthrough(pt) option method. @@ -43,6 +45,14 @@ export interface StepperPassThroughOptions { * Used to pass attributes to the end handler's DOM element. */ stepperpanel?: StepperPanelPassThroughOptionType; + /** + * Uses to pass attributes to the start's DOM element. + */ + start?: StepperPassThroughType>; + /** + * Uses to pass attributes to the right's DOM element. + */ + end?: StepperPassThroughType>; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} @@ -122,6 +132,14 @@ export interface StepperProps { * Callback to invoke when an active panel is changed. */ onChangeStep?(event: StepperChangeEvent): void; + /** + * The template of start section. + */ + start?: React.ReactNode | ((props: StepperProps) => React.ReactNode); + /** + * The template of end section. + */ + end?: React.ReactNode | ((props: StepperProps) => React.ReactNode); /** * Uses to pass attributes to DOM elements inside the component. * @type {StepperPassThroughOptions} From e433da4f24c965cfbb868435825139aeb54200d4 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Mon, 9 Sep 2024 19:48:29 +0800 Subject: [PATCH 67/96] feat: #5644 Add missing tailwind styles (#7123) * feat: #5644 Add missing tailwind styles - Add tailwinddoc for floatlabel - Fix typing for floatlabel * chore: #5644 Fix typing * Update floatlabeldoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update basicdoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update primereact.all.js * Update floatlabeldoc.js * Update floatlabeldoc.js --------- Co-authored-by: Melloware --- components/doc/cascadeselect/floatlabeldoc.js | 6 +- components/doc/common/apidoc/index.json | 7 ++ components/doc/floatlabel/basicdoc.js | 6 +- .../doc/floatlabel/theming/tailwinddoc.js | 67 ++++++++++++++++--- components/doc/treeselect/floatlabeldoc.js | 10 +-- components/lib/api/api.d.ts | 5 ++ .../{FloatLabel.d.ts => floatlabel.d.ts} | 0 components/lib/passthrough/tailwind/index.js | 17 +++++ 8 files changed, 97 insertions(+), 21 deletions(-) rename components/lib/floatlabel/{FloatLabel.d.ts => floatlabel.d.ts} (100%) diff --git a/components/doc/cascadeselect/floatlabeldoc.js b/components/doc/cascadeselect/floatlabeldoc.js index b4f0b05abf..a6d3834a3f 100644 --- a/components/doc/cascadeselect/floatlabeldoc.js +++ b/components/doc/cascadeselect/floatlabeldoc.js @@ -85,7 +85,7 @@ export function FloatLabelDoc(props) { const code = { basic: ` - setSelectedCity(e.value)} options={countries} + setSelectedCity(e.value)} options={countries} optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} /> @@ -178,7 +178,7 @@ export default function FloatLabelDemo() { return (
    - setSelectedCity(e.value)} options={countries} + setSelectedCity(e.value)} options={countries} optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} /> @@ -290,7 +290,7 @@ export default function FloatLabelDemo() { return (
    - setSelectedCity(e.value)} options={countries} + setSelectedCity(e.value)} options={countries} optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} /> diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index c2aa3b5692..09bd2cb1ad 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -1235,6 +1235,13 @@ "type": "FileUploadPassThroughOptions", "description": "Custom passthrough(pt) options for FileUpload." }, + { + "name": "floatlabel", + "optional": true, + "readonly": false, + "type": "FloatLabelPassThroughOptions", + "description": "Custom passthrough(pt) options for FloatLabel." + }, { "name": "galleria", "optional": true, diff --git a/components/doc/floatlabel/basicdoc.js b/components/doc/floatlabel/basicdoc.js index 1386cb1d0a..9f600e1d0e 100644 --- a/components/doc/floatlabel/basicdoc.js +++ b/components/doc/floatlabel/basicdoc.js @@ -11,7 +11,7 @@ export function BasicDoc(props) { basic: ` setValue(e.target.value)} /> - + `, javascript: ` @@ -26,7 +26,7 @@ export default function BasicDemo() {
    setValue(e.target.value)} /> - +
    ) @@ -44,7 +44,7 @@ export default function BasicDemo() {
    setValue(e.target.value)} /> - +
    ) diff --git a/components/doc/floatlabel/theming/tailwinddoc.js b/components/doc/floatlabel/theming/tailwinddoc.js index 92ee79f341..dd7350886a 100644 --- a/components/doc/floatlabel/theming/tailwinddoc.js +++ b/components/doc/floatlabel/theming/tailwinddoc.js @@ -1,16 +1,63 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; import { DocSectionText } from '@/components/doc/common/docsectiontext'; import Link from 'next/link'; +import React from 'react'; + +export function TailwindDoc(props) { + const code = { + basic: ` +const Tailwind = { + floatlabel: { + root: { + className: classNames( + 'block relative', // root component style + '[&>label]:absolute [&>label]:pointer-events-none [&>label]:left-2 [&>label]:top-1/2 [&>label]:-mt-2 [&>label]:leading-none [&>label]:transition-all [&>label]:ease-in-out', // label style + '[&>textarea~label]:top-4', // textarea + '[&>input:focus~label]:-top-3 [&>input:focus~label]:text-xs', // input focus + '[&>input:autofill~label]:-top-3 [&>input:autofill~label]:text-xs', // input autofill + '[&>input.p-filled~label]:-top-3 [&>input.p-filled~label]:text-xs', // input filled + '[&>textarea:focus~label]:-top-3 [&>textarea:focus~label]:text-xs', // textarea focus + '[&>textarea.p-filled~label]:-top-3 [&>textarea.p-filled~label]:text-xs', // textarea filled + '[&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:-top-3 [&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:text-xs', // dropdown focus + '[&>input::placeholder]:opacity-0 [&>input::placeholder]:transition-all [&>input::placeholder]:ease-in-out', // placeholder + '[&>input::placeholder:focus]:opacity-100 [&>input::placeholder:focus]:transition-all [&>input::placeholder:focus]:ease-in-out' // placeholder focus + ) + } + }, +} + ` + }; + + const code2 = { + javascript: ` +import React from 'react'; +import { FloatLabel } from 'primereact/floatlabel'; +import { InputText } from 'primereact/inputtext'; + +export default function BasicDemo() { + return ( +
    + + setValue(e.target.value)} /> + + +
    + ) +} + ` + }; -export function TailwindDoc() { return ( - -

    - Visit{' '} - - Tailwind Presets - {' '} - project for detailed documentation, examples and ready-to-use presets about how to style PrimeReact components with Tailwind CSS. -

    -     + <> + +

    + PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '} + Tailwind Customization section for an example. +

    + +

    A playground sample with the pre-built Tailwind theme.

    + +     + ); } diff --git a/components/doc/treeselect/floatlabeldoc.js b/components/doc/treeselect/floatlabeldoc.js index 432ffdfe60..a25c2fd572 100644 --- a/components/doc/treeselect/floatlabeldoc.js +++ b/components/doc/treeselect/floatlabeldoc.js @@ -17,7 +17,7 @@ export function FloatLabelDoc(props) { const code = { basic: ` - setSelectedNodeKey(e.value)} options={nodes} + setSelectedNodeKey(e.value)} options={nodes} className="w-full"> @@ -31,7 +31,7 @@ import { NodeService } from './service/NodeService'; export default function FloatLabelDemo() { const [nodes, setNodes] = useState(null); const [selectedNodeKey, setSelectedNodeKey] = useState(null); - + useEffect(() => { NodeService.getTreeNodes().then((data) => setNodes(data)); }, []); @@ -39,7 +39,7 @@ export default function FloatLabelDemo() { return (
    - setSelectedNodeKey(e.value)} options={nodes} + setSelectedNodeKey(e.value)} options={nodes} className="w-full"> @@ -57,7 +57,7 @@ import { NodeService } from './service/NodeService'; export default function FloatLabelDemo() { const [nodes, setNodes] = useState(null); const [selectedNodeKey, setSelectedNodeKey] = useState(null); - + useEffect(() => { NodeService.getTreeNodes().then((data) => setNodes(data)); }, []); @@ -65,7 +65,7 @@ export default function FloatLabelDemo() { return (
    - setSelectedNodeKey(e.value)} + setSelectedNodeKey(e.value)} className="w-full"> diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts index 1204923e72..6afd46cea2 100644 --- a/components/lib/api/api.d.ts +++ b/components/lib/api/api.d.ts @@ -38,6 +38,7 @@ import { DropdownPassThroughOptions } from '../dropdown/dropdown'; import { EditorPassThroughOptions } from '../editor/editor'; import { FieldsetPassThroughOptions } from '../fieldset/fieldset'; import { FileUploadPassThroughOptions } from '../fileupload/fileupload'; +import { FloatLabelPassThroughOptions } from '../floatlabel/floatlabel'; import { GalleriaPassThroughOptions } from '../galleria/galleria'; import { ImagePassThroughOptions } from '../image/image'; import { InplacePassThroughOptions } from '../inplace/inplace'; @@ -428,6 +429,10 @@ export interface PrimeReactPTOptions { * Custom passthrough(pt) options for FileUpload. */ fileupload?: FileUploadPassThroughOptions; + /** + * Custom passthrough(pt) options for FloatLabel. + */ + floatlabel?: FloatLabelPassThroughOptions; /** * Custom passthrough(pt) options for FullCalendar. */ diff --git a/components/lib/floatlabel/FloatLabel.d.ts b/components/lib/floatlabel/floatlabel.d.ts similarity index 100% rename from components/lib/floatlabel/FloatLabel.d.ts rename to components/lib/floatlabel/floatlabel.d.ts diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 9dbb1d41e2..c03b1761de 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -891,6 +891,23 @@ const Tailwind = { optionGroupIcon: 'ml-auto', transition: TRANSITIONS.overlay }, + floatlabel: { + root: { + className: classNames( + 'block relative', // root component style + '[&>label]:absolute [&>label]:pointer-events-none [&>label]:left-2 [&>label]:top-1/2 [&>label]:-mt-2 [&>label]:leading-none [&>label]:transition-all [&>label]:ease-in-out', // label style + '[&>textarea~label]:top-4', // textarea + '[&>input:focus~label]:-top-3 [&>input:focus~label]:text-xs', // input focus + '[&>input:autofill~label]:-top-3 [&>input:autofill~label]:text-xs', // input autofill + '[&>input.p-filled~label]:-top-3 [&>input.p-filled~label]:text-xs', // input filled + '[&>textarea:focus~label]:-top-3 [&>textarea:focus~label]:text-xs', // textarea focus + '[&>textarea.p-filled~label]:-top-3 [&>textarea.p-filled~label]:text-xs', // textarea filled + '[&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:-top-3 [&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:text-xs', // dropdown focus + '[&>input::placeholder]:opacity-0 [&>input::placeholder]:transition-all [&>input::placeholder]:ease-in-out', // placeholder + '[&>input::placeholder:focus]:opacity-100 [&>input::placeholder:focus]:transition-all [&>input::placeholder:focus]:ease-in-out' // placeholder focus + ) + } + }, iconfield: { root: { className: classNames('relative') From 9b9cffdb5d20e19c8777a4d63155e76e5a880a97 Mon Sep 17 00:00:00 2001 From: Batuhan Tomo <91488737+Rekl0w@users.noreply.github.com> Date: Mon, 9 Sep 2024 15:54:31 +0300 Subject: [PATCH 68/96] Fix #7134:Refactor Dropdown component to support using option as value (#7141) --- components/lib/dropdown/Dropdown.js | 4 ++++ components/lib/dropdown/dropdown.d.ts | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js index 4ce9724498..7a526776a9 100644 --- a/components/lib/dropdown/Dropdown.js +++ b/components/lib/dropdown/Dropdown.js @@ -825,6 +825,10 @@ export const Dropdown = React.memo( }; const getOptionValue = (option) => { + if (props.useOptionAsValue) { + return option; + } + const optionValue = props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option ? option['value'] : ObjectUtils.resolveFieldData(option, 'value'); return props.optionValue || ObjectUtils.isNotEmpty(optionValue) ? optionValue : option; diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts index de11f4e693..5b84f2fb5f 100644 --- a/components/lib/dropdown/dropdown.d.ts +++ b/components/lib/dropdown/dropdown.d.ts @@ -407,6 +407,10 @@ export interface DropdownProps extends Omit boolean) | undefined; + /** + * Whether the option should be used as the value for the select element. + */ + useOptionAsValue?: boolean; /** * Property name or getter function that refers to the children options of option group. * @defaultValue items From 832edf780a91b46fb0f3863725d79525768777dc Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 9 Sep 2024 12:55:04 +0000 Subject: [PATCH 69/96] Update API doc --- components/doc/common/apidoc/index.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 09bd2cb1ad..4d57a4b52d 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -23597,6 +23597,14 @@ "default": "false", "description": "When enabled, it removes component related styles in the core." }, + { + "name": "useOptionAsValue", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "", + "description": "Whether the option should be used as the value for the select element." + }, { "name": "value", "optional": true, From 513af5e3c7600a9bbe036095562ef2f1fe7061d3 Mon Sep 17 00:00:00 2001 From: Melloware Date: Mon, 9 Sep 2024 08:56:20 -0400 Subject: [PATCH 70/96] Fix #7137: MultiSelect template docs (#7143) --- components/doc/multiselect/templatedoc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/doc/multiselect/templatedoc.js b/components/doc/multiselect/templatedoc.js index 8d2e4ef87a..88c26243c6 100644 --- a/components/doc/multiselect/templatedoc.js +++ b/components/doc/multiselect/templatedoc.js @@ -145,7 +145,7 @@ export default function TemplateDemo() { <>

    - Available options and the selected options support templating with itemTemplate and valueTemplate properties respectively. In addition, header, footer and filter sections can be templated as well. + Available options and the selected options support templating with itemTemplate and selectedItemTemplate properties respectively. In addition, header, footer and filter sections can be templated as well.

    From 6eb779cc7c71e443aea3bb6a2081ac27a8d00ea8 Mon Sep 17 00:00:00 2001 From: Tommy <35172239+ewenjo@users.noreply.github.com> Date: Mon, 9 Sep 2024 16:49:04 +0200 Subject: [PATCH 71/96] Define a new File type extended with custom objectURL property (#7145) --- components/lib/fileupload/fileupload.d.ts | 29 +++++++++++++---------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/components/lib/fileupload/fileupload.d.ts b/components/lib/fileupload/fileupload.d.ts index 54e8e072ec..50fa4daf29 100644 --- a/components/lib/fileupload/fileupload.d.ts +++ b/components/lib/fileupload/fileupload.d.ts @@ -136,6 +136,11 @@ export interface FileUploadPassThroughOptions { hooks?: ComponentHooks; } +/** + * Defines a custom File type extended with objectURL + */ +type FileUploadFile = File & { objectURL: string }; + /** * Defines current inline state in FileUpload component. */ @@ -143,7 +148,7 @@ export interface FileUploadState { /** * Current files. */ - files: any[]; + files: FileUploadFile[]; /** * Current uplaoding state as a boolean. * @defaultValue false @@ -162,7 +167,7 @@ export interface FileUploadState { /** * Current uploaded files. */ - uploadedFiles: any[]; + uploadedFiles: FileUploadFile[]; } /** @@ -270,7 +275,7 @@ interface ItemTemplateOptions { /** * Array of files. */ - files: File[]; + files: FileUploadFile[]; /** * Index of the file. */ @@ -317,7 +322,7 @@ interface FileUploadFilesEvent { /** * Uploaded files. */ - files: File[]; + files: FileUploadFile[]; } /** @@ -676,22 +681,22 @@ export declare class FileUpload extends React.Component { public getInput(): HTMLInputElement; /** * Gets the current files list. - * @return {File[]} Current files. + * @return {FileUploadFile[]} Current files. */ - public getFiles(): File[]; + public getFiles(): FileUploadFile[]; /** * Sets the current files list. - * @param {File[]} files - Current files. + * @param {FileUploadFile[]} files - Current files. */ - public setFiles(files: File[]): void; + public setFiles(files: FileUploadFile[]): void; /** * Gets the current uploaded files list. - * @return {File[]} Current uploaded files. + * @return {FileUploadFile[]} Current uploaded files. */ - public getUploadedFiles(): File[]; + public getUploadedFiles(): FileUploadFile[]; /** * Sets the current uploaded files list. - * @param {File[]} files - Current uploaded files. + * @param {FileUploadFile[]} files - Current uploaded files. */ - public setUploadedFiles(files: File[]): void; + public setUploadedFiles(files: FileUploadFile[]): void; } From 273ef05e75fd401f71c2dae318c168a2438881cb Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Mon, 9 Sep 2024 14:49:43 +0000 Subject: [PATCH 72/96] Update API doc --- components/doc/common/apidoc/index.json | 28 ++++++++++++++----------- 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 4d57a4b52d..d4becd3805 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -24782,7 +24782,7 @@ { "name": "getFiles", "parameters": [], - "returnType": "File[]", + "returnType": "FileUploadFile[]", "description": "Gets the current files list." }, { @@ -24794,7 +24794,7 @@ { "name": "getUploadedFiles", "parameters": [], - "returnType": "File[]", + "returnType": "FileUploadFile[]", "description": "Gets the current uploaded files list." }, { @@ -24814,7 +24814,7 @@ "parameters": [ { "name": "files", - "type": "File[]", + "type": "FileUploadFile[]", "description": "Current files." } ], @@ -24826,7 +24826,7 @@ "parameters": [ { "name": "files", - "type": "File[]", + "type": "FileUploadFile[]", "description": "Current uploaded files." } ], @@ -25334,7 +25334,7 @@ "name": "files", "optional": false, "readonly": false, - "type": "File[]", + "type": "FileUploadFile[]", "description": "Uploaded files." }, { @@ -25355,7 +25355,7 @@ "name": "files", "optional": false, "readonly": false, - "type": "File[]", + "type": "FileUploadFile[]", "description": "Uploaded files." }, { @@ -25375,7 +25375,7 @@ "name": "files", "optional": false, "readonly": false, - "type": "File[]", + "type": "FileUploadFile[]", "description": "Uploaded files." }, { @@ -25415,7 +25415,7 @@ "name": "files", "optional": false, "readonly": false, - "type": "File[]", + "type": "FileUploadFile[]", "description": "Uploaded files." }, { @@ -25654,7 +25654,7 @@ "name": "files", "optional": false, "readonly": false, - "type": "any[]", + "type": "FileUploadFile[]", "description": "Current files." }, { @@ -25682,7 +25682,7 @@ "name": "uploadedFiles", "optional": false, "readonly": false, - "type": "any[]", + "type": "FileUploadFile[]", "description": "Current uploaded files." } ], @@ -25843,7 +25843,7 @@ "name": "files", "optional": false, "readonly": false, - "type": "File[]", + "type": "FileUploadFile[]", "description": "Array of files." }, { @@ -25892,7 +25892,7 @@ "name": "files", "optional": false, "readonly": false, - "type": "File[]", + "type": "FileUploadFile[]", "description": "Uploaded files." } ], @@ -25927,6 +25927,10 @@ "values": { "FileUploadPassThroughType": { "values": "PassThroughType" + }, + "FileUploadFile": { + "values": "File & Object", + "description": "Defines a custom File type extended with objectURL" } } } From e1496ae93dc40495525bf833b536be15caa2d8a1 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Tue, 10 Sep 2024 19:35:54 +0800 Subject: [PATCH 73/96] fix: #6857 Adjust top up by 1px when gridlines are active (#7151) --- components/lib/datatable/DataTableBase.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js index 76277da93f..96dcf12ac4 100644 --- a/components/lib/datatable/DataTableBase.js +++ b/components/lib/datatable/DataTableBase.js @@ -59,6 +59,10 @@ const styles = ` z-index: 1; } + .p-datatable.p-datatable-gridlines .p-datatable-scrollable-table > .p-datatable-thead { + top: -1px; + } + .p-datatable-scrollable-table > .p-datatable-frozen-tbody { position: sticky; z-index: 1; From 849ae9f359c8d18ca533e35c452b183e63a72a3d Mon Sep 17 00:00:00 2001 From: Alper Ari <68128434+alperari@users.noreply.github.com> Date: Tue, 10 Sep 2024 13:47:27 +0200 Subject: [PATCH 74/96] feat: make AdditionalProps in IconOptions type optional (#7149) --- components/lib/utils/utils.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts index db8c8d7954..695b9b8f2d 100644 --- a/components/lib/utils/utils.d.ts +++ b/components/lib/utils/utils.d.ts @@ -181,7 +181,7 @@ export declare namespace ZIndexUtils { * @template ComponentProps Props from the owning component. * @template AdditionalProps Any custom properties of an icon like SortIcon of the Datatable for example. */ -export type IconOptions = AdditionalProps & { +export type IconOptions> = AdditionalProps & { /** * Icon specific properties. Size property allows FontAwesome to work properly. * @type {(React.HTMLProps & { size?: string }) | (React.SVGProps & { size?: string })} From 8cf069f26b11993fe5438a1bf2e4309f13154c1a Mon Sep 17 00:00:00 2001 From: kyybo <106741733+kyybo@users.noreply.github.com> Date: Wed, 11 Sep 2024 17:25:23 +0200 Subject: [PATCH 75/96] Fix #7126 : update Tree TypeScript documentation (#7160) * replace the PassThrought options 'checkboxContainer' and 'checkbox' with 'nodeCheckbox' --- components/lib/tree/tree.d.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/components/lib/tree/tree.d.ts b/components/lib/tree/tree.d.ts index 0b57db89e4..328eab06b0 100644 --- a/components/lib/tree/tree.d.ts +++ b/components/lib/tree/tree.d.ts @@ -74,13 +74,9 @@ export interface TreePassThroughOptions { */ togglerIcon?: TreePassThroughType>; /** - * Uses to pass attributes to the checkbox container's DOM element. + * Uses to pass attributes to the node checkbox's DOM element. */ - checkboxContainer?: TreePassThroughType>; - /** - * Uses to pass attributes to the checkbox's DOM element. - */ - checkbox?: TreePassThroughType>; + nodeCheckbox?: TreePassThroughType>; /** * Uses to pass attributes to the checkbox icon's DOM element. */ From 14ccac1982a74ecb5af9ff10dca9d8f20f518626 Mon Sep 17 00:00:00 2001 From: GitHub Actions Bot <> Date: Wed, 11 Sep 2024 15:25:56 +0000 Subject: [PATCH 76/96] Update API doc --- components/doc/common/apidoc/index.json | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index d4becd3805..5874b6bb2e 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -53061,18 +53061,11 @@ "description": "Uses to pass attributes to the toggler icon's DOM element." }, { - "name": "checkboxContainer", + "name": "nodeCheckbox", "optional": true, "readonly": false, "type": "TreePassThroughType>", - "description": "Uses to pass attributes to the checkbox container's DOM element." - }, - { - "name": "checkbox", - "optional": true, - "readonly": false, - "type": "TreePassThroughType>", - "description": "Uses to pass attributes to the checkbox's DOM element." + "description": "Uses to pass attributes to the node checkbox's DOM element." }, { "name": "checkboxIcon", From 14e9180ba7e7573c2ec9e7925de4b391b2b7512d Mon Sep 17 00:00:00 2001 From: Francesco Scandiffio Date: Thu, 12 Sep 2024 03:29:38 +0200 Subject: [PATCH 77/96] Fix: #7161 replace src value in DataTable typescript documentation (#7162) --- components/doc/datatable/samples/productsdoc.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/doc/datatable/samples/productsdoc.js b/components/doc/datatable/samples/productsdoc.js index d5eeba8b1a..706e006ac5 100644 --- a/components/doc/datatable/samples/productsdoc.js +++ b/components/doc/datatable/samples/productsdoc.js @@ -861,7 +861,7 @@ export default function ProductsDemo() { }; const imageBodyTemplate = (rowData: Product) => { - return {rowData.image!}; + return {rowData.image!}; }; const priceBodyTemplate = (rowData: Product) => { @@ -959,7 +959,7 @@ export default function ProductsDemo() {
    - {product.image && {product.image}} + {product.image && {product.image}}